/* ============================================================================
   Command palette (Ctrl+K / ⌘K) — a global "jump to any page" launcher, plus a
   visible search bar in the header so it's discoverable without the shortcut.
   Additive + self-contained. Uses the app's teal-blue tokens. Logic: commandPalette.js.
   ========================================================================== */

/* Topbar → 3-column grid so the search bar sits centered between Back (left) and
   the account menu (right), independent of their widths. */
.topbar { display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.topbar-left { justify-self:start; }
.acct-menu { justify-self:end; }

/* Visible search entry — a button styled like an input. */
.topbar-search {
  justify-self:center; display:inline-flex; align-items:center; gap:9px;
  height:40px; width:min(360px,40vw); box-sizing:border-box; padding:0 12px;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 4px 12px rgba(15,23,42,.05);
  color:#94a3b8; font-size:13px; font-weight:600; font-family:inherit; cursor:text; text-align:left;
  transition:background .15s ease, border-color .15s ease;
}
.topbar-search:hover { border-color:#cbd5e1; background:#f8fafc; }
.topbar-search > svg { flex:0 0 auto; color:#94a3b8; }
.topbar-search-txt { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-search-kbd { flex:0 0 auto; font-size:10px; font-weight:800; color:#64748b; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:6px; padding:2px 7px; }

/* Mobile (<=1180px): collapse to an icon so it doesn't crowd the header. */
@media (max-width:1180px) {
  .topbar-search { width:40px; padding:0; justify-content:center; gap:0; }
  .topbar-search-txt, .topbar-search-kbd { display:none; }
}

/* ── Overlay ───────────────────────────────────────────────────────────────── */
.cmdp-overlay { position:fixed; inset:0; z-index:3000; }
.cmdp-overlay[hidden] { display:none; }
.cmdp-backdrop { position:absolute; inset:0; background:rgba(8,20,35,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.cmdp-modal {
  position:relative; max-width:520px; width:calc(100% - 32px); margin:12vh auto 0;
  background:#fff; border-radius:16px; box-shadow:0 40px 90px rgba(0,0,0,.42); overflow:hidden;
  animation:cmdp-in var(--t-fast) var(--e-out);
}
@keyframes cmdp-in { from { transform:translateY(-8px); opacity:.5 } to { transform:none; opacity:1 } }
.cmdp-in { display:flex; align-items:center; gap:11px; padding:15px 17px; border-bottom:1px solid #eef2f7; }
.cmdp-in > svg { flex:0 0 auto; color:#94a3b8; }
.cmdp-in input { border:0; outline:0; width:100%; font-size:16px; font-weight:600; color:#0f172a; font-family:inherit; background:transparent; }
.cmdp-in kbd { flex:0 0 auto; font-size:10px; font-weight:800; color:#94a3b8; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:6px; padding:3px 7px; }
.cmdp-list { max-height:min(56vh,440px); overflow-y:auto; padding:8px; }
.cmdp-sec { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; padding:9px 10px 4px; }
.cmdp-item { display:flex; align-items:center; gap:12px; padding:10px 11px; border-radius:10px; cursor:pointer; }
.cmdp-item.on { background:#e0f2fe; }
.cmdp-ic { width:28px; height:28px; border-radius:8px; background:#fff; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden; }
.cmdp-ic img { width:20px; height:20px; object-fit:contain; }
.cmdp-t { flex:1; font-size:14px; font-weight:700; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdp-g { flex:0 0 auto; font-size:11px; color:#94a3b8; font-weight:600; white-space:nowrap; }
.cmdp-none { padding:26px; text-align:center; color:#94a3b8; font-size:14px; }
.cmdp-hint { display:flex; gap:14px; padding:9px 15px; border-top:1px solid #eef2f7; font-size:11px; color:#94a3b8; font-weight:600; }
.cmdp-hint b { color:#64748b; font-weight:800; }
body.cmdp-lock { overflow:hidden; }

/* ── Dark mode ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .topbar-search { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#8aa0c0; box-shadow:none; }
html[data-theme="dark"] .topbar-search:hover { background:rgba(255,255,255,.1); }
html[data-theme="dark"] .topbar-search-kbd { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#cbd5e1; }
html[data-theme="dark"] .cmdp-modal { background:#0f1e2e; }
html[data-theme="dark"] .cmdp-in, html[data-theme="dark"] .cmdp-hint { border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .cmdp-in input { color:#e2e8f0; }
html[data-theme="dark"] .cmdp-item.on { background:rgba(14,165,233,.16); }
html[data-theme="dark"] .cmdp-t { color:#e2e8f0; }

@media (prefers-reduced-motion:reduce) { .cmdp-modal { animation:none; } }

/* ── Record results (POs / containers / products) alongside page results ───── */
.cmdp-tag{
  flex:0 0 auto; min-width:34px; text-align:center; font-size:9.5px; font-weight:800; letter-spacing:.04em;
  padding:3px 6px; border-radius:6px; background:#e0f2fe; color:#075985; border:1px solid #bae6fd;
}
.cmdp-item .cmdp-t b{ font-weight:800; }
.cmdp-sub{ color:#64748b; font-weight:600; }
.cmdp-more{ padding:8px 14px; font-size:11.5px; opacity:.75; text-align:left; }
html[data-theme="dark"] .cmdp-tag{ background:rgba(14,165,233,.16); color:#7dd3fc; border-color:rgba(125,211,252,.28); }
html[data-theme="dark"] .cmdp-sub{ color:#94a3b8; }