/* Staff console look (owner 2026-11-14 reference): deep navy, glowing panels, icon sidebar. Loaded after admin.css. */
body.sx {
  /* Owner palette 2026-11-14 */
  --sx-bg: #091133;
  --sx-deep: #040921;
  --sx-panel: #101A3D;
  --sx-panel-2: #15214D;
  --sx-edge: rgba(56, 97, 235, .3);
  --sx-edge-hi: rgba(14, 165, 233, .6);
  --sx-blue: #2563EB;
  --sx-neon: #0EA5E9;
  --sx-cyan: #22D3EE;
  --sx-green: #10B981;
  --sx-violet: #7C3AED;
  --sx-amber: #F59E0B;
  --sx-ink: #F8FAFC;
  --sx-dim: #94A3B8;
  --sx-grad: linear-gradient(135deg, #2563EB, #7C3AED);
  --sx-edge-grad: linear-gradient(135deg, rgba(14, 165, 233, .8), rgba(124, 58, 237, .55) 55%, rgba(34, 211, 238, .35));
  --surface: var(--sx-panel);
  --surface-border: var(--sx-edge);
  background:
    radial-gradient(900px 520px at 90% -12%, rgba(37, 99, 235, .22), transparent 60%),
    radial-gradient(700px 480px at -10% 35%, rgba(124, 58, 237, .14), transparent 60%),
    var(--sx-bg);
  background-attachment: fixed;
  color: var(--sx-ink);
}

/* ---------- sidebar ---------- */
.sx .sx-rail { background: linear-gradient(180deg, #0B1540, #040921); border-right: 1px solid var(--sx-edge); box-shadow: none; }
.sx .sx-brand a { display: flex; align-items: center; gap: 10px; color: var(--sx-ink); text-decoration: none; }
.sx .sx-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 22px rgba(37, 99, 235, .55); }
.sx .sx-logo img { width: 46px; height: 46px; object-fit: contain; }
.sx .sx-brand strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.sx .sx-brand small { display: block; font-size: 11.5px; color: var(--sx-dim); }
.sx .sx-me { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; padding: 12px; border-radius: 16px; background: var(--sx-panel-2); border: 1px solid var(--sx-edge); }
.sx .sx-me b { display: block; font-size: 14.5px; }
.sx .sx-me small { display: block; font-size: 12px; color: var(--sx-dim); }
.sx .sx-me em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--sx-green); }
.sx .sx-me em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sx-green); box-shadow: 0 0 0 3px rgba(34, 201, 138, .2); }
.sx .sx-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 800; font-size: 15px; color: #fff;
  background: radial-gradient(circle at 30% 25%, #6FA2FF, #2E5BFF 55%, #5B2BD6); box-shadow: 0 0 0 2px rgba(124, 146, 255, .35); }
.sx .sx-avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.sx .rail-group p { margin: 16px 10px 6px; font-size: 10.5px; letter-spacing: .12em; color: #6F7AA5; }
.sx .rail-group a { min-height: 42px; padding: 8px 12px; border-radius: 12px; color: #C9D1F2; font-weight: 600; text-decoration: none; }
.sx .rail-group a > span { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.sx .sx-i { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.sx .rail-group a:hover { background: rgba(61, 123, 255, .12); color: #fff; }
.sx .rail-group a[aria-current="page"] { color: #fff; background: linear-gradient(90deg, #2563EB, #7C3AED); box-shadow: 0 8px 24px -10px rgba(37, 99, 235, .95), 0 0 0 1px rgba(14, 165, 233, .35) inset; }
.sx .rail-group a[aria-current="page"] .sx-i { opacity: 1; }
.sx .rail-count { background: #2563EB; color: #fff; box-shadow: 0 0 10px rgba(37, 99, 235, .7); }
.sx .rail-group a[aria-current="page"] .rail-count { background: rgba(255, 255, 255, .22); }
.sx .rail-foot { border-top-color: var(--sx-edge); }
.sx .rail-foot .who { font-size: 12px; }

/* ---------- top bar ---------- */
.sx .staff-shell { max-width: 1320px; }
.sx .sx-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sx .sx-search { position: relative; flex: 1; max-width: 560px; margin: 0; }
.sx .sx-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--sx-dim); stroke-width: 2; stroke-linecap: round; }
.sx .sx-search input { width: 100%; height: 46px; padding: 0 16px 0 42px; border-radius: 14px; border: 1px solid var(--sx-edge); background: var(--sx-panel); color: var(--sx-ink); font: inherit; font-size: 14.5px; }
.sx .sx-search input:focus { outline: none; border-color: var(--sx-edge-hi); box-shadow: 0 0 0 3px rgba(61, 123, 255, .2); }
.sx .sx-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sx .sx-tool { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--sx-edge); background: var(--sx-panel); color: var(--sx-ink); cursor: pointer; text-decoration: none; }
.sx .sx-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sx .sx-tool b { position: absolute; top: -5px; right: -5px; min-width: 19px; padding: 0 5px; border-radius: 99px; font-size: 11px; line-height: 19px; text-align: center; background: #FF4D6A; color: #fff; }
.sx .sx-tool[aria-pressed="false"] { color: var(--sx-dim); }
.sx .sx-tool[aria-pressed="false"] .sx-wave { display: none; }
.sx .sx-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 7px; border-radius: 14px; border: 1px solid var(--sx-edge); background: var(--sx-panel); font-size: 14px; font-weight: 700; }
.sx .topbar h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

/* ---------- shared surfaces: solid glass with a crisp gradient hairline (no haze) ---------- */
.sx .a-card, .sx .bk-card, .sx .td-panel { position: relative; isolation: isolate; background: linear-gradient(165deg, #15214D, #101A3D); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 50px -30px rgba(0, 0, 0, .85); }
.sx .a-card::after, .sx .bk-card::after, .sx .td-panel::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--sx-edge-grad); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sx .sx-search input, .sx .sx-tool, .sx .sx-chip, .sx .sx-me { background: #101A3D; }

@media (max-width: 999px) {
  .sx .sx-me { display: none; }
  .sx .sx-chip { display: none; }
}
@media (max-width: 600px) {
  .sx .sx-top { gap: 8px; }
  .sx .sx-search input { height: 42px; font-size: 14px; }
  .sx .sx-tool { width: 42px; height: 42px; }
}

/* ---------- home KPI cards in the same glowing style ---------- */
.sx .td-kpi { --c1: #10B981; --c2: #047857; --glow: rgba(16, 185, 129, .55);
  background: linear-gradient(140deg, color-mix(in srgb, var(--c1) 70%, #091133) 0%, color-mix(in srgb, var(--c2) 55%, #040921) 100%);
  border-color: color-mix(in srgb, var(--c1) 60%, transparent); box-shadow: 0 18px 50px -24px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .1); }
.sx .td-kpi[data-tone="card"] { --c1: #2563EB; --c2: #1E40AF; --glow: rgba(37, 99, 235, .6); }
.sx .td-kpi[data-tone="wait"] { --c1: #F59E0B; --c2: #B45309; --glow: rgba(245, 158, 11, .55); }
.sx .td-kpi[data-tone="people"] { --c1: #7C3AED; --c2: #5B21B6; --glow: rgba(124, 58, 237, .6); }
.sx .td-kpi::after { opacity: .12; background: #fff !important; }
.sx .td-kpi span, .sx .td-kpi small { color: rgba(255, 255, 255, .82); }