/* ContractNearMe — Admin / Ops console design system.
   Ported from the design bundle's tokens.css + components.jsx.
   Tokens are global CSS vars; all component classes are scoped under .cnm-root
   so nothing leaks into other pages. Layout chrome is under .cnm-admin. */

:root {
  --cnm-brand-50:#eff6ff; --cnm-brand-100:#dbeafe; --cnm-brand-200:#bfdbfe; --cnm-brand-300:#93c5fd;
  --cnm-brand-400:#60a5fa; --cnm-brand-500:#3b82f6; --cnm-brand-600:#2563eb; --cnm-brand-700:#1d4ed8;
  --cnm-brand-800:#1e40af; --cnm-brand-900:#1e3a8a; --cnm-brand-950:#172554;
  --cnm-trust-50:#f0fdf4; --cnm-trust-100:#dcfce7; --cnm-trust-200:#bbf7d0; --cnm-trust-500:#22c55e;
  --cnm-trust-600:#16a34a; --cnm-trust-700:#15803d;
  --cnm-emer-50:#fff1f2; --cnm-emer-100:#ffe4e6; --cnm-emer-200:#fecdd3; --cnm-emer-300:#fda4af;
  --cnm-emer-400:#fb7185; --cnm-emer-500:#f43f5e; --cnm-emer-600:#e11d48; --cnm-emer-700:#be123c; --cnm-emer-800:#9f1239;
  --cnm-warn-50:#fffbeb; --cnm-warn-100:#fef3c7; --cnm-warn-200:#fde68a; --cnm-warn-400:#fbbf24;
  --cnm-warn-500:#f59e0b; --cnm-warn-600:#d97706; --cnm-warn-700:#b45309;
  --cnm-star:#f59e0b;
  --cnm-slate-50:#f8fafc; --cnm-slate-100:#f1f5f9; --cnm-slate-200:#e2e8f0; --cnm-slate-300:#cbd5e1;
  --cnm-slate-400:#94a3b8; --cnm-slate-500:#64748b; --cnm-slate-600:#475569; --cnm-slate-700:#334155;
  --cnm-slate-800:#1e293b; --cnm-slate-900:#0f172a;
  --cnm-font-sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cnm-font-mono:'JetBrains Mono','Fira Code','SF Mono',monospace;
  --cnm-shadow-card:0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .06);
  --cnm-shadow-hover:0 4px 12px -2px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .06);
  --cnm-shadow-modal:0 24px 60px -12px rgb(0 0 0 / .20);
}

.cnm-root, .cnm-root *, .cnm-root *::before, .cnm-root *::after { box-sizing: border-box; }
.cnm-root {
  margin: 0; font-family: var(--cnm-font-sans); color: var(--cnm-slate-900); line-height: 1.45;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11','ss01','ss03';
}
.cnm-root a { color: inherit; text-decoration: none; }
.cnm-root button { font: inherit; cursor: pointer; }
.cnm-root input, .cnm-root select, .cnm-root textarea { font: inherit; color: inherit; }
.cnm-mono { font-family: var(--cnm-font-mono); font-variant-numeric: tabular-nums; }

@keyframes cnm-pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.6;transform:scale(.9);} }
@keyframes cnm-fade-in { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }
@keyframes cnm-spin { from{transform:rotate(0);} to{transform:rotate(360deg);} }
.cnm-spin { animation: cnm-spin 1.4s linear infinite; transform-origin: center; }

