/* ============================================================
   UATAG Design System — portable stylesheet (v1.0)
   Drop-in for another project: tokens + core components.
   No dependencies. Fonts: Inter + JetBrains Mono (Google Fonts).
   Theme: <html data-theme="dark|light">. Surfaces that float over
   imagery/maps get class "glass".
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --font-sans: "Inter", -apple-system, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --text-display: 600 30px/1.15 var(--font-sans);
  --text-h1: 600 20px/1.25 var(--font-sans);
  --text-h2: 600 15px/1.35 var(--font-sans);
  --text-section: 600 14px/1.3 var(--font-sans);
  --text-tab: 500 15px/1.2 var(--font-sans);
  --text-body: 400 14px/1.55 var(--font-sans);
  --text-row: 400 13.5px/1.3 var(--font-sans);
  --text-label: 500 13px/1.4 var(--font-sans);
  --text-caption: 400 12px/1.45 var(--font-sans);
  --text-micro: 400 11px/1.3 var(--font-sans);
  --text-metric: 600 20px/1.1 var(--font-sans);
  --text-metric-lg: 600 32px/1.1 var(--font-sans);
  --text-code: 500 13px/1.3 var(--font-mono);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --r-1: 4px; --r-2: 7px; --r-3: 12px; --r-pill: 999px;
  --control-h: 36px; --control-h-sm: 30px; --map-control: 34px; --icon: 16px; --icon-stroke: 1.6;
  --header-h: 56px; --side-panel-w: 440px; --sheet-w: 520px; --popover-w: 400px;

  --shadow-menu: 0 6px 20px rgba(24,24,27,.10), 0 0 0 1px rgba(24,24,27,.05);
  --shadow-float: 0 8px 28px rgba(24,24,27,.14), 0 0 0 1px rgba(24,24,27,.05);
  --shadow-dialog: 0 20px 56px rgba(24,24,27,.22);
  --shadow-glass: 0 12px 40px rgba(0,0,0,.45);
  --blur-glass: 18px;

  /* light theme */
  --bg: #f4f4f5; --bg-subtle: #efeff1; --bg-muted: #e6e6e9;
  --surface: #ffffff; --surface-raised: #ffffff;
  --border: #e4e4e7; --border-strong: #d0d0d5;
  --text: #18181b; --text-2: #5b5b63; --text-3: #8c8c94; --text-inverse: #ffffff;
  --ink: #18181b; --ink-hover: #2f2f36;
  --accent: #3b82f6; --accent-hover: #2563eb; --accent-soft: rgba(59,130,246,.14); --accent-text: #2563eb;
  --success: #1f8a4c; --success-soft: #e4f3ea;
  --warning: #b36a00; --warning-soft: #fbefd9;
  --danger:  #c9352c; --danger-soft:  #fbe6e4;
  --info:    #52525b; --info-soft:    #ececef;
  --chart-grid: #e6e6e9;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* data colours — same everywhere (charts, map, legend, feed, badges) */
  --c-stickers: #6b8cff; --c-scans: #4fb3ff; --c-activations: #39d98a; --c-suspicious: #ffb020;
  --c-counterfeit: #ff5a36; --c-disabled: #9ca3af; --c-complaints: #a78bfa;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #151517; --bg-subtle: #1b1b1e; --bg-muted: #242428;
  --surface: #1a1a1d; --surface-raised: #212124;
  --border: #2c2c31; --border-strong: #3e3e45;
  --text: #ececee; --text-2: #a3a3ab; --text-3: #71717a; --text-inverse: #151517;
  --ink: #ececee; --ink-hover: #d4d4d8;
  --accent: #4f8cff; --accent-hover: #6ea1ff; --accent-soft: rgba(79,140,255,.2); --accent-text: #7fb0ff;
  --success: #4fc482; --success-soft: #12291b;
  --warning: #e5a53f; --warning-soft: #2f2412;
  --danger:  #f0675f; --danger-soft:  #351a18;
  --info:    #a1a1aa; --info-soft:    #2a2a30;
  --chart-grid: #2a2a2e;
  --shadow-menu: 0 6px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-float: 0 8px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-dialog: 0 20px 56px rgba(0,0,0,.65);
  color-scheme: dark;
}
/* Glass: anything floating over a map / image. Dark glass by default, light glass in the light theme. */
.glass {
  --glass-solid: #0f0f11;
  --surface: rgba(17,17,19,.88); --surface-raised: #1b1b1e; --bg: rgba(17,17,19,.88);
  --bg-subtle: rgba(255,255,255,.06); --bg-muted: rgba(255,255,255,.11);
  --border: rgba(255,255,255,.1); --border-strong: rgba(255,255,255,.2);
  --text: #f4f4f5; --text-2: rgba(244,244,245,.72); --text-3: rgba(244,244,245,.5); --text-inverse: #111113;
  --ink: #f4f4f5; --ink-hover: #ffffff;
  --info: #4fb3ff; --info-soft: rgba(79,179,255,.18); --success: #39d98a; --success-soft: rgba(57,217,138,.16);
  --warning: #ffb020; --warning-soft: rgba(255,176,32,.18); --danger: #ff5a36; --danger-soft: rgba(255,90,54,.18);
  --shadow-menu: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-3);
  box-shadow: var(--shadow-glass); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); color-scheme: dark;
}
:root[data-theme="light"] .glass {
  --glass-solid: #ffffff;
  --surface: rgba(255,255,255,.9); --surface-raised: #ffffff; --bg: rgba(255,255,255,.9);
  --bg-subtle: rgba(0,0,0,.04); --bg-muted: rgba(0,0,0,.07);
  --border: rgba(0,0,0,.08); --border-strong: rgba(0,0,0,.18);
  --text: #18181b; --text-2: rgba(24,24,27,.7); --text-3: rgba(24,24,27,.5); --text-inverse: #ffffff;
  --ink: #18181b; --ink-hover: #2f2f36;
  --info: #2563eb; --info-soft: rgba(37,99,235,.12); --success: #1f8a4c; --success-soft: rgba(31,138,76,.12);
  --warning: #b36a00; --warning-soft: rgba(179,106,0,.12); --danger: #c9352c; --danger-soft: rgba(201,53,44,.12);
  --shadow-menu: 0 10px 30px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05);
  box-shadow: 0 12px 40px rgba(0,0,0,.14); color-scheme: light;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: var(--text-body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
svg { stroke-width: var(--icon-stroke); }
.mono { font-family: var(--font-mono); }
.caption { font: var(--text-caption); color: var(--text-3); }
.muted { color: var(--text-2); }
.hide { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 3. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--control-h); padding: 0 var(--s-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--surface); color: var(--text);
  font: var(--text-label); font-size: 12px; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.btn:hover { background: var(--bg-subtle); border-color: var(--text-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: var(--text-inverse); border-color: var(--ink); }
.btn.primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--bg-muted); }
.btn.sm { min-height: var(--control-h-sm); padding: 0 var(--s-3); font-size: 11px; }
.btn.icon { padding: 0; width: var(--control-h); }
.btn.icon.sm { width: var(--control-h-sm); }
.btn svg { width: var(--icon); height: var(--icon); flex: none; }
.btn.block { width: 100%; }
/* Map control: 34px square glass button (zoom, layers, fit) */
.map-ctl { width: var(--map-control); height: var(--map-control); padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.map-ctl .btn { width: 32px; height: 32px; min-height: 32px; border-radius: 7px; border: 0; }
.map-ctl .btn svg { width: 17px; height: 17px; }

/* ---------- 4. Inputs ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.field > label { font: var(--text-micro); color: var(--text-3); }
.input, select.input, textarea.input { width: 100%; min-height: var(--control-h); padding: 0 var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-2);
  background: var(--surface); color: var(--text); font: var(--text-body); font-size: 13px; }
textarea.input { padding: var(--s-2) var(--s-3); min-height: 90px; resize: vertical; }
.input::placeholder { color: var(--text-3); }
.input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select.input { appearance: none; padding-right: 32px; background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a92' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center; }
.search-wrap { position: relative; }
.search-wrap > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }
.search-wrap .input { padding-left: 32px; }
/* Classic checkbox row: label left, box right, optional colour dot */
.chk { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; cursor: pointer; user-select: none; }
.chk i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chk span { flex: 1; }
.chk input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
/* Segmented control */
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-2); overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 0 var(--s-3); min-height: var(--control-h); font: var(--text-label); font-size: 12px; color: var(--text-2); border-right: 1px solid var(--border); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--bg-muted); color: var(--text); }
.seg.sm button { min-height: 28px; font-size: 12px; }
.seg.block { display: flex; width: 100%; } .seg.block button { flex: 1; }

