/* ═══════════════════════════════════════════
   TOP DC BAR  (black, matches screenshots)
═══════════════════════════════════════════ */
.dc-bar {
  height: var(--dc-h); background: var(--black); color: #bbb;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; font-size: 11px; font-weight: 500; letter-spacing: .3px;
  user-select: none; position: relative; z-index: 300; flex-shrink: 0;
}
.dc-left  { display: flex; align-items: center; gap: 6px; }
.dc-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.dc-clock  { font-size: 11px; color: #ccc; }
.dc-site   { font-weight: 600; color: #ddd; letter-spacing: .5px; }
.dc-right  { display: flex; align-items: center; gap: 12px; }
#weather-display { display: flex; align-items: center; gap: 5px; cursor: pointer; color: #bbb; }
#weather-display:hover { color: #fff; }
#weather-display i { font-size: 12px; }

/* ═══════════════════════════════════════════
   HEADER BAR  (black — matches screenshots)
═══════════════════════════════════════════ */
.header-bar {
  height: var(--header-h); background: var(--black);
  display: flex; align-items: center; padding: 0 6px;
  position: relative; z-index: 200; flex-shrink: 0;
  border-bottom: 1px solid var(--border-dark);
}
.hb-nav-btn {
  color: #bbb; width: 38px; height: 38px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: background .15s, color .15s; flex-shrink: 0;
}
.hb-nav-btn:hover { background: var(--dark-hover); color: #fff; }
.hb-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 15px; font-weight: 500;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  pointer-events: none;
}
.hb-title i { font-size: 16px; color: #9ab85a; }
.hb-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.hb-btn {
  color: #bbb; width: 36px; height: 36px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: background .15s, color .15s; position: relative;
}
.hb-btn:hover { background: var(--dark-hover); color: #fff; }
.hb-btn.active { background: rgba(98,129,40,.35); color: #c5dc80; }
/* Notification badge (used on LCPS header icons) */
.hb-badge {
  position: absolute; top: 4px; right: 4px;
  background: #e53935; color: #fff; font-size: 9px; font-weight: 700;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ═══════════════════════════════════════════
   SUB-BAR  (dark — page-specific buttons render inside this)
═══════════════════════════════════════════ */
.sub-bar {
  height: var(--subbar-h); background: var(--dark-chrome);
  border-bottom: 1px solid var(--border-dark);
  display: flex; align-items: center; gap: 2px;
  padding: 0 10px; flex-shrink: 0; z-index: 90;
}
.sub-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 4px; font-size: 12px;
  color: #ccc; cursor: pointer; user-select: none;
  transition: background .13s, color .13s; white-space: nowrap;
  border: 1px solid transparent;
}
.sub-btn:hover { background: var(--dark-hover); color: #fff; border-color: #555; }
.sub-btn i { font-size: 14px; }
.sub-btn.active { background: var(--green-lt); border-color: var(--green); color: #c5dc80; }
.sub-btn.active i { color: #c5dc80; }
.sub-div { width: 1px; height: 20px; background: #555; margin: 0 4px; }
.sub-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Sub-bar dropdown menus (Add Widget / Bookmarks / View / Import, etc.) */
.sd-wrap { position: relative; display: inline-flex; }
.sd-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  background: #fff; border: 1px solid #bbb;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  border-radius: 6px; min-width: 220px; z-index: 500;
}
.sd-menu.open { display: block; }
.sd-hdr {
  background: var(--dark-chrome); color: #eee; padding: 7px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .4px;
  border-radius: 6px 6px 0 0;
}
.sd-hdr.mid { border-radius: 0; padding: 5px 12px; background: #f0f0f0; color: #666; font-size: 10px; }
.sd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 12px; color: #333;
  cursor: pointer; border-bottom: 1px solid #f2f2f2;
  user-select: none; transition: background .1s;
}
.sd-item:last-child { border-bottom: none; }
.sd-item:hover { background: var(--green-lt); color: var(--green); }
.sd-item i { font-size: 13px; width: 16px; text-align: center; color: #777; }
.sd-item:hover i { color: var(--green); }
.sd-item.added { color: var(--green); }
.sd-item.added i { color: var(--green); }
.sd-item input[type=checkbox] { accent-color: var(--green); width: 13px; height: 13px; cursor: pointer; }
.sd-item .cl { font-weight: 800; color: var(--green); min-width: 16px; font-size: 11px; }
.sd-item.locked { opacity: .5; cursor: default; }
.sd-item.locked:hover { background: transparent; color: #333; }
.sd-sep { height: 1px; background: #e8e8e8; margin: 2px 0; }

/* Error badge shown in a page's sub-bar (e.g. LCPS) */
#error-badge {
  display: none; cursor: pointer;
  background: #e53935; color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2);
}
#error-badge:hover { opacity: .85; }
#error-badge.active { display: inline-flex; align-items: center; gap: 3px; }

/* ═══════════════════════════════════════════
   SIDEBAR RAIL  (icon-only nav rail / filter-sidebar collapse toggle)
═══════════════════════════════════════════ */
.sidebar-rail {
  width: var(--rail-w); flex-shrink: 0;
  background: var(--black); border-right: 1px solid var(--border-dark);
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 0; gap: 2px; z-index: 150;
}
.rail-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 6px;
  cursor: pointer; color: #bbb; background: transparent;
  font-size: 18px; transition: background .15s, color .15s;
}
.rail-btn:hover { background: var(--dark-hover); color: #fff; }
.rail-btn.active { color: #c5dc80; background: rgba(98,129,40,.25); }

/* The collapse/expand toggle used on pages with a Filter Sidebar
   (Less Case Pending Sales, Locations) */
.sidebar-rail-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 6px;
  cursor: pointer; color: #c5dc80; background: rgba(98,129,40,.25);
  font-size: 18px; transition: background .15s, color .15s;
}
.sidebar-rail-toggle:hover { background: rgba(98,129,40,.4); }
.sidebar-rail-toggle i { transition: transform .2s ease; }

/* ═══════════════════════════════════════════
   PAGES PANEL  (hamburger-triggered overlay — site navigation)
   A true overlay: fixed position, sits ABOVE everything else with
   a translucent backdrop behind it, and slides in from the left.
   Does not push or resize any other layout element — the rest of
   the page stays exactly as it was underneath.
═══════════════════════════════════════════ */
.pages-panel-backdrop {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.pages-panel-backdrop.open { opacity: 1; pointer-events: auto; }
.pages-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 9991;
  width: var(--sidebar-w);
  background: #fff; border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform .22s ease;
  box-shadow: 4px 0 18px rgba(0,0,0,.25);
}
.pages-panel.open { transform: translateX(0); }
.pp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  background: #f8f8f8; flex-shrink: 0;
}
.pp-title {
  font-size: 12px; font-weight: 600; color: #444;
  display: flex; align-items: center; gap: 6px;
}
.pp-title i { font-size: 14px; color: #888; }
.pp-close { color: #999; font-size: 16px; cursor: pointer; padding: 2px; border-radius: 3px; }
.pp-close:hover { background: #eee; color: #c0392b; }
.pp-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.pp-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; font-size: 13px; color: #333;
  cursor: pointer; transition: background .12s, color .12s; user-select: none;
}
.pp-item:hover { background: var(--green-lt); color: var(--green); }
.pp-item.cur { color: var(--green); font-weight: 600; background: var(--green-lt); }
.pp-item i { font-size: 16px; width: 20px; text-align: center; color: #888; }
.pp-item:hover i, .pp-item.cur i { color: var(--green); }
.pp-sep { height: 1px; background: #eee; margin: 6px 14px; }

/* ═══════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════ */
.app-body {
  display: flex;
  height: calc(100vh - var(--dc-h) - var(--header-h) - var(--subbar-h));
  overflow: hidden;
}
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; background: var(--bg-canvas); }

/* Row-direction wrapper for any page that places a table/canvas
   beside a Cards-style detail panel. .main-content itself is
   column-direction (so .status-bar always sits full-width at the
   bottom) — without this wrapper, a detail-panel's width/flex-shrink
   rules fight the table for VERTICAL space instead of sitting next
   to it horizontally, which is what caused the table to collapse
   or vanish whenever the panel opened. Any page with a detail panel
   should wrap its table-wrap + detail-panel in this, as a sibling
   of .status-bar, not a flex child of .main-content directly. */
.content-row { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* ═══════════════════════════════════════════
   STATUS BAR
═══════════════════════════════════════════ */
.status-bar {
  height: var(--statusbar-h); background: var(--black-light); color: #ccc;
  display: flex; align-items: center; gap: 20px;
  padding: 0 14px; font-size: 11px; font-weight: 500;
  flex-shrink: 0; border-top: 1px solid var(--border-dark); flex-wrap: wrap;
}
.stat { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.stat-lbl { opacity: .6; font-weight: 400; }
.stat-val { font-weight: 700; color: #fff; }

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */
#toast {
  position: fixed; bottom: 38px; left: 50%; transform: translateX(-50%);
  background: #222; color: #fff; padding: 7px 18px; border-radius: 5px;
  font-size: 12px; z-index: 99999; opacity: 0; transition: opacity .3s;
  pointer-events: none; border: 1px solid #444;
}

/* ═══════════════════════════════════════════
   GENERIC MODAL  (used by the widget-edit dialog on Home;
   reusable by any future page that needs a small modal)
═══════════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 9998;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #fff; border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  width: 340px; overflow: hidden;
}
.modal-header {
  background: var(--black); color: #fff;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--green);
}
.modal-close { color: #fff; opacity: .7; cursor: pointer; font-size: 16px; }
.modal-close:hover { opacity: 1; }
.modal-body { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.modal-field { display: flex; flex-direction: column; gap: 3px; }
.modal-field label { font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: .4px; }
.modal-field input, .modal-field select {
  padding: 6px 8px; font-size: 13px; border: 1px solid var(--border);
  border-radius: 4px; font-family: 'Roboto', sans-serif; outline: none;
}
.modal-field input:focus, .modal-field select:focus { border-color: var(--green); }
.modal-footer { padding: 10px 14px 14px; display: flex; justify-content: flex-end; gap: 8px; }
.modal-btn { padding: 6px 16px; border-radius: 4px; font-size: 13px; font-weight: 500; }
.modal-btn-cancel { border: 1px solid #ccc; color: #555; }
.modal-btn-cancel:hover { background: #f0f0f0; }
.modal-btn-save { background: var(--green); color: #fff; }
.modal-btn-save:hover { background: var(--green-dk); }

/* ═══════════════════════════════════════════
   CROSS-PAGE LINK FEATURE  (shared — js/core/link.js)
═══════════════════════════════════════════ */
#linkBtn.disabled, #linkBtn:disabled,
#linkBtnHeader.disabled, #linkBtnHeader:disabled { opacity: .4; cursor: default; pointer-events: none; }
.link-count-badge {
  background: var(--green); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 9px; padding: 1px 6px; min-width: 16px; text-align: center;
  display: inline-block; line-height: 1.4;
}
#linkBtn:not(.disabled) .link-count-badge,
#linkBtnHeader:not(.disabled) .link-count-badge { background: #c5dc80; color: #1a2b08; }

/* Picker — small modal listing valid link targets */
.link-picker-box { width: 360px; max-width: calc(100vw - 32px); }
.link-picker-sub {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #888;
  padding: 10px 14px 4px;
}
.link-picker-sub strong { color: var(--green-dk); }
.link-target-list { display: flex; flex-direction: column; padding: 6px 0 10px; }
.link-target-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  cursor: pointer; font-size: 13px; color: #333; transition: background .12s;
}
.link-target-item:hover { background: #f0f4f8; }
.link-target-item i:first-child { font-size: 16px; color: var(--green-dk); flex-shrink: 0; }
.link-target-item span { flex: 1; }
.link-target-arrow { font-size: 13px; color: #bbb; flex-shrink: 0; }
.link-picker-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 24px 16px; text-align: center; color: #aaa; font-size: 12px;
}

/* Full-screen overlay — iframes the target page, fully interactive,
   underlying page + selection stay exactly as they were */
.link-overlay-outer {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55); align-items: center; justify-content: center;
}
.link-overlay-outer.open { display: flex; }
.link-overlay-box {
  width: calc(100vw - 48px); height: calc(100vh - 48px);
  background: #fff; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.link-overlay-hdr {
  background: var(--black); color: #fff; flex-shrink: 0;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--green);
}
.link-overlay-hdr-title { display: flex; align-items: center; gap: 8px; }
.link-overlay-hdr-title i { font-size: 15px; }
.link-overlay-close { color: #fff; opacity: .75; cursor: pointer; font-size: 18px; padding: 2px; }
.link-overlay-close:hover { opacity: 1; }
.link-overlay-iframe-wrap { flex: 1; position: relative; }
.link-overlay-iframe-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}

/* ═══════════════════════════════════════════
   SAVED PRESETS  (shared — js/core/presets.js)
═══════════════════════════════════════════ */
.presets-picker-box { width: 420px; max-width: calc(100vw - 32px); }
.presets-save-row {
  display: flex; gap: 6px; padding: 12px 14px 8px; align-items: center;
}
.presets-name-input {
  flex: 1; border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px; font-size: 12px; outline: none; min-width: 0;
}
.presets-name-input:focus { border-color: var(--green); }
.presets-type-select {
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 6px; font-size: 11.5px; background: #fafafa; cursor: pointer; flex-shrink: 0;
}
.presets-save-btn {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 6px 10px; border-radius: 4px; font-size: 12px; font-weight: 600;
  border: none; color: #fff; background: var(--green); cursor: pointer;
}
.presets-save-btn:hover { background: var(--green-dk); }
.presets-save-error {
  margin: 0 14px 8px; padding: 6px 10px; border-radius: 4px;
  background: #fdecea; color: #c0392b; font-size: 11.5px;
}
.presets-list { max-height: 360px; overflow-y: auto; border-top: 1px solid #eee; }
.presets-group-hdr {
  background: #f0f0f0; padding: 6px 14px; font-size: 10.5px; font-weight: 600;
  color: #888; letter-spacing: .4px; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;
}
.presets-list .presets-group-hdr:first-child { border-top: none; }
.presets-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-bottom: 1px solid #f5f5f5; font-size: 12.5px;
}
.presets-item:hover { background: #f9f9f9; }
.presets-item-name { flex: 1; cursor: pointer; color: #1a56a0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presets-item-name:hover { text-decoration: underline; }
.presets-fav-badge { color: #e0a72c; font-size: 13px; flex-shrink: 0; display: flex; align-items: center; }
.presets-fav-badge.presets-fav-default { color: #c8a85a; opacity: .7; }
.presets-item-btn {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: #aaa; cursor: pointer; font-size: 13px; transition: background .12s, color .12s;
}
.presets-item-btn:hover { background: #eee; color: #555; }
.presets-item-del:hover { background: #fdecea; color: #c0392b; }
.presets-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 16px; text-align: center; color: #bbb; font-size: 12.5px;
}
.presets-empty i { font-size: 36px; opacity: .3; }


/* ═══════════════════════════════════════════
   SCANNER STATUS INDICATOR  (shared — js/core/scanner.js)
   Injected into .hb-right on every page that loads scanner.js.
   Idle by default (dim, matching .hb-btn's resting color); pulses
   green briefly on a recognized scan, amber if a fast burst was
   too short to count as a real scan (likely a mis-trigger).
═══════════════════════════════════════════ */
.scanner-status {
  width: 36px; height: 36px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #777; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.scanner-status-ok {
  color: #c5dc80; background: rgba(98,129,40,.35);
  animation: scanner-pulse .4s ease;
}
.scanner-status-miss {
  color: #e0a72c; background: rgba(224,167,44,.18);
  animation: scanner-pulse .4s ease;
}
@keyframes scanner-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════
   HEADER-BAR DROPDOWNS  (shared shell — js/core/quicklookup.js
   and js/core/bookmarks.js. Same visual language as .sd-menu —
   white panel, same border/shadow/radius — but anchored under
   .hb-right in the black header bar instead of the sub-bar, and
   right-aligned since .hb-right sits at the far right edge.)
═══════════════════════════════════════════ */
.hb-dropdown {
  display: none; position: fixed; top: calc(var(--dc-h) + var(--header-h) + 4px); right: 8px;
  background: #fff; border: 1px solid #bbb;
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
  border-radius: 6px; width: 320px; max-width: calc(100vw - 16px);
  z-index: 9997; overflow: hidden;
}
.hb-dropdown.open { display: block; }
.hb-dropdown-hdr {
  background: var(--dark-chrome); color: #eee; padding: 7px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .4px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.hb-dropdown-hdr i { font-size: 12px; margin-right: 4px; }
.hb-dropdown-ftr {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; font-size: 12px; color: var(--green-dk);
  cursor: pointer; border-top: 1px solid #eee; background: #fafafa;
  transition: background .12s;
}
.hb-dropdown-ftr:hover { background: var(--green-lt); }
.hb-dropdown-ftr i { font-size: 13px; }

/* ── Quick Look Up ── */
.ql-search-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid #eee;
}
.ql-search-row > i:first-child { font-size: 14px; width: 16px; height: 16px; text-align: center; color: #999; flex-shrink: 0; }
.ql-search-row input {
  flex: 1; border: none; outline: none; font-size: 13px; color: #222; min-width: 0;
}
.ql-search-row input::placeholder { color: #bbb; }
.ql-clear { font-size: 13px; width: 16px; height: 16px; text-align: center; color: #ccc; cursor: pointer; flex-shrink: 0; transition: color .12s; }
.ql-clear:hover { color: #c0392b; }
.ql-results { max-height: 360px; overflow-y: auto; }
.ql-state {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 14px; font-size: 12.5px; color: #888; text-align: center; justify-content: center;
}
.ql-state-muted { color: #aaa; }
.ql-spin { animation: ql-spin .8s linear infinite; width: 16px; height: 16px; }
@keyframes ql-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ql-group-hdr {
  background: #f0f0f0; padding: 6px 12px; font-size: 10.5px; font-weight: 600;
  color: #888; letter-spacing: .4px; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;
  display: flex; align-items: center; gap: 6px;
}
.ql-group-hdr i { width: 14px; height: 14px; }
.ql-results .ql-group-hdr:first-child { border-top: none; }
.ql-result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #f5f5f5;
  transition: background .1s;
}
.ql-result-item:hover { background: var(--green-lt); }
.ql-result-icon { font-size: 14px; width: 16px; height: 16px; text-align: center; color: var(--green-dk); flex-shrink: 0; }
.ql-result-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ql-result-title { font-size: 13px; color: #222; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-result-sub { font-size: 11px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-result-arrow { font-size: 12px; width: 14px; height: 14px; text-align: center; color: #ccc; flex-shrink: 0; }

/* ── Bookmarks menu ── */
.bm-sort-wrap { flex-shrink: 0; }
.bm-sort-select {
  background: #2a2a2a; color: #ccc; border: 1px solid #555; border-radius: 3px;
  font-size: 10.5px; padding: 2px 4px; cursor: pointer; outline: none;
}
.bm-list { max-height: 320px; overflow-y: auto; }
.bm-empty { padding: 18px 14px; font-size: 12px; color: #aaa; text-align: center; }
.bm-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid #f5f5f5;
  font-size: 12.5px; color: #333; transition: background .1s;
}
.bm-item:hover { background: #fafafa; }
.bm-item.bm-dragging { opacity: .4; }
.bm-drag-handle { font-size: 13px; width: 14px; height: 14px; text-align: center; color: #ccc; cursor: grab; flex-shrink: 0; }
.bm-item-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.bm-item-main i { font-size: 13px; width: 15px; height: 15px; text-align: center; color: var(--green-dk); flex-shrink: 0; }
.bm-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-action-icon {
  font-size: 12.5px; width: 16px; height: 16px; text-align: center; color: #ccc; cursor: pointer; flex-shrink: 0;
  padding: 3px; border-radius: 3px; transition: background .12s, color .12s; box-sizing: content-box;
}
.bm-action-icon:hover { background: #eee; color: #555; }
.bm-remove:hover { color: #c0392b; }
.bm-save { color: var(--green-dk); }
.bm-save:hover { background: var(--green-lt); }
.bm-item-editing { padding: 6px 10px; }
.bm-rename-input {
  flex: 1; min-width: 0; border: 1px solid var(--green); border-radius: 3px;
  padding: 4px 6px; font-size: 12.5px; outline: none;
}

/* ── Bookmark preview card — small popover shown when a record
   bookmark (item/location/case, not a whole-page bookmark) is
   clicked, instead of navigating immediately. ── */
.bm-preview-card {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 300; min-width: 260px; max-width: 320px;
  background: #fff; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.28);
  padding: 14px 16px;
}
.bm-preview-card.open { display: block; }
.bm-preview-hdr { display: flex; align-items: center; gap: 8px; }
.bm-preview-hdr i:first-child { font-size: 16px; color: var(--green-dk); }
.bm-preview-label { flex: 1; font-size: 14px; font-weight: 700; color: #222; }
.bm-preview-close { font-size: 14px; color: #999; cursor: pointer; }
.bm-preview-close:hover { color: #555; }
.bm-preview-sub { font-size: 12.5px; color: #777; margin-top: 6px; line-height: 1.4; }
.bm-preview-go {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  width: 100%; margin-top: 12px; padding: 8px; border: none; border-radius: 6px;
  background: var(--green); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.bm-preview-go:hover { background: var(--green-dk); }

/* ── Record bookmark toggle button (injected into a Cards panel's
   dp-controls header for item/location/case detail records) ── */
.record-bookmark-btn.active i { color: #e0a83e; }
.record-bookmark-btn.active:hover i { color: #c98f28; }

/* ═══════════════════════════════════════════
   FILTER SIDEBAR TOOLBAR  (shared across every page that has a
   filter sidebar — Favorite + Reset + Find, pill-shaped, matching
   real Fusion's filter screen. Previously duplicated per-page;
   consolidated here so every page stays visually identical and a
   future tweak only needs to happen in one place.)
═══════════════════════════════════════════ */
.fs-actions { display: flex; gap: 6px; padding: 10px 10px 8px; flex-shrink: 0; align-items: center; }
.presets-fav-wrap { flex-shrink: 0; }
.presets-fav-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); color: #1a56a0; background: #fff; cursor: pointer;
  transition: background .13s, border-color .13s; max-width: 130px;
}
.presets-fav-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presets-fav-btn:hover { background: #f3f7ff; border-color: #aac3e6; }
.presets-fav-btn i { font-size: 11px; flex-shrink: 0; }
.fs-reset {
  flex: 1; padding: 7px 0; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); color: #1a56a0; background: #fff; cursor: pointer;
  transition: background .13s, border-color .13s;
}
.fs-reset:hover { background: #f3f7ff; border-color: #aac3e6; }
.fs-find {
  flex: 1; padding: 7px 0; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: none; color: #fff; background: var(--green); cursor: pointer;
  transition: background .13s;
}
.fs-find:hover { background: var(--green-dk); }
.fs-inner { flex: 1; overflow-y: auto; padding: 2px 10px 16px; }
.fs-inner::-webkit-scrollbar { width: 4px; }
.fs-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); border-radius: 3px; }
.fg-row { border-bottom: 1px solid #eee; padding: 8px 2px 6px; }
.fg-row:last-child { border-bottom: none; }
/* Two real fields side by side in one row — matches real Fusion's
   filter screen layout (e.g. Pick Zone Type | Rack Type). Each
   half gets its own .fl label so both fields stay independently
   labeled rather than sharing one label above the pair. */
.fg-row-2 {
  border-bottom: 1px solid #eee; padding: 8px 2px 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
}
.fg-row-2:last-child { border-bottom: none; }
.fg-row-2 .fg-col { min-width: 0; }
.fl { font-size: 11px; font-weight: 500; color: #777; margin-bottom: 4px; display: block; }
.f-underline {
  width: 100%; border: none; border-bottom: 1px solid var(--border);
  background: transparent; padding: 4px 2px; font-size: 13px; color: #222;
  outline: none; transition: border-color .15s;
}
.f-underline:focus { border-color: var(--green); }
.f-underline::placeholder { color: #bbb; }
.f-textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 4px;
  background: #fff; padding: 6px 8px; font-size: 12.5px; color: #222;
  outline: none; transition: border-color .15s; resize: vertical;
  font-family: inherit; box-sizing: border-box;
}
.f-textarea:focus { border-color: var(--green); }
.f-textarea::placeholder { color: #bbb; }
.f-select {
  width: 100%; border: 1px solid var(--border); border-radius: 4px;
  background: #fafafa; padding: 5px 6px; font-size: 12px; color: #222;
  outline: none; margin-bottom: 6px; cursor: pointer;
}
.f-select:focus { border-color: var(--green); }
.fchk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #444; padding: 4px 0; cursor: pointer; user-select: none; }
.fchk input[type=checkbox] { accent-color: var(--green); width: 14px; height: 14px; cursor: pointer; }
.fchk:hover { color: var(--green); }

/* ═══════════════════════════════════════════
   DATE RANGE TOGGLE  (Work Date / Delivery Date pill toggle +
   range display with clear button, matching real Fusion's
   filter screen. Shared so any page can adopt date filtering
   later without re-styling it from scratch.)
═══════════════════════════════════════════ */
.date-type-toggle {
  display: flex; gap: 0; margin-bottom: 8px; background: #f0f0f0;
  border-radius: 999px; padding: 3px; position: relative;
}
.dt-btn {
  flex: 1; text-align: center; padding: 7px 0; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; color: #777; cursor: pointer;
  transition: background .15s, color .15s; position: relative; z-index: 1;
}
.dt-btn:hover { color: #555; }
.dt-btn.active { background: var(--green-lt); color: var(--green-dk); font-weight: 600; }
.date-range-display {
  display: flex; align-items: center; gap: 8px; padding: 6px 2px;
  border-bottom: 1px solid var(--border); font-size: 13px; color: #222;
}
.date-range-display i.ti-calendar { color: #999; font-size: 14px; flex-shrink: 0; }
.date-range-text { flex: 1; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-range-text.empty { color: #bbb; }
.date-range-clear { color: #bbb; cursor: pointer; font-size: 13px; flex-shrink: 0; transition: color .12s; }
.date-range-clear:hover { color: #c0392b; }
.date-range-inputs { display: none; gap: 6px; align-items: center; padding-top: 6px; }
.date-range-inputs.open { display: flex; }
.date-range-inputs input { flex: 1; }
.date-sep { color: #bbb; font-size: 12px; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   CHIP PICKER  (shared multi-select for any field with a known
   set of values — e.g. Case Status, Pick Zone, Storage Type.
   Same shell as the column picker, but each item is a toggle
   chip rather than a column-visibility checkbox. Previously
   lived only in pir-jit-tracker.css; consolidated here so any
   page can use the same component.)
═══════════════════════════════════════════ */
.chip-picker-wrap { position: relative; width: 100%; }
.chip-picker-field {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border); border-radius: 4px; background: #fafafa;
  padding: 6px 8px; cursor: pointer; min-height: 30px; transition: border-color .15s;
}
.chip-picker-field:hover { border-color: #aaa; }
.chip-picker-field.open { border-color: #1565c0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.chip-picker-lbl { font-size: 12px; color: #1a56a0; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-picker-panel {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid #1565c0; border-top: none;
  border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); z-index: 500; max-height: 280px; overflow-y: auto;
}
.chip-picker-panel.open { display: block; }
.chip-picker-search {
  width: 100%; padding: 6px 10px; border: none;
  border-bottom: 1px solid var(--border); outline: none;
  font-size: 12px; background: #fff; color: #222; position: sticky; top: 0;
}
.chip-picker-search::placeholder { color: #bbb; }
.chip-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; cursor: pointer; font-size: 12px; color: #333;
  border-bottom: 1px solid #f5f5f5; user-select: none; transition: background .1s;
}
.chip-picker-item:hover { background: #f0f4f8; }
.chip-picker-item .cp-cb {
  width: 16px; height: 16px; border: 2px solid #bbb; border-radius: 3px;
  flex-shrink: 0; position: relative; background: #fff;
  transition: background .1s, border-color .1s;
}
.chip-picker-item .cp-cb.on { background: #1565c0; border-color: #1565c0; }
.chip-picker-item .cp-cb.on::after {
  content: ''; position: absolute; top: 2px; left: 5px;
  width: 4px; height: 8px; border: 2px solid #fff;
  border-top: none; border-left: none; transform: rotate(45deg);
}

/* ═══════════════════════════════════════════
   SHARED TABLE CONTEXT MENUS (js/core/table-context-menus.js)
   Moved here from css/pages/lcps.css — these classes used to be
   page-local to LCPS's own column-header menu implementation.
   Generalizing the menu logic into a shared core module (so every
   table gets right-click/long-press column + row menus, not just
   LCPS) meant this visual styling needed to be available to every
   page too, not just the one that originally had it. LCPS keeps
   working unchanged since these are the exact same class names —
   nothing about its markup or behavior changed by this move.
═══════════════════════════════════════════ */
.col-menu {
  position: fixed; width: 260px; background: #fff;
  border: 1px solid #bbb; border-radius: 6px;
  box-shadow: 0 8px 26px rgba(0,0,0,.3); z-index: 99998;
}
.col-menu.hidden { display: none; }
.col-menu-tabs { display: flex; border-bottom: 1px solid #e0e0e0; background: #f7f7f7; border-radius: 6px 6px 0 0; }
.col-menu-tab {
  flex: 1; padding: 8px 0; text-align: center; font-size: 11px; font-weight: 600;
  color: #777; cursor: pointer; user-select: none; border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.col-menu-tab:hover { color: var(--green); }
.col-menu-tab.active { color: var(--green); border-bottom-color: var(--green); background: #fff; }
.col-menu-body { padding: 10px; max-height: 320px; overflow-y: auto; }
.col-menu-body::-webkit-scrollbar { width: 5px; }
.col-menu-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }

.cm-sort-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 8px; }
.cm-sort-lbl { font-size: 11px; color: #666; font-weight: 500; }
.cm-sort-btns { display: flex; gap: 4px; }
.cm-sort-btn {
  width: 28px; height: 26px; border-radius: 4px; border: 1px solid var(--border);
  background: #fafafa; color: #555; display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.cm-sort-btn:hover { background: #eee; }
.cm-sort-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
.cm-sep { height: 1px; background: #eee; margin: 8px 0; }

.cm-col-list { display: flex; flex-direction: column; gap: 1px; }
.cm-col-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  font-size: 12px; color: #333; cursor: pointer; border-radius: 4px;
  user-select: none; transition: background .1s;
}
.cm-col-item:hover { background: #f0f4f8; }
.cm-col-item.locked { opacity: .5; cursor: default; }
.cm-col-item.locked:hover { background: transparent; }
.cm-col-item input[type=checkbox] { accent-color: var(--green); width: 14px; height: 14px; cursor: pointer; }
.cm-col-item.current-col { background: var(--green-lt); font-weight: 600; }

.cm-filter-target { font-size: 11px; color: #666; margin-bottom: 8px; }
.cm-filter-target strong { color: var(--green); }
.cm-select, .cm-input {
  width: 100%; padding: 6px 8px; margin-bottom: 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 4px; background: #fff; color: #222;
}
.cm-select:focus, .cm-input:focus { outline: none; border-color: var(--green); }
.cm-filter-actions { display: flex; gap: 6px; }
.cm-filter-actions .sb-util-btn { margin-top: 0 !important; }
.cm-active-filters { display: flex; flex-direction: column; gap: 5px; }
.cm-active-filter-chip {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--green-lt); border: 1px solid var(--green); border-radius: 4px;
  padding: 4px 8px; font-size: 11px; color: var(--green-dk);
}
.cm-active-filter-chip i { cursor: pointer; opacity: .7; }
.cm-active-filter-chip i:hover { opacity: 1; }

/* Generic has-filter indicator for any table using data-col-key
   (the shared module's attribute) — LCPS keeps its own
   #salesTable th[data-col].has-filter selector in lcps.css since
   it uses a different attribute name (data-col, numeric index). */
th[data-col-key].has-filter { box-shadow: inset 0 0 0 2px #1a56a0; }

/* ── Row context menu — plain list, reuses .col-menu-item /
   .col-menu-divider already defined for the Location Slotting
   page's column menu earlier — kept here too since this is now
   the shared definition location for table context menus broadly. ── */
.tcm-row-menu .col-menu-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  font-size: 12.5px; color: #333; cursor: pointer;
}
.tcm-row-menu .col-menu-item i { font-size: 14px; color: #777; flex-shrink: 0; }
.tcm-row-menu .col-menu-item:hover { background: var(--green-lt); color: var(--green-dk); }
.tcm-row-menu .col-menu-divider { height: 1px; background: #eee; margin: 4px 8px; }

/* Touch affordance: on touch-capable devices, give cells a subtle
   active-state feedback during the long-press window so the
   person gets confirmation something is happening before the menu
   actually appears (matches platform conventions for long-press
   context menus elsewhere). */
@media (hover: none) and (pointer: coarse) {
  th[data-col-key]:active, td[data-col-key]:active { background: rgba(0,0,0,.05); }
}