/* Field Ops mockups — shared interaction layer (bento + slide-over + cmd-k + toast).
   Linked alongside ../team/_shared.css. */

/* ─── BENTO KPI grid (replaces narrow strips) ─────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.bento-card {
  background: var(--ns-surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 14px 16px;
  transition: background var(--transition);
  position: relative;
  overflow: hidden;
}
.bento-card:hover { background: rgba(255,255,255,0.035); }
.bento-card .label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ns-text-45); margin-bottom: 8px; }
.bento-card .value { display: flex; align-items: baseline; gap: 8px; font-family: 'Geist Mono','SF Mono',monospace; }
.bento-card .value .n { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--ns-text-100); font-variant-numeric: tabular-nums; }
.bento-card .value .delta { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 100px; }
.bento-card .value .delta.pos  { color: var(--ns-positive); background: rgba(52,211,153,0.12); }
.bento-card .value .delta.warn { color: var(--ns-warning);  background: rgba(251,191,36,0.12); }
.bento-card .value .delta.crit { color: var(--ns-danger);   background: rgba(248,113,113,0.12); }
.bento-card .ctx { font-size: 11px; color: var(--ns-text-45); margin-top: 4px; }
.bento-card .spark { margin-top: 8px; height: 32px; }
.bento-card.accent   { border-left: 3px solid var(--ns-accent); }
.bento-card.positive { border-left: 3px solid var(--ns-positive); }
.bento-card.warning  { border-left: 3px solid var(--ns-warning); }
.bento-card.critical { border-left: 3px solid var(--ns-danger); }
a.bento-card { text-decoration: none; color: inherit; display: block; }

/* Bento spans (12-col grid) */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }

/* ─── Slide-over fly-out ──────────────────────────────────────── */
.ws-flyout {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  background: rgba(9,9,11,0.96);
  backdrop-filter: blur(16px);
  border-left: 1px solid var(--ns-border-h);
  box-shadow: -16px 0 48px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex; flex-direction: column;
  z-index: 35;
  transform: translateX(100%);
  transition: transform 220ms var(--ease);
  pointer-events: none;
}
.ws-flyout.open { transform: translateX(0); pointer-events: auto; }
.ws-flyout .close {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ns-border);
  border-radius: 6px; color: var(--ns-text-70);
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.ws-flyout .fo-head { padding: 14px 16px; border-bottom: 1px solid var(--ns-border); flex-shrink: 0; position: relative; }
.ws-flyout .fo-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.ws-flyout .fo-body > * + * { margin-top: 12px; }
.ws-flyout .fo-actions { padding: 10px 12px; border-top: 1px solid var(--ns-border); display: flex; gap: 6px; flex-shrink: 0; }

.ws-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.25);
  z-index: 34;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.ws-backdrop.open { opacity: 1; pointer-events: auto; }

/* ─── Page header (consistent across mockups) ────────────────── */
.ws-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ws-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.ws-head .sub { font-size: 12px; color: var(--ns-text-45); margin-top: 4px; }
.ws-head .actions { display: flex; gap: 8px; align-items: center; }

/* ─── Cmd+K palette ───────────────────────────────────────────── */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
.cmdk-overlay.open { display: flex; }
.cmdk {
  width: 560px; max-width: calc(100vw - 32px);
  background: rgba(20,21,24,0.98);
  border: 1px solid var(--ns-border-h);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(129,140,248,0.2);
  overflow: hidden;
}
.cmdk input {
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: none; outline: none;
  color: var(--ns-text-100);
  font-size: 15px;
  font-family: inherit;
  border-bottom: 1px solid var(--ns-border);
}
.cmdk input::placeholder { color: var(--ns-text-45); }
.cmdk-section { padding: 8px 0; }
.cmdk-section-label { padding: 6px 18px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ns-text-45); }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 18px; cursor: pointer; }
.cmdk-item:hover, .cmdk-item.active { background: rgba(129,140,248,0.10); }
.cmdk-item .verb { font-size: 13px; color: var(--ns-text-100); }
.cmdk-item .obj  { font-size: 13px; color: var(--ns-text-70); margin-left: auto; font-family: 'Geist Mono','SF Mono',monospace; }
.cmdk-item .ic   { width: 14px; height: 14px; stroke: var(--ns-text-45); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmdk-foot { padding: 8px 18px; border-top: 1px solid var(--ns-border); display: flex; gap: 14px; font-size: 10px; color: var(--ns-text-45); }
.cmdk-foot kbd { font-family: 'Geist Mono','SF Mono',monospace; font-size: 9px; background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 3px; color: var(--ns-text-70); margin-right: 4px; }

.cmdk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ns-border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--ns-text-70);
  cursor: pointer;
}
.cmdk-badge kbd { font-family: 'Geist Mono','SF Mono',monospace; font-size: 9px; background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 3px; color: var(--ns-text-100); }

