/* "Suggest a change" widget (2026-10-29). The SAME file is served by all four dashboards; see suggest.js.
   No raw colors here: every --sg-* token maps onto the host's own theme variables, so light/dark follow the host.
   cc = Command Center (dash.css --pb-* / --t-* tokens), bh = Bids Hub, cd = Call Dashboard (index + rep page), hh = Hiring Hub. */
html[data-sg-host=cc] {
  --sg-bg: var(--pb-bg); --sg-bg2: var(--pb-panel); --sg-line: var(--pb-line); --sg-ink: var(--pb-ink); --sg-muted: var(--pb-muted);
  --sg-accent: var(--pb-accent); --sg-on-accent: var(--pb-on-accent); --sg-shadow: 0 10px 30px var(--pb-shadow);
  --sg-req: var(--t-5fdcff); --sg-al: var(--t-ffb85c); --sg-prog: var(--t-a78bfa); --sg-done: var(--t-35e0a1); --sg-no: var(--t-ff6b8b);
}
html[data-sg-host=bh] {
  --sg-bg: var(--card); --sg-bg2: var(--soft); --sg-line: var(--line); --sg-ink: var(--ink); --sg-muted: var(--muted);
  --sg-accent: var(--navy); --sg-on-accent: var(--card); --sg-shadow: var(--shadow);
  --sg-req: var(--navy); --sg-al: var(--amber); --sg-prog: var(--state); --sg-done: var(--ok); --sg-no: var(--red);
}
html[data-sg-host=cd] {   /* index.html uses --panel/--b4/--sel; rep.html uses --card/--brand/--badge: fall back from one to the other */
  --sg-bg: var(--panel, var(--card)); --sg-bg2: var(--bg); --sg-line: var(--line); --sg-ink: var(--text); --sg-muted: var(--muted);
  --sg-accent: var(--b4, var(--brand)); --sg-on-accent: var(--brand-ink, var(--panel)); --sg-shadow: var(--shadow, 0 6px 24px var(--line));
  --sg-req: var(--b4, var(--brand)); --sg-al: var(--warn, var(--badge)); --sg-prog: var(--sel, var(--brand)); --sg-done: var(--ok); --sg-no: var(--sel2, var(--badge));
}
html[data-sg-host=hh] {
  --sg-bg: var(--panel); --sg-bg2: var(--panel-2); --sg-line: var(--line); --sg-ink: var(--ink); --sg-muted: var(--muted);
  --sg-accent: var(--blue); --sg-on-accent: var(--bg); --sg-shadow: 0 10px 30px var(--bg);
  --sg-req: var(--blue); --sg-al: var(--amber); --sg-prog: var(--violet); --sg-done: var(--green); --sg-no: var(--red);
}

#sg-btn {
  position: fixed; right: 16px; bottom: calc(16px + var(--sg-lift, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 8000;
  padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sg-accent); color: var(--sg-on-accent); box-shadow: var(--sg-shadow);
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}
#sg-btn[hidden], #sg-panel[hidden], #sg-panel [hidden] { display: none !important; }
#sg-btn:focus-visible, #sg-panel button:focus-visible, #sg-panel input:focus-visible, #sg-panel textarea:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 2px; }

#sg-panel {
  position: fixed; right: 16px; bottom: calc(68px + var(--sg-lift, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 8001;
  width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 100px - var(--sg-lift, 0px)); overflow-y: auto; overflow-x: hidden;
  box-sizing: border-box; padding: 14px 16px 16px; border-radius: 12px;
  background: var(--sg-bg); color: var(--sg-ink); border: 1px solid var(--sg-line); box-shadow: var(--sg-shadow);
  font: 400 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left;
}
#sg-panel *, #sg-panel *::before, #sg-panel *::after { box-sizing: border-box; }
#sg-panel .sg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#sg-panel .sg-head b { flex: 1; font-size: 16px; }
#sg-panel .sg-icon { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sg-line); background: var(--sg-bg2); color: var(--sg-ink); cursor: pointer; font: 700 15px/1 system-ui, sans-serif; padding: 0; }
#sg-panel .sg-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
#sg-panel .sg-tabs button { flex: 1; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--sg-line); background: var(--sg-bg2); color: var(--sg-ink); cursor: pointer; font: 600 13px/1.2 system-ui, sans-serif; }
#sg-panel .sg-tabs button.on { background: var(--sg-accent); color: var(--sg-on-accent); border-color: var(--sg-accent); }
#sg-panel label { display: block; margin: 0 0 10px; font-weight: 600; font-size: 13px; color: var(--sg-ink); }
#sg-panel input, #sg-panel textarea {
  display: block; width: 100%; max-width: 100%; margin-top: 4px; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--sg-line); background: var(--sg-bg2); color: var(--sg-ink); font: 400 16px/1.4 system-ui, sans-serif; resize: vertical;
}
#sg-panel .sg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#sg-panel .sg-go { padding: 9px 18px; border: 0; border-radius: 8px; background: var(--sg-accent); color: var(--sg-on-accent); font: 600 14px/1.2 system-ui, sans-serif; cursor: pointer; }
#sg-panel .sg-go:disabled { opacity: .6; cursor: wait; }
#sg-panel .sg-left, #sg-panel .sg-muted, #sg-panel .sg-date { color: var(--sg-muted); font-size: 12.5px; }
#sg-panel .sg-bad { color: var(--sg-no); }
#sg-panel .sg-msg { margin: 8px 0 0; min-height: 1.2em; font-size: 13px; }
#sg-panel .sg-help { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--sg-bg2); border: 1px solid var(--sg-line); font-size: 13px; }
#sg-panel .sg-help p { margin: 6px 0; }
#sg-panel .sg-help ul { margin: 2px 0 6px; padding-left: 18px; }
#sg-panel .sg-sub { font-weight: 600; }
#sg-panel .sg-items { list-style: none; margin: 6px 0 0; padding: 0; }
#sg-panel .sg-items li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--sg-line); }
#sg-panel .sg-line { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#sg-panel .sg-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor; font: 700 12px/1.4 system-ui, sans-serif; white-space: nowrap; }
#sg-panel .sg-requested { color: var(--sg-req); }
#sg-panel .sg-needs_al { color: var(--sg-al); }
#sg-panel .sg-in_progress { color: var(--sg-prog); }
#sg-panel .sg-done { color: var(--sg-done); }
#sg-panel .sg-declined { color: var(--sg-no); }

@media (max-width: 600px) {
  #sg-btn { right: 16px; padding: 9px 14px; font-size: 13px; }
  #sg-panel { left: 16px; right: 16px; width: auto; max-width: none; bottom: calc(64px + var(--sg-lift, 0px) + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 88px - var(--sg-lift, 0px)); }
}
@media print { #sg-btn, #sg-panel { display: none !important; } }