/* ---------- 5. Badges & chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-1); font: var(--text-micro); font-weight: 500; background: var(--info-soft); color: var(--info); white-space: nowrap; }
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.outline { background: transparent; border: 1px solid currentColor; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border-radius: var(--r-pill); background: var(--bg-muted); font: var(--text-caption); color: var(--text); }
.chip .chip-x { width: 16px; height: 16px; border: 0; background: none; color: var(--text-3); display: grid; place-items: center; }

/* ---------- 6. Tabs (one style everywhere) ---------- */
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button { border: 0; background: none; font: var(--text-tab); color: var(--text-3); padding: 0 0 6px; margin-bottom: -1px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }

/* ---------- 7. Sections & lists (flat: no cards, hairlines only) ---------- */
.section-title { font: var(--text-section); margin: 18px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.section-title .caption { font-weight: 400; }
/* key → value row */
.row-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font: var(--text-row); color: var(--text-2); }
.row-kv:last-child { border-bottom: 0; }
.row-kv b { font: 500 14px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
/* stat row with colour dot + big number (clickable layer toggle) */
.stat { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; transition: opacity .12s; }
.stat:last-child { border-bottom: 0; }
.stat i { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--c); }
.stat .lbl { flex: 1; font: var(--text-row); color: var(--text-2); }
.stat .val { font: var(--text-metric); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat.off { opacity: .38; }
.stat.off i { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.stat:hover { background: var(--bg-subtle); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
/* ranked list: name + value, thin proportional bar below */
.rank > div { padding: 8px 0; }
.rank .row-r { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.rank .row-r span { color: var(--text-3); font-variant-numeric: tabular-nums; }
.rank .bar { height: 6px; margin-top: 6px; background: var(--bg-muted); border-radius: 3px; overflow: hidden; }
.rank .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.rank.red .bar i { background: var(--c-counterfeit); }
/* definition list in popups */
.kv { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; gap: 0 16px; align-items: baseline; }
.kv dt, .kv dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.kv dt { color: var(--text-3); font-size: 12.5px; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
/* item card in a list (id row + meta) — still flat */
.item { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.item:hover { background: var(--bg-subtle); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.item .top { display: flex; align-items: center; gap: 4px; font: var(--text-code); }
.item .top .right { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item .mid { margin-top: 2px; font-size: 13px; color: var(--text-2); }
.item .bot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
/* feed row with solid colour tile icon */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: var(--s-3); padding: 8px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.feed li:last-child { border-bottom: 0; }
.feed .f-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #0b1220; }
.feed .f-icon svg { width: 15px; height: 15px; stroke-width: 2.2; }
.feed .f-icon.scan { background: var(--c-scans); } .feed .f-icon.activation { background: var(--c-activations); }
.feed .f-icon.suspicious { background: var(--c-suspicious); } .feed .f-icon.counterfeit { background: var(--c-counterfeit); }
.feed .f-time { margin-left: auto; font: var(--text-micro); color: var(--text-3); white-space: nowrap; }

/* ---------- 8. Floating surfaces ---------- */
.panel { position: absolute; top: 16px; left: 16px; bottom: 16px; width: var(--side-panel-w); padding: 0 20px 20px; overflow: auto; scrollbar-width: thin; }
.panel .tabs { padding: 12px 20px 10px; margin: 0 -20px 6px; }
.sheet { position: absolute; top: 12px; right: 12px; bottom: 12px; width: var(--sheet-w); z-index: 650; overflow: auto; padding: 20px; }
.popover { position: absolute; top: calc(100% + 8px); right: 0; width: var(--popover-w); max-height: 72vh; overflow: auto; padding: 0 14px 10px; z-index: 1300; }
.menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; z-index: 1200; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-2); box-shadow: var(--shadow-menu); padding: var(--s-1); }
.menu button, .menu a { display: flex; width: 100%; align-items: center; gap: var(--s-2); padding: 8px 10px; border: 0; background: none; border-radius: var(--r-1); font: var(--text-body); color: var(--text); text-align: left; }
.menu button:hover, .menu a:hover { background: var(--bg-muted); }
.menu svg { width: 15px; height: 15px; flex: none; color: var(--text-2); }
.menu .menu-title { font: var(--text-section); color: var(--text); padding: 10px 10px 4px; }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-1) 0; }
.header { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); border-bottom: 1px solid var(--border); background: var(--glass-solid, var(--surface)); position: sticky; top: 0; z-index: 1100; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 600 12px/1 var(--font-sans); }

/* ---------- 9. Accordion ---------- */
.acc { border-top: 1px solid var(--border); }
.acc summary { display: flex; align-items: center; gap: 10px; padding: 13px 0; cursor: pointer; list-style: none; font: 600 13.5px/1.3 var(--font-sans); user-select: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary > svg:first-child { width: 16px; height: 16px; color: var(--text-2); flex: none; }
.acc summary > span { flex: 1; }
.acc summary > svg:last-child { width: 16px; height: 16px; color: var(--text-3); transition: transform .15s; }
.acc[open] summary > svg:last-child { transform: rotate(180deg); }

/* ---------- 10. Charts (pure SVG / divs) ---------- */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.bars i { flex: 1; display: block; background: var(--c, var(--accent)); border-radius: 2px 2px 0 0; min-height: 2px; }
.bars-head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0 4px; }
.bars-head .lbl { display: flex; align-items: center; gap: 8px; font: var(--text-row); color: var(--text-2); }
.bars-head .lbl i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bars-head b { font: var(--text-metric); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.donut { display: flex; align-items: center; gap: 16px; }
.donut-legend { flex: 1; min-width: 0; display: grid; grid-template-columns: 8px 1fr auto auto 18px 1fr auto auto; column-gap: 6px; row-gap: 5px; align-items: center; font-size: 12.5px; }
.donut-legend .dl-row { display: contents; }
.donut-legend .dl-row:nth-child(even) > i { justify-self: end; }
.dl-row i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dl-label { color: var(--text-2); white-space: nowrap; }
.dl-val { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.dl-pct { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap; text-align: right; }

/* ---------- 11. Tables → stacked rows in narrow containers ---------- */
.table-wrap { container-type: inline-size; }
table.table { width: 100%; border-collapse: collapse; font: 400 13px/1.45 var(--font-sans); }
.table th, .table td { padding: 10px var(--s-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table th { font: var(--text-micro); font-weight: 500; color: var(--text-3); white-space: nowrap; }
@container (max-width: 700px) {
  table.table, .table tbody, .table tr, .table td { display: block; }
  .table thead { display: none; }
  .table tr { padding: 10px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .table td { padding: 0; border: 0; display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
  .table td::before { content: attr(data-label); font: var(--text-micro); color: var(--text-3); }
  .table td.primary { grid-column: span 2; display: block; margin-bottom: 4px; }
  .table td.primary::before { display: none; }
}

/* ---------- 12. Feedback ---------- */
.skeleton { background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%); background-size: 200% 100%; animation: shimmer 1.1s infinite; border-radius: var(--r-1); opacity: .45; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 14px; border-radius: var(--r-2); background: var(--ink); color: var(--text-inverse); font: var(--text-label); box-shadow: var(--shadow-menu); z-index: 2000; }
.notice { display: flex; gap: var(--s-2); align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.notice svg { width: 16px; height: 16px; flex: none; color: var(--text-2); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; text-align: center; color: var(--text-3); }
.empty b { color: var(--text); }

/* ---------- 13. Responsive ---------- */
@media (max-width: 767px) {
  .panel { top: 0; left: 0; right: 0; bottom: auto; width: auto; max-height: 55vh; border-radius: 0 0 var(--r-3) var(--r-3); }
  .sheet { top: 0; right: 0; bottom: 0; left: 0; width: auto; border-radius: 0; }
  .popover { position: fixed; top: 60px; left: 8px; right: 8px; width: auto; }
}