/* ── Shell ─────────────────────────────────────────────── */
.cnm-admin { display: flex; min-height: 100vh; background: var(--cnm-slate-50); }
.cnm-sidebar { width: 230px; flex-shrink: 0; background: var(--cnm-slate-900); color: #fff; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; }
.cnm-brandmark { padding: 18px 16px; display: flex; align-items: center; gap: 9px; }
.cnm-brandmark .sq { width: 30px; height: 30px; border-radius: 8px; background: var(--cnm-warn-500); display: flex; align-items: center; justify-content: center; color: var(--cnm-slate-900); flex-shrink: 0; }
.cnm-brandmark .nm { font-weight: 700; font-size: 14px; line-height: 1.1; }
.cnm-brandmark .sub { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--cnm-warn-400); text-transform: uppercase; }
.cnm-nav { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.cnm-nav a, .cnm-nav span.navitem { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.7); }
.cnm-nav a:hover { background: rgba(255,255,255,.06); }
.cnm-nav a.active { color: var(--cnm-warn-400); background: rgba(255,255,255,.08); }
.cnm-nav .ico { color: rgba(255,255,255,.45); display: flex; }
.cnm-nav a.active .ico { color: var(--cnm-warn-400); }
.cnm-nav .lbl { flex: 1; }
.cnm-nav span.navitem { color: rgba(255,255,255,.32); cursor: default; }
.cnm-nav .qbadge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cnm-emer-500); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cnm-nav .soon { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.18); border-radius: 5px; padding: 1px 4px; }
.cnm-sidefoot { padding: 12px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; }
.cnm-sidefoot .who { flex: 1; min-width: 0; font-size: 12px; color: rgba(255,255,255,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnm-sidefoot form { margin-left: auto; }
.cnm-logout { flex-shrink: 0; background: transparent; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); border-radius: 7px; padding: 6px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cnm-logout:hover { background: rgba(255,255,255,.08); }
.cnm-main { flex: 1; min-width: 0; }

.cnm-topbar { padding: 18px 28px; border-bottom: 1px solid var(--cnm-slate-200); background: #fff; display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; row-gap: 12px; }
.cnm-topbar > div:first-of-type { margin-right: auto; }
.cnm-topbar .row { flex-shrink: 0; }
.cnm-topbar h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.cnm-topbar .sub { font-size: 13px; color: var(--cnm-slate-500); margin-top: 2px; }
.cnm-page { padding: 28px; }

/* ── Card ──────────────────────────────────────────────── */
.cnm-card { background: #fff; border: 1px solid var(--cnm-slate-200); border-radius: 12px; box-shadow: var(--cnm-shadow-card); padding: 24px; position: relative; }
.cnm-card.p0 { padding: 0; }
.cnm-card.p18 { padding: 18px; }
.cnm-card.p20 { padding: 20px; }
.cnm-card.p22 { padding: 22px; }

/* ── Caption banner (admin/amber tone) ─────────────────── */
.cnm-caption { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; margin-bottom: 18px; background: var(--cnm-warn-50); border: 1px solid var(--cnm-warn-200); border-radius: 11px; animation: cnm-fade-in 240ms ease-out; }
.cnm-caption .ic { width: 26px; height: 26px; border-radius: 7px; background: #fff; border: 1px solid var(--cnm-warn-200); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--cnm-warn-600); }
.cnm-caption .tx { font-size: 13px; line-height: 1.5; color: var(--cnm-slate-700); }
.cnm-caption .tx strong { font-weight: 700; color: var(--cnm-warn-700); }

/* ── Badge ─────────────────────────────────────────────── */
.cnm-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; background: var(--cnm-slate-100); color: var(--cnm-slate-700); }
.cnm-badge.sm { height: 20px; padding: 0 6px; font-size: 11px; gap: 4px; }
.cnm-badge.brand { background: var(--cnm-brand-100); color: var(--cnm-brand-700); }
.cnm-badge.trust { background: var(--cnm-trust-100); color: var(--cnm-trust-700); }
.cnm-badge.warn { background: var(--cnm-warn-100); color: var(--cnm-warn-700); }
.cnm-badge.emergency { background: var(--cnm-emer-100); color: var(--cnm-emer-700); }
.cnm-badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cnm-badge .bdot.pulse { animation: cnm-pulse-dot 1.4s ease-in-out infinite; }

/* ── Button ────────────────────────────────────────────── */
.cnm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 600; background: var(--cnm-brand-600); color: #fff; transition: background-color 150ms ease; white-space: nowrap; }
.cnm-btn:hover { background: var(--cnm-brand-700); }
.cnm-btn.sm { height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.cnm-btn.secondary { background: #fff; color: var(--cnm-brand-700); border-color: var(--cnm-slate-300); }
.cnm-btn.secondary:hover { background: var(--cnm-brand-50); }
.cnm-btn.ghost { background: transparent; color: var(--cnm-slate-700); }
.cnm-btn.ghost:hover { background: var(--cnm-slate-100); }
.cnm-btn.success { background: var(--cnm-trust-600); }
.cnm-btn.success:hover { background: var(--cnm-trust-700); }
.cnm-btn.danger { background: var(--cnm-emer-600); }
.cnm-btn.danger:hover { background: var(--cnm-emer-700); }
.cnm-btn.dark { background: var(--cnm-slate-900); }
.cnm-btn.dark:hover { background: var(--cnm-slate-800); }
.cnm-btn:disabled { background: var(--cnm-slate-100); color: var(--cnm-slate-400); cursor: not-allowed; }
/* Anchor-buttons must keep their button text color — `.cnm-root a { color: inherit }` otherwise wins by specificity and renders dark text on the blue fill (illegible). */
.cnm-root a.cnm-btn { color: #fff; }
.cnm-root a.cnm-btn.secondary { color: var(--cnm-brand-700); }
.cnm-root a.cnm-btn.ghost { color: var(--cnm-slate-700); }

/* ── Avatar (deterministic palette c0..c6) ─────────────── */
.cnm-avatar { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex-shrink: 0; background: var(--cnm-brand-100); color: var(--cnm-brand-700); }
.cnm-avatar.s30 { width: 30px; height: 30px; font-size: 11px; }
.cnm-avatar.c0 { background: var(--cnm-brand-100); color: var(--cnm-brand-700); }
.cnm-avatar.c1 { background: var(--cnm-trust-100); color: var(--cnm-trust-700); }
.cnm-avatar.c2 { background: var(--cnm-warn-100); color: var(--cnm-warn-700); }
.cnm-avatar.c3 { background: #ede9fe; color: #6d28d9; }
.cnm-avatar.c4 { background: #fce7f3; color: #be185d; }
.cnm-avatar.c5 { background: #cffafe; color: #0e7490; }
.cnm-avatar.c6 { background: #fed7aa; color: #9a3412; }

/* ── KPI cards ─────────────────────────────────────────── */
.cnm-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cnm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cnm-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 900px) { .cnm-grid4, .cnm-grid5 { grid-template-columns: repeat(2, 1fr); } .cnm-grid2 { grid-template-columns: 1fr; } }
.cnm-kpi .l { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cnm-slate-500); }
.cnm-kpi .v { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0; }
.cnm-kpi .v.sm { font-size: 26px; }
.cnm-kpi .d { font-size: 12px; font-weight: 600; color: var(--cnm-trust-700); }
.cnm-kpi .d.brand { color: var(--cnm-brand-700); }
.cnm-kpi .d.emer { color: var(--cnm-emer-700); }
.cnm-kpi .d.warn { color: var(--cnm-warn-700); }
.cnm-kpi .d.muted { color: var(--cnm-slate-400); }

/* progress bar (posture matrix) */
.cnm-bar { height: 8px; border-radius: 4px; background: var(--cnm-slate-100); overflow: hidden; }
.cnm-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--cnm-trust-500); }
.cnm-bar > span.warn { background: var(--cnm-warn-500); }
/* audit feed */
.cnm-auditrow { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid var(--cnm-slate-100); }
.cnm-auditrow:first-child { border-top: 0; }
.cnm-auditrow .ibox { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--cnm-brand-50); }
.cnm-auditrow .ibox.sys { background: var(--cnm-slate-100); }
.cnm-auditrow .act { font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.cnm-auditrow .meta { font-size: 11px; color: var(--cnm-slate-500); margin-top: 1px; }

/* ── Feed rows ─────────────────────────────────────────── */
.cnm-feedrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--cnm-slate-100); font-size: 13px; }
.cnm-feedrow:first-child { border-top: 0; }
.cnm-feedrow .grow { flex: 1; }
.cnm-feedrow .age { font-size: 11px; color: var(--cnm-slate-500); }
.cnm-sevdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cnm-link { font-size: 12.5px; font-weight: 600; color: var(--cnm-brand-600); cursor: pointer; }

/* ── Status strip (merchant apps) ──────────────────────── */
.cnm-strip { display: flex; gap: 16px; padding: 10px 14px; background: var(--cnm-slate-50); border-radius: 9px; font-size: 12.5px; }
.cnm-ok { color: var(--cnm-trust-700); font-weight: 700; }
.cnm-pend { color: var(--cnm-warn-700); font-weight: 700; }
.cnm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cnm-rowtop { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cnm-rowtop .grow { flex: 1; }

/* ── Table ─────────────────────────────────────────────── */
.cnm-table { width: 100%; border-collapse: collapse; }
.cnm-table th { text-align: left; padding: 10px 16px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cnm-slate-500); border-bottom: 1px solid var(--cnm-slate-200); white-space: nowrap; }
.cnm-table td { padding: 14px 16px; font-size: 13.5px; border-bottom: 1px solid var(--cnm-slate-100); color: var(--cnm-slate-800); }
.cnm-table td.num, .cnm-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Toast ─────────────────────────────────────────────── */
.cnm-toast { position: fixed; bottom: 24px; right: 24px; z-index: 200; padding: 14px 18px; background: #fff; border: 1px solid var(--cnm-slate-200); border-left: 4px solid var(--cnm-brand-500); border-radius: 10px; box-shadow: 0 12px 28px -8px rgb(15 23 42 / .2); animation: cnm-fade-in 220ms ease-out; display: flex; align-items: center; gap: 10px; max-width: 400px; font-size: 14px; font-weight: 500; }
.cnm-toast.success { border-left-color: var(--cnm-trust-500); }
.cnm-toast.error { border-left-color: var(--cnm-emer-500); }

/* ── Directory controls ────────────────────────────────── */
.cnm-segs { display: inline-flex; padding: 4px; background: var(--cnm-slate-100); border-radius: 10px; flex-wrap: wrap; gap: 2px; }
.cnm-segs a { padding: 7px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--cnm-slate-500); white-space: nowrap; }
.cnm-segs a:hover { text-decoration: none; }
.cnm-segs a.active { background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .1); color: var(--cnm-slate-900); }
.cnm-segs a .ct { color: var(--cnm-slate-400); font-weight: 700; }
.cnm-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; background: #fff; border: 1px solid var(--cnm-slate-300); border-radius: 9px; min-width: 220px; }
.cnm-search input { flex: 1; border: 0; outline: none; font-size: 13px; background: transparent; }
.cnm-root .cnm-select { height: 38px; padding: 0 12px; border: 1px solid var(--cnm-slate-300); border-radius: 9px; font-size: 13px; font-family: inherit; background: #fff; color: var(--cnm-slate-700); font-weight: 600; }
.cnm-table tr.clickrow { cursor: pointer; }
.cnm-table tr.clickrow:hover { background: var(--cnm-slate-50); }
.cnm-bulkbar { display: none; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cnm-slate-900); border-radius: 10px; margin-bottom: 12px; color: #fff; }
.cnm-bulkbar .btn-w { display: inline-flex; align-items: center; gap: 6px; background: var(--cnm-warn-500); color: var(--cnm-slate-900); border: 0; border-radius: 8px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cnm-bulkbar .btn-g { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: #fff; border: 0; height: 32px; padding: 0 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cnm-conc { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cnm-brand-50); border: 1px solid var(--cnm-brand-200); border-radius: 10px; margin-bottom: 16px; font-size: 12.5px; color: var(--cnm-brand-800); flex-wrap: wrap; }
.cnm-conc .track { flex: 1; height: 8px; border-radius: 4px; background: #fff; overflow: hidden; max-width: 220px; }
.cnm-conc .track > span { display: block; height: 100%; background: var(--cnm-brand-500); }

/* ── 360 drawer ────────────────────────────────────────── */
.m360-host { display: none; position: fixed; inset: 0; z-index: 300; }
.m360-overlay { position: absolute; inset: 0; background: rgba(15,23,42,.5); animation: cnm-fade-in 160ms ease-out; }
/* No entrance animation on the panel itself: it's injected into a display:none host,
   so a keyframe animation can fail to start/complete and leave the panel stuck at its
   "from" frame — which previously rendered it 40px off-screen (the hidden-drawer bug).
   The panel's base styles are fully correct, so it always renders in place; the backdrop
   below keeps a soft fade for the entrance feel. */
.m360-panel { position: absolute; right: 0; top: 0; width: 80%; max-width: 1180px; height: 100%; background: var(--cnm-slate-50); box-shadow: var(--cnm-shadow-modal); display: flex; flex-direction: column; }
/* The inner tab-content panels reuse .m360-panel but must NOT inherit the outer
   drawer's absolute geometry (right:0 / 80% / 100%) — that pinned each tab pane to the
   top-right of the drawer, over the header (the "broken sidebar"). They carry data-tab;
   the outer drawer does not, so reset only the inner ones to flow inside .m360-body.
   Repairs the contractor, consumer, and merchant drawers alike. */
.m360-panel[data-tab] { position: static; right: auto; top: auto; width: auto; max-width: none; height: auto; background: transparent; box-shadow: none; }
@media (max-width: 760px) { .m360-panel:not([data-tab]) { width: 100%; } }
.m360-head { background: var(--cnm-slate-900); color: #fff; padding: 18px 24px; flex-shrink: 0; }
.m360-iconbtn { width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.m360-iconbtn.plain { border: 0; background: rgba(255,255,255,.1); }
.m360-tabs { display: flex; gap: 2px; margin-top: 16px; overflow-x: auto; }
.m360-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 8px; border: 0; cursor: pointer; white-space: nowrap; background: transparent; color: rgba(255,255,255,.6); font-size: 12.5px; font-weight: 600; }
.m360-tab.active { background: rgba(255,255,255,.14); color: #fff; }
.m360-body { flex: 1; overflow-y: auto; padding: 24px; }
.m360-stat { background: #fff; border: 1px solid var(--cnm-slate-200); border-radius: 12px; padding: 16px; }
.m360-stat .l { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cnm-slate-500); }
.m360-stat .v { font-size: 22px; font-weight: 800; font-family: var(--cnm-font-mono); letter-spacing: -.02em; }
.m360-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--cnm-slate-100); }
.m360-row .k { font-size: 12.5px; color: var(--cnm-slate-500); }
.m360-row .vv { font-size: 13px; font-weight: 600; text-align: right; }
.cmp-checkrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--cnm-slate-200); border-radius: 10px; }

.cnm-empty { text-align: center; color: var(--cnm-slate-500); font-size: 14px; }
.cnm-muted { color: var(--cnm-slate-500); }
.cnm-err { color: var(--cnm-emer-600); font-size: 12px; margin-top: 4px; }

/* ── Contractors page additions ────────────────────────── */
.cnm-root .row { display: flex; align-items: center; }
.cnm-root .row-wrap { flex-wrap: wrap; }
.cnm-root .spacer { flex: 1; }
.cnm-badge.inverted { background: var(--cnm-slate-900); color: #fff; }
.cnm-badge.elite { background: var(--cnm-warn-500); color: #fff; }
.cnm-avatar.ring-brand { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cnm-brand-400); }
.cnm-avatar.ring-elite { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cnm-warn-400); }
.cnm-btn.block { width: 100%; }

/* permission toggle switch (POST per toggle) */
.cnm-switch { width: 42px; height: 24px; border-radius: 999px; border: 0; background: var(--cnm-slate-300); position: relative; padding: 0; flex-shrink: 0; transition: background 160ms; }
.cnm-switch.on { background: var(--cnm-trust-500); }
.cnm-switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left 160ms; }
.cnm-switch.on .knob { left: 20px; }
.cnm-switch:disabled { opacity: .5; cursor: not-allowed; }
.cnm-step { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--cnm-slate-300); background: #fff; font-size: 15px; font-weight: 700; color: var(--cnm-slate-600); display: inline-flex; align-items: center; justify-content: center; }

/* underwriting queue cards + review workspace */
.uw-card { background: #fff; border: 1px solid var(--cnm-slate-200); border-radius: 12px; padding: 16px; cursor: pointer; display: flex; align-items: center; gap: 16px; transition: box-shadow 160ms, transform 160ms; }
.uw-card:hover { box-shadow: var(--cnm-shadow-hover); transform: translateY(-1px); }
.uw-card.hot { border-color: var(--cnm-emer-200); border-left: 4px solid var(--cnm-emer-500); }
.uw-host { display: none; position: fixed; inset: 0; z-index: 320; }
.uw-ws { position: fixed; inset: 0; z-index: 320; background: var(--cnm-slate-100); display: flex; flex-direction: column; animation: cnm-fade-in 160ms ease-out; }
.uw-ws-top { flex-shrink: 0; background: var(--cnm-slate-900); color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 14px; }
.uw-ws-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px 1fr 360px; }
.uw-col-l { border-right: 1px solid var(--cnm-slate-200); background: #fff; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.uw-col-c { overflow-y: auto; padding: 20px; }
.uw-col-r { border-left: 1px solid var(--cnm-slate-200); background: #fff; display: flex; flex-direction: column; min-height: 0; }
.uw-check-item { padding: 10px 11px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.uw-check-item:hover { background: var(--cnm-slate-100); }
.uw-check-item.sel { border-color: var(--cnm-slate-300); background: #fff; }
.uw-check-item .uw-actions { display: none; gap: 6px; margin-top: 8px; margin-left: 35px; }
.uw-check-item.sel .uw-actions { display: flex; }
.uw-reason input { display: none; }
.uw-reason span { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--cnm-slate-300); background: #fff; color: var(--cnm-slate-600); }
.uw-reason input:checked + span { border-color: var(--cnm-emer-300); background: var(--cnm-emer-50); color: var(--cnm-emer-700); }
@media (max-width: 1100px) { .uw-ws-body { grid-template-columns: 1fr; overflow-y: auto; } }

/* leaderboard podium */
.cnm-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.cnm-podium .seat { cursor: pointer; background: #fff; border: 1px solid var(--cnm-slate-200); border-radius: 16px; padding: 18px; display: flex; align-items: center; gap: 14px; }
.cnm-podium .seat.gold { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: var(--cnm-warn-200); }
.cnm-podium .medal { position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; border: 2px solid #fff; }
@media (max-width: 760px) { .cnm-podium { grid-template-columns: 1fr; } }

/* ── Admin 360-drawer Support Chat (team ↔ contractor) ──────────────────── */
.adm-chat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cnm-slate-200); border-radius: 12px; overflow: hidden; max-width: 760px; }
.adm-chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--cnm-slate-200); font-size: 13px; font-weight: 700; }
.adm-chat-head-s { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--cnm-slate-500); }
.adm-chat-thread { padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--cnm-slate-50); min-height: 240px; max-height: 48vh; overflow-y: auto; }
.adm-chat-row { display: flex; }
.adm-chat-row.me { justify-content: flex-end; }
.adm-chat-bubble { max-width: 78%; background: #fff; border: 1px solid var(--cnm-slate-200); border-radius: 14px; border-top-left-radius: 4px; padding: 10px 13px; }
.adm-chat-row.me .adm-chat-bubble { background: var(--cnm-brand-600); border-color: var(--cnm-brand-600); color: #fff; border-radius: 14px; border-top-right-radius: 4px; }
.adm-chat-meta { font-size: 11px; font-weight: 600; color: var(--cnm-slate-400); margin-bottom: 3px; }
.adm-chat-row.me .adm-chat-meta { color: rgb(255 255 255 / .78); }
.adm-chat-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.adm-chat-empty { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; color: var(--cnm-slate-500); font-size: 13px; line-height: 1.5; padding: 36px 28px; margin: auto; max-width: 420px; }
.adm-chat-compose { display: flex; gap: 9px; padding: 13px 15px; border-top: 1px solid var(--cnm-slate-200); background: #fff; }
.adm-chat-compose input { flex: 1; height: 40px; padding: 0 13px; border: 1px solid var(--cnm-slate-300); border-radius: 10px; font-size: 13.5px; font-family: inherit; outline: none; }
.adm-chat-compose input:focus { border-color: var(--cnm-brand-500); box-shadow: 0 0 0 3px var(--cnm-brand-100); }

/* ── Admin support-ticket desk (master/detail) ─────────────────────────── */
.atk-page .atk-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.atk-page .atk-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--cnm-slate-200); background: #fff; font-size: 13px; font-weight: 600; color: var(--cnm-slate-600); }
.atk-page .atk-pill:hover { border-color: var(--cnm-slate-300); }
.atk-page .atk-pill.is-active { background: var(--cnm-slate-900); border-color: var(--cnm-slate-900); color: #fff; }
.atk-page .atk-pill-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 800; background: var(--cnm-slate-100); color: var(--cnm-slate-600); }
.atk-page .atk-pill.is-active .atk-pill-n { background: rgba(255,255,255,.18); color: #fff; }
.atk-page .atk-pill-n.warn { background: var(--cnm-warn-100); color: var(--cnm-warn-700); }
.atk-page .atk-pill-n.brand { background: var(--cnm-brand-100); color: var(--cnm-brand-700); }
.atk-page .atk-pill-n.trust { background: var(--cnm-trust-100); color: var(--cnm-trust-700); }
.atk-page .atk-pill.is-active .atk-pill-n.warn,
.atk-page .atk-pill.is-active .atk-pill-n.brand,
.atk-page .atk-pill.is-active .atk-pill-n.trust { background: rgba(255,255,255,.18); color: #fff; }

.atk-page .atk-inbox { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.atk-page .atk-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px); overflow-y: auto; }
.atk-page .atk-item { display: block; background: #fff; border: 1px solid var(--cnm-slate-200); border-radius: 11px; padding: 12px 14px; }
.atk-page .atk-item:hover { border-color: var(--cnm-brand-300); }
.atk-page .atk-item.is-active { border-color: var(--cnm-brand-500); box-shadow: 0 0 0 3px var(--cnm-brand-100); }
.atk-page .atk-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.atk-page .atk-item-subj { font-size: 14px; font-weight: 600; color: var(--cnm-slate-900); margin-bottom: 3px; }
.atk-page .atk-item-meta { font-size: 12px; color: var(--cnm-slate-500); }
.atk-page .atk-list-empty { font-size: 13px; color: var(--cnm-slate-500); padding: 24px; text-align: center; }

.atk-page .atk-thread { background: #fff; border: 1px solid var(--cnm-slate-200); border-radius: 12px; box-shadow: var(--cnm-shadow-card); padding: 20px 22px; display: flex; flex-direction: column; min-height: 360px; }
.atk-page .atk-thread-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--cnm-slate-100); margin-bottom: 16px; }
.atk-page .atk-thread-subj { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.atk-page .atk-thread-meta { font-size: 12.5px; color: var(--cnm-slate-500); margin-top: 3px; }
.atk-page .atk-msgs { display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; max-height: 48vh; padding-right: 4px; }
.atk-page .atk-row { display: flex; flex-direction: column; align-items: flex-start; }
.atk-page .atk-row.me { align-items: flex-end; }
.atk-page .atk-meta { font-size: 11px; color: var(--cnm-slate-500); margin-bottom: 4px; }
.atk-page .atk-bubble { max-width: 80%; padding: 10px 13px; border-radius: 12px; border-top-left-radius: 3px; background: var(--cnm-slate-100); color: var(--cnm-slate-800); font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.atk-page .atk-bubble.me { background: var(--cnm-brand-600); color: #fff; border-radius: 12px; border-top-right-radius: 3px; }
.atk-page .atk-reply { padding: 14px; margin-top: 16px; }
.atk-page .atk-reply textarea { width: 100%; border: 1px solid var(--cnm-slate-300); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; font-family: inherit; resize: vertical; outline: none; min-height: 70px; }
.atk-page .atk-reply textarea:focus { border-color: var(--cnm-brand-500); box-shadow: 0 0 0 3px var(--cnm-brand-100); }
.atk-page .atk-reply-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.atk-page .atk-status-set { flex: 1; }

@media (max-width: 900px) { .atk-page .atk-inbox { grid-template-columns: 1fr; } .atk-page .atk-list { max-height: none; } }

/* ── Unified Merchants & Contractors directory ─────────────────────────── */
.acc-type { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.acc-type.contractor { background: var(--cnm-brand-100); color: var(--cnm-brand-700); }
.acc-type.merchant { background: var(--cnm-warn-100); color: var(--cnm-warn-700); }

/* ── Drawer: Messages tab fills the remaining body height ───────────────── */
.m360-body.messages-fill { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.m360-body.messages-fill .m360-panel[data-tab="messages"] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.m360-body.messages-fill .adm-chat { flex: 1; min-height: 0; max-width: none; border: 0; border-radius: 0; }
.m360-body.messages-fill .adm-chat-thread { flex: 1; max-height: none; }

/* ── Credential verification control ───────────────────────────────────── */
.cred-verify-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; border-top: 1px solid var(--cnm-slate-100); padding-top: 11px; }
.cred-verify-lbl { font-size: 11.5px; font-weight: 600; color: var(--cnm-slate-500); }
.cred-verify { display: flex; gap: 7px; align-items: center; margin-left: auto; }
.cred-verify-sel { height: 30px; }

/* ── Processing tab (gateway link) ─────────────────────────────────────── */
.proc-banner { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; border: 1px solid; }
.proc-banner.on { background: var(--cnm-trust-50); border-color: var(--cnm-trust-200); }
.proc-banner.off { background: var(--cnm-warn-50); border-color: var(--cnm-warn-200); }
.proc-banner-ic { width: 38px; height: 38px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(0,0,0,.05); }
.proc-input { height: 38px; padding: 0 13px; border: 1px solid var(--cnm-slate-300); border-radius: 9px; font-size: 13.5px; font-family: inherit; outline: none; flex: 1; }
.proc-input:focus { border-color: var(--cnm-brand-500); box-shadow: 0 0 0 3px var(--cnm-brand-100); }

/* ── Drawer confirmation modal ─────────────────────────────────────────── */
.adc-confirm { position: fixed; inset: 0; z-index: 340; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; padding: 20px; animation: cnm-fade-in 140ms ease-out; }
.adc-confirm-card { background: #fff; border-radius: 14px; box-shadow: var(--cnm-shadow-modal); width: 100%; max-width: 420px; padding: 22px; }
.adc-confirm-t { font-size: 16px; font-weight: 700; }
.adc-confirm-b { font-size: 13.5px; color: var(--cnm-slate-600); line-height: 1.55; margin: 8px 0 18px; }
.adc-confirm-x { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Import-contractors modal ───────────────────────────────────────────── */
.imp-modal { position: fixed; inset: 0; z-index: 340; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; padding: 20px; animation: cnm-fade-in 140ms ease-out; }
.imp-card { background: #fff; border-radius: 16px; box-shadow: var(--cnm-shadow-modal); width: 100%; max-width: 540px; }
.imp-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--cnm-slate-100); font-size: 16px; font-weight: 700; }
.imp-x { width: 30px; height: 30px; border-radius: 8px; border: 0; background: var(--cnm-slate-100); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.imp-x:hover { background: var(--cnm-slate-200); }
.imp-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 18px; }
.imp-step { display: flex; gap: 13px; align-items: flex-start; }
.imp-step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--cnm-brand-600); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.imp-step-t { font-size: 14px; font-weight: 700; }
.imp-step-d { font-size: 12.5px; color: var(--cnm-slate-600); line-height: 1.55; margin-top: 2px; }
.imp-file { display: block; width: 100%; font-size: 13px; padding: 9px; border: 1px dashed var(--cnm-slate-300); border-radius: 10px; background: var(--cnm-slate-50); cursor: pointer; }
.imp-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 12px; }
.imp-err { margin-top: 8px; font-size: 12.5px; color: var(--cnm-emer-600); font-weight: 600; }

/* ── Admin shared layer (admin.js): search, drawer, modal, filters, responsive ── */
/* topbar global search */
.cnm-topbar .adm-omni { position: relative; width: 320px; max-width: 38vw; }
.adm-omni { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; background: var(--cnm-slate-50); border: 1px solid var(--cnm-slate-200); border-radius: 10px; color: var(--cnm-slate-400); }
.adm-omni.is-open { border-color: var(--cnm-warn-400); box-shadow: 0 0 0 3px var(--cnm-warn-50); background: #fff; }
.adm-omni .adm-omni-ic { display: flex; }
.adm-omni input { flex: 1; border: 0; outline: none; background: transparent; font-size: 13px; color: var(--cnm-slate-800); font-family: inherit; min-width: 0; }
.adm-omni-pop { display: none; position: absolute; top: 46px; left: 0; right: 0; background: #fff; border: 1px solid var(--cnm-slate-200); border-radius: 12px; box-shadow: 0 20px 40px -12px rgb(15 23 42 / .35); overflow: hidden; max-height: 360px; overflow-y: auto; z-index: 60; }
.adm-omni.is-open .adm-omni-pop { display: block; }
.adm-omni-g { padding: 8px 12px 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cnm-slate-400); }
.adm-omni-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-decoration: none; }
.adm-omni-row:hover, .adm-omni-row.is-active { background: var(--cnm-warn-50); }
.adm-omni-t { font-size: 13.5px; font-weight: 600; color: var(--cnm-slate-900); }
.adm-omni-d { font-size: 12px; color: var(--cnm-slate-500); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.adm-omni-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--cnm-slate-500); }

/* detail drawer */
.adm-drawer-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 210; opacity: 0; transition: opacity .22s; pointer-events: none; }
.adm-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.adm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 94vw; background: #fff; z-index: 211; transform: translateX(100%); transition: transform .26s ease; display: flex; flex-direction: column; box-shadow: -12px 0 40px -12px rgb(15 23 42 / .4); }
.adm-drawer.is-open { transform: translateX(0); }
.adm-drawer-hd { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--cnm-slate-200); }
.adm-drawer-hd .adm-drawer-x { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--cnm-slate-400); padding: 4px; }
.adm-drawer-hd .adm-drawer-x:hover { color: var(--cnm-slate-700); }
.adm-drawer-bd { flex: 1; overflow-y: auto; padding: 20px; }
.adm-drawer-ft { padding: 14px 20px; border-top: 1px solid var(--cnm-slate-200); display: flex; gap: 8px; }
.adm-drawer .sec-h { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--cnm-slate-500); margin: 18px 0 9px; }
.adm-drawer .sec-h:first-child { margin-top: 0; }
.adm-drawer .kv { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--cnm-slate-100); font-size: 13px; }
.adm-drawer .kv:last-child { border-bottom: 0; }
.adm-drawer .kv .k { color: var(--cnm-slate-500); width: 110px; flex-shrink: 0; }
.adm-drawer .kv .v { font-weight: 600; }
.adm-drawer .kpi3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.adm-drawer .kpi3 .c { background: var(--cnm-slate-50); border: 1px solid var(--cnm-slate-200); border-radius: 11px; padding: 12px; }
.adm-drawer .kpi3 .cv { font-size: 16px; font-weight: 800; font-family: var(--cnm-font-mono); }
.adm-drawer .kpi3 .cl { font-size: 10.5px; color: var(--cnm-slate-500); margin-top: 2px; }

/* generic modal (reused by per-page builds) */
.adm-modal { position: fixed; inset: 0; z-index: 220; display: none; align-items: flex-start; justify-content: center; background: rgba(15,23,42,.5); padding: 8vh 16px 16px; }
.adm-modal.is-open { display: flex; }
.adm-modal-card { background: #fff; width: 100%; max-width: 520px; border-radius: 16px; box-shadow: 0 24px 60px -12px rgb(15 23 42 / .45); overflow: hidden; display: flex; flex-direction: column; max-height: 84vh; }
.adm-modal-hd { display: flex; align-items: center; gap: 10px; padding: 17px 20px; border-bottom: 1px solid var(--cnm-slate-200); }
.adm-modal-hd h2 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.adm-modal-bd { padding: 18px 20px; overflow-y: auto; }
.adm-modal-ft { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--cnm-slate-200); background: var(--cnm-slate-50); }

/* filters row + light table tabs (reused by per-page builds) */
.adm-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-tabs { display: inline-flex; gap: 2px; background: var(--cnm-slate-100); border-radius: 9px; padding: 3px; }
.adm-tabs button { border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--cnm-slate-600); padding: 6px 12px; border-radius: 7px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.adm-tabs button.on { background: #fff; color: var(--cnm-slate-900); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.adm-tableempty td { padding: 40px 24px !important; text-align: center; color: var(--cnm-slate-500); font-size: 13px; }
.cnm-table th.sortable { cursor: pointer; user-select: none; }
.cnm-table th.sortable:hover { color: var(--cnm-slate-700); }
.cnm-table th.sortable .caret { opacity: .4; font-size: 9px; }
.cnm-table th.sortable.sort-asc .caret, .cnm-table th.sortable.sort-desc .caret { opacity: 1; color: var(--cnm-brand-600); }

/* responsive shell */
.adm-hamb { display: none; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--cnm-slate-200); background: #fff; color: var(--cnm-slate-700); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 4px; }
.adm-nav-scrim { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 44; }
.adm-nav-scrim.show { display: block; }
@media (max-width: 960px) {
  .cnm-sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 45; transform: translateX(-100%); transition: transform .22s ease; }
  .cnm-sidebar.is-open { transform: translateX(0); }
  .adm-hamb { display: flex; }
  .cnm-topbar { padding: 14px 16px; }
  .cnm-topbar h1 { font-size: 18px; }
  .cnm-topbar .adm-omni { width: 190px; }
  .cnm-page { padding: 18px 16px; }
  .cnm-page .cnm-table { min-width: 720px; }
  .cnm-card.p0 { overflow-x: auto; }
}
@media (max-width: 560px) {
  .cnm-topbar .adm-omni { display: none; }
  .cnm-grid4, .cnm-grid5 { grid-template-columns: 1fr 1fr !important; }
}