/* ─── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(20,21,24,0.98);
  border: 1px solid var(--ns-border-h);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12px; color: var(--ns-text-100);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  opacity: 0;
  transition: all 220ms var(--ease);
  z-index: 70;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .ic { display: inline-block; margin-right: 6px; color: var(--ns-positive); }

/* ─── Job-type icon (paired with color for accessibility) ─── */
.jt {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px;
}
.jt svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jt.shower    { color: var(--ns-accent);   background: rgba(129,140,248,0.12); }
.jt.igu       { color: var(--ns-info);     background: rgba(96,165,250,0.12); }
.jt.storefront{ color: #a78bfa;            background: rgba(167,139,250,0.12); }
.jt.auto      { color: var(--ns-warning);  background: rgba(251,191,36,0.12); }
.jt.mirror    { color: #2dd4bf;            background: rgba(45,212,191,0.12); }
.jt.emergency { color: var(--ns-danger);   background: rgba(248,113,113,0.12); }

/* ─── Material state pill (paired glyph + color) ─── */
.mat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
}
.mat .gl { font-size: 12px; }
.mat.no-mat        { color: var(--ns-text-45); }
.mat.measure-sched { color: var(--ns-info); }
.mat.measured      { color: var(--ns-info); }
.mat.ordered       { color: var(--ns-warning); }
.mat.eta-conf      { color: var(--ns-warning); }
.mat.received      { color: var(--ns-positive); }
.mat.ready         { color: var(--ns-positive); }
.mat.scheduled     { color: var(--ns-accent); }
.mat.installed     { color: var(--ns-text-70); }

/* Extra-small button (xs) for crowded rows */
.btn.xs { padding: 2px 8px; font-size: 9.5px; }

/* Tab pill — generic, used by .stage-tabs, .filter-tabs */
.fp-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--ns-surface); border-radius: 10px; box-shadow: var(--card-shadow); }
.fp-tab { padding: 6px 12px; border-radius: 7px; font-size: 11px; font-weight: 500; color: var(--ns-text-45); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--transition); border: none; background: none; }
.fp-tab.active { background: var(--ns-surface-h); color: var(--ns-text-100); box-shadow: 0 0 0 1px var(--ns-border-h); }
.fp-tab .badge { font-size: 9px; font-family: 'Geist Mono','SF Mono',monospace; padding: 1px 6px; border-radius: 100px; background: rgba(255,255,255,0.08); color: var(--ns-text-70); }
.fp-tab.active .badge { background: rgba(129,140,248,0.2); color: var(--ns-accent); }

/* Filter chip toggle */
.fp-chip {
  padding: 4px 9px; font-size: 10px; font-family: 'Geist Mono','SF Mono',monospace;
  color: var(--ns-text-45); background: transparent;
  border: 1px solid var(--ns-border); border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer;
}
.fp-chip.active { color: var(--ns-text-100); background: var(--ns-surface-h); border-color: var(--ns-border-h); }
.fp-chip .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── Light mode overrides ── */
.light .bento-card:hover { background: rgba(0,0,0,0.02); }
.light .ws-flyout { background: rgba(240,241,245,0.96); box-shadow: -16px 0 48px rgba(0,0,0,0.15); }
.light .ws-flyout .close { background: rgba(0,0,0,0.04); }
.light .cmdk { background: rgba(255,255,255,0.98); box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(99,102,241,0.2); }
.light .cmdk-foot kbd { background: rgba(0,0,0,0.06); }
.light .cmdk-badge { background: rgba(0,0,0,0.03); }
.light .cmdk-badge kbd { background: rgba(0,0,0,0.06); }
.light .toast { background: rgba(255,255,255,0.98); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }

/* ── Field Ops module-tabs — inherits standard pattern from _shared.css ── */

/* ── Zoom-out blank-side fix: let page-shells fill viewport with breathing room ── */
.pg-shell, .ws-body { max-width: min(1800px, calc(100vw - 48px)) !important; }
@media (min-width: 1900px) { .pg-shell, .ws-body { max-width: 1800px !important; } }