/* ============================================================
   Queue Analysis module (/queue) — dashboard, counters, analytics, settings.
   Mirrors alerts-module.css (same shell geometry, same tokens) so the two
   companion modules read as one app. Prefix: qam-
   ============================================================ */

/* ── Shell: left sidebar + module topbar (same as .alm-shell) ── */
.realtime-theme .qam-shell { display: flex; min-height: 100vh; background: #f5f6f8; color: #1a1a1a; font-size: 14px; line-height: 1.55; }
.realtime-theme :is(.qam-shell, .qam-modal-overlay, .qam-drawer, .qam-drawer-overlay) { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.realtime-theme :is(.qam-shell, .qam-modal-overlay, .qam-drawer) :is(button, input, select, textarea) { font-family: inherit; }
.realtime-theme .qam-sidebar { width: 220px; flex-shrink: 0; background: #fff; border-right: 1px solid #e5e7eb; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.realtime-theme .qam-side-logo { height: 64px; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.realtime-theme .qam-side-logo-img { height: 19px; }
.realtime-theme .qam-side-tagline { font-size: 10px; font-weight: 500; color: #6d6c6c; }
.realtime-theme .qam-side-nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; overflow-y: auto; }
.realtime-theme .qam-side-caption { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #999; padding: 10px 12px 2px; }
.realtime-theme .qam-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #6d6c6c; cursor: pointer; }
.realtime-theme .qam-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; color: #6d6c6c; }
.realtime-theme .qam-nav-item:hover { background: #f3f4f6; }
.realtime-theme .qam-nav-item.active { background: #fce6e8; color: #e12424; }
.realtime-theme .qam-nav-item.active svg { color: #e12424; }
.realtime-theme .qam-side-foot { margin-top: auto; padding: 14px 16px; font-size: 10.5px; line-height: 1.5; color: #9a9a9a; border-top: 1px solid #e5e7eb; display: flex; align-items: center; gap: 7px; }
.realtime-theme .qam-engine-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; }
.realtime-theme .qam-engine-dot.on { background: #16a34a; }
.realtime-theme .qam-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.realtime-theme .qam-topbar { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid #e5e7eb; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 20px; }
.realtime-theme .qam-topbar-crumb { font-size: 13px; font-weight: 600; color: #6d6c6c; }
.realtime-theme .qam-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.realtime-theme .qam-bell { width: 34px; height: 34px; border: 1px solid #e5e7eb; background: #fff; color: #6d6c6c; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.realtime-theme .qam-bell:hover { background: #f3f4f6; color: #1a1a1a; }
.realtime-theme .qam-store-select { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 7px 30px 7px 12px; font-size: 13px; color: #1a1a1a; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236d6c6c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.realtime-theme .qam-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #e12424, #1a1a1a); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; }
.realtime-theme .qam-page { width: 100%; max-width: none; margin: 0; padding: 20px 28px 80px; }
.realtime-theme .qam-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.realtime-theme .qam-page-head h1 { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; }
.realtime-theme .qam-page-sub { font-size: 12px; color: #6d6c6c; margin-top: 3px; }
.realtime-theme .qam-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
  .realtime-theme .qam-shell { flex-direction: column; }
  .realtime-theme .qam-sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid #e5e7eb; }
  .realtime-theme .qam-side-nav { flex-direction: row; padding: 0 12px 10px; overflow-x: auto; }
  .realtime-theme .qam-side-caption, .realtime-theme .qam-side-foot { display: none; }
  .realtime-theme .qam-nav-item { width: auto; white-space: nowrap; }
}

/* ── Primitives ── */
.realtime-theme .qam-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; margin-bottom: 16px; }
.realtime-theme .qam-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 0; flex-wrap: wrap; }
.realtime-theme .qam-card-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1a1a1a; }
.realtime-theme .qam-card-sub { color: #6d6c6c; font-size: 12px; margin-top: 2px; }
.realtime-theme .qam-card-body { padding: 16px 22px 22px; }
.realtime-theme .qam-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid #e5e7eb; background: #fff; color: #1a1a1a; border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; }
.realtime-theme .qam-btn:hover { background: #f3f4f6; }
.realtime-theme .qam-btn-primary { background: #e12424; border-color: #e12424; color: #fff; }
.realtime-theme .qam-btn-primary:hover { background: #c11d1d; }
.realtime-theme .qam-btn-ghost { border-color: transparent; color: #6d6c6c; }
.realtime-theme .qam-btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.realtime-theme .qam-btn[disabled] { opacity: .45; cursor: not-allowed; }
.realtime-theme .qam-icon-btn { border: 1px solid #e5e7eb; background: #fff; color: #6d6c6c; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.realtime-theme .qam-icon-btn:hover { background: #f3f4f6; color: #1a1a1a; }
.realtime-theme .qam-linkbtn { border: none; background: none; color: #e12424; font-weight: 600; font-size: 12.5px; padding: 6px 0; cursor: pointer; }
.realtime-theme .qam-help { font-size: 12px; color: #6d6c6c; }
.realtime-theme .qam-note { display: flex; gap: 9px; background: #dbeafe; color: #1d4ed8; border-radius: 10px; padding: 10px 14px; font-size: 12px; font-weight: 500; margin-top: 12px; }
.realtime-theme .qam-note a { color: inherit; font-weight: 700; }
.realtime-theme .qam-note-warn { background: #fff3c0; color: #8a7107; }
.realtime-theme .qam-banner { background: #fff3c0; color: #8a7107; border: 1px solid #e6c01f; border-radius: 12px; padding: 11px 16px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.realtime-theme .qam-spacer { flex: 1; }
.realtime-theme .qam-dot, .realtime-theme .qam-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.realtime-theme .qam-dot { border-radius: 50%; width: 8px; height: 8px; }

/* pills (queue states) */
.realtime-theme .qam-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; letter-spacing: .01em; }
.realtime-theme .qam-st-normal, .realtime-theme .qam-st-cleared { background: #dcf1e4; color: #16a34a; }
.realtime-theme .qam-st-building, .realtime-theme .qam-st-waiting, .realtime-theme .qam-st-long { background: #fff3c0; color: #8a7107; }
.realtime-theme .qam-st-attention { background: #ffedd5; color: #c2410c; }
.realtime-theme .qam-st-critical, .realtime-theme .qam-st-unattended { background: #fee2e2; color: #b91c1c; }
.realtime-theme .qam-st-empty { background: #e2e8f0; color: #475569; }
.realtime-theme .qam-st-inactive { background: #f3f4f6; color: #9a9a9a; }
.realtime-theme .qam-trend { font-weight: 700; font-size: 13px; }
.realtime-theme .qam-trend-up { color: #b91c1c; }
.realtime-theme .qam-trend-flat { color: #6d6c6c; }
.realtime-theme .qam-trend-down { color: #16a34a; }
.realtime-theme .qam-person { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 7px; }
.realtime-theme .qam-person-yes { background: #dcf1e4; color: #16a34a; }
.realtime-theme .qam-person-no { background: #fee2e2; color: #b91c1c; }
.realtime-theme .qam-person-unknown { background: #f3f4f6; color: #9a9a9a; }

/* switch (pattern from alz-switch) */
.realtime-theme .qam-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.realtime-theme .qam-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.realtime-theme .qam-switch .qam-track { position: absolute; inset: 0; border-radius: 999px; background: #d1d5db; transition: background .15s ease; }
.realtime-theme .qam-switch .qam-track::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.realtime-theme .qam-switch input:checked + .qam-track { background: #16a34a; }
.realtime-theme .qam-switch input:checked + .qam-track::before { transform: translateX(16px); }
.realtime-theme .qam-switch input:disabled + .qam-track { opacity: .4; }
.realtime-theme .qam-switch-row { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 8px 0; cursor: pointer; }
.realtime-theme .qam-switch-list { display: flex; flex-direction: column; gap: 4px; }

/* ── KPI tiles ── */

/* ── Counter strip ── */
.realtime-theme .qam-counter-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 12px; margin-bottom: 16px; }
.realtime-theme .qam-ctr-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px 16px 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .12s ease; color: #1a1a1a; }
.realtime-theme .qam-ctr-card:hover { border-color: #9a9a9a; }
.realtime-theme .qam-cc-crit { border-color: #b91c1c; }
.realtime-theme .qam-cc-warn { border-color: #c2410c; }
.realtime-theme .qam-cc-top { display: flex; align-items: center; gap: 8px; }
.realtime-theme .qam-cc-name { font-weight: 700; font-size: 13.5px; }
.realtime-theme .qam-cc-zone { margin-left: auto; font-size: 11px; color: #9a9a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.realtime-theme .qam-cc-mid { display: flex; align-items: baseline; gap: 8px; }
.realtime-theme .qam-cc-count { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.realtime-theme .qam-cc-off { color: #9a9a9a; font-size: 19px; }
.realtime-theme .qam-cc-unit { font-size: 11px; color: #6d6c6c; }
.realtime-theme .qam-cc-trend { margin-left: auto; }
.realtime-theme .qam-cc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.realtime-theme .qam-cc-sub { font-size: 11px; color: #9a9a9a; }

/* ── Charts ── */
.realtime-theme .qam-chart { position: relative; }
.realtime-theme .qam-chart svg, .realtime-theme .qam-card-body > svg, .realtime-theme .qam-d-sect svg { display: block; width: 100%; height: auto; }
.realtime-theme .qam-chart-empty { padding: 28px 12px; text-align: center; color: #6d6c6c; font-size: 12.5px; }
.realtime-theme .qam-legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.realtime-theme .qam-leg { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #1a1a1a; font-size: 12px; font-weight: 600; padding: 4px 12px; cursor: pointer; }
.realtime-theme .qam-leg.off { opacity: .38; }
.realtime-theme .qam-tip { position: absolute; z-index: 2; background: #1a1a1a; color: #fff; border-radius: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.5; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.realtime-theme .qam-tip-title { font-weight: 700; font-size: 11.5px; opacity: .85; margin-bottom: 2px; }
.realtime-theme .qam-tip-row { display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.realtime-theme .qam-tip .qam-swatch { width: 8px; height: 8px; }
.realtime-theme .qam-tip-row .n { color: rgba(255,255,255,.85); }
.realtime-theme .qam-tip-row .v { margin-left: auto; padding-left: 14px; font-weight: 700; }
.realtime-theme .qam-tip-row .v small { font-size: 11px; font-weight: 400; opacity: .75; }
.realtime-theme .qam-tip-row.muted { opacity: .55; }
.realtime-theme .qam-trend-svg { cursor: crosshair; user-select: none; -webkit-tap-highlight-color: transparent; }
.realtime-theme .qam-legend-note { margin-left: auto; font-size: 11.5px; color: #9a9a9a; font-variant-numeric: tabular-nums; }
.realtime-theme .qam-grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.realtime-theme .qam-grid2 > .qam-card { margin-bottom: 16px; }
@media (max-width: 1100px) { .realtime-theme .qam-grid2 { grid-template-columns: 1fr; } }
.realtime-theme .qam-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.realtime-theme .qam-facts { display: flex; flex-direction: column; gap: 12px; }
.realtime-theme .qam-fact { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 1px; }
.realtime-theme .qam-fact .f-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9a9a9a; }
.realtime-theme .qam-fact .f-value { font-size: 17px; font-weight: 800; color: #1a1a1a; }
.realtime-theme .qam-fact .f-sub { font-size: 11.5px; color: #6d6c6c; }

/* ── Tables ── */
.realtime-theme .qam-table-scroll { overflow-x: auto; margin-top: 12px; }
.realtime-theme .qam-table { border-collapse: collapse; width: 100%; }
.realtime-theme .qam-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6d6c6c; padding: 11px 14px; border-bottom: 1px solid #e5e7eb; background: #f6f6f6; white-space: nowrap; }
.realtime-theme .qam-table th:first-child, .realtime-theme .qam-table td:first-child { padding-left: 22px; }
.realtime-theme .qam-table td { padding: 11px 14px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; font-size: 13px; color: #1a1a1a; }
.realtime-theme .qam-table tbody tr:last-child td { border-bottom: none; }
.realtime-theme .qam-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.realtime-theme .qam-table .strong { font-weight: 700; }
.realtime-theme .qam-rowlink { cursor: pointer; }
.realtime-theme .qam-rowlink:hover { background: #f6f6f6; }
.realtime-theme .qam-cell-main { font-weight: 600; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.realtime-theme .qam-cell-sub { font-size: 11.5px; color: #6d6c6c; }
.realtime-theme .qam-empty-row { text-align: center; color: #6d6c6c; padding: 26px 0 !important; }

/* ── Attention feed ── */
.realtime-theme .qam-feed { display: flex; flex-direction: column; margin-top: 10px; }
.realtime-theme .qam-feed-item { display: flex; gap: 12px; padding: 13px 22px; border-bottom: 1px solid #e5e7eb; border-left: none; border-right: none; border-top: none; background: none; text-align: left; cursor: pointer; width: 100%; align-items: center; color: #1a1a1a; }
.realtime-theme .qam-feed-item:last-child { border-bottom: none; }
.realtime-theme .qam-feed-item:hover { background: #f6f6f6; }
.realtime-theme .qam-fi-bar { width: 3px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.realtime-theme .qam-fi-crit { background: #b91c1c; }
.realtime-theme .qam-fi-orange { background: #c2410c; }
.realtime-theme .qam-fi-amber { background: #8a7107; }
.realtime-theme .qam-fi-ok { background: #16a34a; }
.realtime-theme .qam-fi-slate { background: #475569; }
.realtime-theme .qam-fi-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.realtime-theme .qam-fi-msg { font-size: 13px; font-weight: 600; }
.realtime-theme .qam-fi-meta { font-size: 11.5px; color: #6d6c6c; }

/* ── Counters config list ── */
.realtime-theme .qam-cfg-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 22px 0; }
.realtime-theme .qam-cfg-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 13px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; }
.realtime-theme .qam-cfg-card.disabled { background: #f6f6f6; }
.realtime-theme .qam-cfg-name { font-weight: 700; font-size: 13.5px; }
.realtime-theme .qam-cfg-meta { font-size: 11.5px; color: #6d6c6c; }
.realtime-theme .qam-cfg-thresh { font-size: 11px; color: #9a9a9a; }
.realtime-theme .qam-cfg-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.realtime-theme .qam-region-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 3px 8px; border: 1px dashed; white-space: nowrap; }
.realtime-theme .qam-rc-person { color: #e12424; border-color: #e12424; background: #fce6e8; }
.realtime-theme .qam-rc-queue { color: #1d4ed8; border-color: #1d4ed8; background: #dbeafe; }
.realtime-theme .qam-region-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Empty / loading ── */
.realtime-theme .qam-empty { text-align: center; padding: 44px 20px; }
.realtime-theme .qam-empty h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #1a1a1a; }
.realtime-theme .qam-empty p { margin: 0 0 16px; font-size: 12.5px; color: #6d6c6c; }
.realtime-theme .qam-empty-sm { padding: 26px 20px; }
.realtime-theme .qam-empty-sm p { margin: 0; }
.realtime-theme .qam-skeleton { border-radius: 8px; background: linear-gradient(90deg, #f3f4f6 25%, #ebedf0 50%, #f3f4f6 75%); background-size: 200% 100%; animation: qam-shimmer 1.2s linear infinite; }
@keyframes qam-shimmer { to { background-position: -200% 0; } }

/* ── Settings ── */
.realtime-theme .qam-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 24px; margin-top: 8px; }
.realtime-theme .qam-set-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; }
.realtime-theme .qam-set-label { flex: 1; color: #1a1a1a; }
.realtime-theme .qam-set-row input { width: 84px; text-align: right; font-variant-numeric: tabular-nums; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 9px; font-size: 13px; background: #fff; color: #1a1a1a; }
.realtime-theme .qam-unit { font-size: 11.5px; color: #9a9a9a; width: 46px; }

/* ── Modal (counter form) ── */
.realtime-theme .qam-modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.4); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.realtime-theme .qam-modal { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); width: 760px; max-width: 100%; color: #1a1a1a; }
.realtime-theme .qam-modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #e5e7eb; }
.realtime-theme .qam-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.realtime-theme .qam-modal-body { padding: 20px 22px; }
.realtime-theme .qam-modal-foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid #e5e7eb; }
.realtime-theme .qam-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.realtime-theme .qam-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #6d6c6c; }
.realtime-theme .qam-field em { font-weight: 500; font-style: normal; color: #9a9a9a; }
.realtime-theme .qam-field input, .realtime-theme .qam-field select { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 12px; font-size: 13px; background: #fff; color: #1a1a1a; width: 100%; font-weight: 500; }

/* ── Drawer ── */
.realtime-theme .qam-drawer-overlay { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.25); }
.realtime-theme .qam-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 96; width: 480px; max-width: 94vw; background: #fff; box-shadow: -12px 0 40px rgba(0,0,0,.18); display: flex; flex-direction: column; color: #1a1a1a; }
.realtime-theme .qam-drawer-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid #e5e7eb; }
.realtime-theme .qam-drawer-head > div:first-child { flex: 1; min-width: 0; }
.realtime-theme .qam-drawer-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.realtime-theme .qam-d-sub { font-size: 11.5px; color: #6d6c6c; margin-top: 3px; }
.realtime-theme .qam-drawer-body { overflow-y: auto; padding: 16px 20px 30px; display: flex; flex-direction: column; gap: 14px; }
.realtime-theme .qam-d-live { display: flex; align-items: center; gap: 14px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 13px 16px; }
.realtime-theme .qam-dl-count { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.realtime-theme .qam-dl-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6d6c6c; align-items: flex-start; }
.realtime-theme .qam-dl-trend { margin-left: auto; font-size: 20px; }
.realtime-theme .qam-d-sect h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6d6c6c; }
.realtime-theme .qam-d-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.realtime-theme .qam-d-kpi { border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px 12px; }
.realtime-theme .qam-d-kpi .k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a9a9a; }
.realtime-theme .qam-d-kpi .v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.realtime-theme .qam-d-actions { display: flex; gap: 8px; }
.realtime-theme .qam-tl { display: flex; flex-direction: column; }
.realtime-theme .qam-tl-row { display: flex; gap: 11px; padding: 7px 0; font-size: 12.5px; align-items: flex-start; }
.realtime-theme .qam-tl-t { color: #9a9a9a; font-variant-numeric: tabular-nums; white-space: nowrap; width: 52px; flex-shrink: 0; }
.realtime-theme .qam-tl-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }

/* ── Camera-frame region editor (counter form + drawer preview) ─────────── */
.realtime-theme .qam-modal.qam-modal-wide { width: 960px; }
.realtime-theme .qam-cre { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.realtime-theme .qam-cre-empty { margin-top: 14px; padding: 28px; text-align: center; border: 1px dashed #d1d5db; border-radius: 12px; color: #6d6c6c; font-size: 13px; font-weight: 500; background: #fafafa; }
.realtime-theme .qam-cre-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.realtime-theme .qam-cre-chip { display: flex; align-items: center; gap: 8px; border: 1px dashed; border-radius: 10px; padding: 7px 10px; font-size: 12px; font-weight: 600; background: #fff; }
.realtime-theme .qam-cre-chip.active { border-style: solid; box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.realtime-theme .qam-cre-chip em { font-style: normal; font-weight: 500; opacity: .75; }
.realtime-theme .qam-cre-name { flex: 1; }
.realtime-theme .qam-cre-state { font-weight: 500; color: #6d6c6c; white-space: nowrap; }
.realtime-theme .qam-cre-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.realtime-theme .qam-cre-stage { border-radius: 12px; overflow: hidden; background: #111; min-height: 180px; display: flex; align-items: center; justify-content: center; position: relative; }
.realtime-theme .qam-cre-stage.drawing { cursor: crosshair; }
.realtime-theme .qam-cre-canvas { position: relative; width: 100%; }
.realtime-theme .qam-cre-canvas img { display: block; width: 100%; height: 100%; user-select: none; }
.realtime-theme .qam-cre-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.realtime-theme .qam-cre-vertex { cursor: grab; }
.realtime-theme .qam-cre-vertex:active { cursor: grabbing; }
.realtime-theme .qam-cre-msg { padding: 40px 20px; color: #d1d5db; font-size: 13px; font-weight: 500; text-align: center; }
.realtime-theme .qam-cre-err { color: #fca5a5; }
.realtime-theme .qam-cre-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11px; color: #6d6c6c; font-weight: 500; }
.realtime-theme .qam-cre-help kbd { font-family: inherit; border: 1px solid #d1d5db; border-radius: 4px; padding: 0 4px; background: #f3f4f6; }
.realtime-theme .qam-cre.readonly .qam-cre-stage { min-height: 120px; }

/* ── Footage walkthrough (counter drawer) ─────────────────────────────── */
.realtime-theme .qam-drawer { width: 640px; }
.realtime-theme .qam-wt-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.realtime-theme .qam-wt-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: #6d6c6c; }
.realtime-theme .qam-wt-controls input, .realtime-theme .qam-wt-controls select { border: 1px solid #e5e7eb; border-radius: 8px; padding: 5px 8px; font-size: 12px; }
.realtime-theme .qam-wt-msg { font-size: 12px; color: #1d4ed8; background: #dbeafe; border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.realtime-theme .qam-wt-err { color: #b91c1c; background: #fee2e2; }
.realtime-theme .qam-wt-player { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.realtime-theme .qam-wt-player input[type=range] { flex: 1; }
.realtime-theme .qam-wt-time { font-size: 11px; color: #6d6c6c; white-space: nowrap; font-weight: 600; }
.realtime-theme .qam-wt-counts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.realtime-theme .qam-wt-hint { font-size: 11px; color: #9a9a9a; }
.realtime-theme .qam-wt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.realtime-theme .qam-wt-kpis div { background: #f6f7f9; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.realtime-theme .qam-wt-kpis b { font-size: 16px; }
.realtime-theme .qam-wt-kpis span { font-size: 11px; color: #6d6c6c; }

/* ── Overview split: insights left, attention right ───────────────────── */
.realtime-theme .qam-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1250px) { .realtime-theme .qam-split { grid-template-columns: 1fr; } }
.realtime-theme .qam-split-main { min-width: 0; }
.realtime-theme .qam-split-side { position: sticky; top: 12px; }
.realtime-theme .qam-attention-card .qam-feed { max-height: 70vh; overflow-y: auto; }
.realtime-theme .qam-ctr-card { cursor: default; }
.realtime-theme .qam-ev-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.realtime-theme .qam-ev-kpis div { background: #f6f7f9; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.realtime-theme .qam-ev-kpis span { font-size: 11px; color: #6d6c6c; font-weight: 600; }
.realtime-theme .qam-ev-kpis b { font-size: 13px; }
.realtime-theme .qam-ev-kpis b.bad { color: #e12424; }
.realtime-theme .qam-ev-h { margin: 6px 0; font-size: 12px; color: #6d6c6c; font-weight: 600; }
.realtime-theme .qam-wt-range { flex: 1; position: relative; display: flex; align-items: center; }
.realtime-theme .qam-wt-range input { width: 100%; }
.realtime-theme .qam-wt-marker { position: absolute; top: -4px; width: 2px; height: 22px; background: #e12424; pointer-events: none; }
.realtime-theme .qam-ev-video { background: #111; border-radius: 12px; overflow: hidden; }

/* ── Overview: half / half — insights left, Attention required owns the right half ── */
.realtime-theme .qam-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.realtime-theme .qam-split-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.realtime-theme .qam-split-main .qam-kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 0; }
.realtime-theme .qam-split-main .qam-counter-strip { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 0; }
.realtime-theme .qam-split-main .qam-grid3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.realtime-theme .qam-split-main > .qam-card, .realtime-theme .qam-split-main .qam-grid3 > .qam-card { margin-bottom: 0; }
.realtime-theme .qam-split-side { position: sticky; top: 12px; min-width: 0; height: calc(100vh - 112px); }
.realtime-theme .qam-attention-card { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; }
.realtime-theme .qam-attention-head h2 { display: flex; align-items: center; gap: 8px; }
.realtime-theme .qam-att-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 12px; font-weight: 700; background: #e5e7eb; color: #4b5563; }
.realtime-theme .qam-att-badge.hot { background: #fee2e2; color: #b91c1c; }
.realtime-theme .qam-attention-card .qam-feed { flex: 1; overflow-y: auto; }
.realtime-theme .qam-attention-card .qam-feed-item { padding: 16px 22px; }
.realtime-theme .qam-attention-card .qam-fi-msg { font-size: 14px; }
.realtime-theme .qam-att-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 36px 24px; color: #6d6c6c; }
.realtime-theme .qam-att-empty .qam-att-ok { width: 44px; height: 44px; border-radius: 50%; background: #dcfce7; color: #15803d; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.realtime-theme .qam-att-empty b { color: #1a1a1a; font-size: 14px; }
.realtime-theme .qam-att-empty p { margin: 0; font-size: 12.5px; max-width: 280px; }
.realtime-theme .qam-ctr-card { cursor: default; }
@media (max-width: 1250px) {
  .realtime-theme .qam-split { grid-template-columns: 1fr; }
  .realtime-theme .qam-split-side { position: static; height: auto; }
  .realtime-theme .qam-attention-card .qam-feed { max-height: 50vh; }
}

/* ── Drawer evidence picker + KPI grid ─────────────────────────────────── */
.realtime-theme .qam-ev-pick { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: #6d6c6c; }
.realtime-theme .qam-ev-select-wrap { position: relative; display: block; }
.realtime-theme .qam-ev-select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px 36px 9px 12px; font-size: 13px; font-weight: 500; color: #1a1a1a; background: #fff; cursor: pointer; }
.realtime-theme .qam-ev-select:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.realtime-theme .qam-ev-chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #6d6c6c; font-size: 12px; }
.realtime-theme .qam-ev-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.realtime-theme .qam-ev-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.realtime-theme .qam-ev-kpis div { background: #f6f7f9; border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.realtime-theme .qam-ev-kpis span { font-size: 11px; color: #6d6c6c; font-weight: 600; }
.realtime-theme .qam-ev-kpis b { font-size: 13px; line-height: 1.3; }
.realtime-theme .qam-ev-video { background: #111; border-radius: 12px; overflow: hidden; }

/* ── Alignment pass: one type scale, one baseline per card row ─────────── */
/* KPI tiles: label 1 line, value on a shared baseline, hint 1 line */
/* Counter cards: same corner radius, same padding, fixed height */
.realtime-theme .qam-ctr-card { min-height: 150px; padding: 14px 16px; }
/* Card heads: title + sub share one rhythm */
.realtime-theme .qam-card-head { padding: 16px 20px 12px; }
.realtime-theme .qam-card-head h2 { font-size: 15px; line-height: 20px; }
.realtime-theme .qam-card-sub { font-size: 12px; line-height: 16px; }
/* Attention feed rows: title, one meta line, status column right-aligned */
.realtime-theme .qam-attention-card .qam-feed-item { padding: 14px 20px; gap: 12px; align-items: center; }
.realtime-theme .qam-attention-card .qam-fi-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.realtime-theme .qam-attention-card .qam-fi-msg { font-size: 13.5px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realtime-theme .qam-attention-card .qam-fi-meta { display: flex; flex-wrap: nowrap; gap: 0; font-size: 11.5px; line-height: 16px; color: #6d6c6c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realtime-theme .qam-attention-card .qam-fi-meta > span + span::before { content: "·"; margin: 0 6px; color: #c4c4c4; }
.realtime-theme .qam-fi-when { font-variant-numeric: tabular-nums; color: #1a1a1a; font-weight: 600; }
.realtime-theme .qam-fi-live { color: #b45309; font-weight: 600; }
.realtime-theme .qam-fi-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; min-width: 150px; }
.realtime-theme .qam-fi-right .qam-pill { width: 100%; justify-content: center; }
.realtime-theme .qam-fi-ev { font-size: 11px; line-height: 14px; color: #9a9a9a; font-weight: 600; }
.realtime-theme .qam-fi-ev.ready { color: #1d4ed8; }
.realtime-theme .qam-attention-card .qam-fi-bar { align-self: stretch; }
/* Numbers everywhere: tabular */
.realtime-theme .qam-ctr-big, .realtime-theme .qam-ev-kpis b { font-variant-numeric: tabular-nums; }
/* KPI tiles: let label and hint wrap to two lines instead of clipping */

/* ── Why this action was raised ──────────────────────────────────────── */
.realtime-theme .qam-why { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; margin: 4px 0 14px; background: #fff; }
.realtime-theme .qam-why-head { font-size: 12px; font-weight: 700; color: #1a1a1a; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.realtime-theme .qam-why-gates { display: flex; flex-direction: column; gap: 6px; }
.realtime-theme .qam-why-gate { display: grid; grid-template-columns: 18px 170px 110px 1fr; gap: 10px; align-items: baseline; font-size: 12.5px; }
.realtime-theme .qam-why-check { width: 18px; height: 18px; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.realtime-theme .qam-why-label { font-weight: 600; color: #1a1a1a; }
.realtime-theme .qam-why-value { font-weight: 700; font-variant-numeric: tabular-nums; color: #b91c1c; }
.realtime-theme .qam-why-rule { color: #6d6c6c; }
.realtime-theme .qam-why-note { margin-top: 10px; font-size: 11.5px; color: #9a9a9a; }
@media (max-width: 900px) { .realtime-theme .qam-why-gate { grid-template-columns: 18px 1fr; } .realtime-theme .qam-why-rule { grid-column: 2; } }
.realtime-theme .qam-regions-toggle { margin: 8px 0 4px; }

/* ── KPI tiles: compact, one line each for label / value / hint ─────────── */

/* camera config (Camera module rows: channel / RTSP / credentials) */
.realtime-theme .qam-btn-attn { border-color: #f1c232; background: #fff8dc; color: #8a7107; }
.realtime-theme .qam-cam-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; display: inline-block; }
.realtime-theme .qam-cam-dot.off { background: #e12424; }
.realtime-theme .qam-cam-count { font-size: 12px; font-weight: 600; color: #6d6c6c; }
.realtime-theme .qam-cam-intro { font-size: 12.5px; color: #6d6c6c; line-height: 1.5; margin-bottom: 14px; }
.realtime-theme .qam-cam-list { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.realtime-theme .qam-cam-row { display: grid; grid-template-columns: 90px 1.6fr .8fr .8fr 90px auto; gap: 10px; align-items: center; padding: 10px 14px; font-size: 12.5px; color: #1a1a1a; border-top: 1px solid #f0f0f0; }
.realtime-theme .qam-cam-row:first-child { border-top: none; }
.realtime-theme .qam-cam-row.qam-cam-head { background: #f8f9fb; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6d6c6c; }
.realtime-theme .qam-cam-row.missing { background: #fffbeb; }
.realtime-theme .qam-cam-row.active { background: #fef2f2; }
.realtime-theme .qam-cam-row em { color: #9a9a9a; font-style: normal; }
.realtime-theme .qam-cam-name { font-weight: 700; }
.realtime-theme .qam-cam-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.realtime-theme .qam-cam-actions { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-end; }
.realtime-theme .qam-pill-ok { background: #dcfce7; color: #15803d; }
.realtime-theme .qam-pill-muted { background: #f3f4f6; color: #6d6c6c; }
.realtime-theme .qam-pill-warn { background: #fff3c0; color: #8a7107; }
.realtime-theme .qam-cam-add { align-self: flex-start; }
.realtime-theme .qam-cam-form { border: 1px dashed #e5e7eb; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.realtime-theme .qam-cam-form-title { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.realtime-theme .qam-cam-form-foot { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 720px) { .realtime-theme .qam-cam-row { grid-template-columns: 1fr 1fr; } .realtime-theme .qam-cam-row.qam-cam-head { display: none; } }

/* ── insights-dashboard anatomy (KPICard / panel header): brand icon tile,
      neutral title, bold value, brand-tint hover ─────────────────────────── */
.realtime-theme .qam-ico { display: grid; place-items: center; flex: none; border-radius: 8px; background: rgba(225,36,36,.10); color: #e12424; }
.realtime-theme .qam-ico-sm { width: 28px; height: 28px; }
.realtime-theme .qam-ico-sm svg { width: 15px; height: 15px; }
.realtime-theme .qam-ico-md { width: 36px; height: 36px; }
.realtime-theme .qam-ico-md svg { width: 18px; height: 18px; }
.realtime-theme .qam-ico-lg { width: 44px; height: 44px; border-radius: 10px; }
.realtime-theme .qam-ico-lg svg { width: 22px; height: 22px; }
.realtime-theme .qam-ico-warn { background: rgba(194,65,12,.12); color: #c2410c; }
.realtime-theme .qam-ico-crit { background: rgba(185,28,28,.14); color: #b91c1c; }

.realtime-theme .qam-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.realtime-theme .qam-kpi { display: flex; flex-direction: column; min-width: 0; min-height: 118px; padding: 12px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; color: #1a1a1a; transition: background .15s ease, border-color .15s ease; container-type: inline-size; }
.realtime-theme .qam-kpi:hover { background: linear-gradient(135deg, #fceaea 0%, #fff 100%); }
.realtime-theme .qam-kpi-warn { border-color: rgba(194,65,12,.35); }
.realtime-theme .qam-kpi-crit { border-color: rgba(185,28,28,.4); background: #fff7f7; }
.realtime-theme .qam-kpi-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.realtime-theme .qam-kpi-label { margin: 0; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: #1a1a1a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.realtime-theme .qam-kpi-value { display: block; margin-top: auto; padding-top: 10px; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: .13px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realtime-theme .qam-kpi-value-long { font-size: 22px; }
.realtime-theme .qam-kpi-hint { margin: 4px 0 0; font-size: 12px; line-height: 16px; letter-spacing: .08px; color: #6d6c6c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realtime-theme .qam-kpi-warn .qam-kpi-value { color: #c2410c; }
.realtime-theme .qam-kpi-crit .qam-kpi-value { color: #b91c1c; }

.realtime-theme .qam-card-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.realtime-theme .qam-card-title h2 { font-size: 15px; line-height: 20px; }
.realtime-theme .qam-card-title .qam-card-sub { margin-top: 1px; }
.realtime-theme .qam-attention-head h2 { display: flex; align-items: center; gap: 10px; }
.realtime-theme .qam-card, .realtime-theme .qam-ctr-card, .realtime-theme .qam-attention-card { border-radius: 12px; }
.realtime-theme .qam-ctr-card:hover { border-color: #e5e7eb; background: linear-gradient(135deg, #fceaea 0%, #fff 100%); }
/* Type scale follows the tile's own width (container query), not the viewport:
   a half-column tile keeps the base scale even on a wide monitor, a full-width
   analytics tile steps up. */
@container (min-width: 230px) {
  .realtime-theme .qam-kpi-head { gap: 12px; }
  .realtime-theme .qam-kpi-head .qam-ico-sm { width: 32px; height: 32px; }
  .realtime-theme .qam-kpi-head .qam-ico-sm svg { width: 16px; height: 16px; }
  .realtime-theme .qam-kpi-label { font-size: 15px; line-height: 20px; }
  .realtime-theme .qam-kpi-value { font-size: 28px; line-height: 34px; padding-top: 12px; }
  .realtime-theme .qam-kpi-value-long { font-size: 24px; }
  .realtime-theme .qam-kpi-hint { font-size: 13px; line-height: 18px; }
}
@media (min-width: 1536px) {
  .realtime-theme .qam-card, .realtime-theme .qam-ctr-card, .realtime-theme .qam-kpi, .realtime-theme .qam-attention-card { border-radius: 16px; }
  .realtime-theme .qam-kpi { padding: 16px 18px; min-height: 124px; }
  .realtime-theme .qam-ico-md { width: 40px; height: 40px; }
  .realtime-theme .qam-ico-md svg { width: 20px; height: 20px; }
}

/* live frame grab status under the region editor */
.realtime-theme .qam-grab { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; font-weight: 500; color: #6d6c6c; }
.realtime-theme .qam-grab .qam-linkbtn { margin-left: auto; padding: 0; }
.realtime-theme .qam-grab-dot { width: 8px; height: 8px; border-radius: 50%; background: #9a9a9a; flex: none; }
.realtime-theme .qam-grab-busy .qam-grab-dot { background: #e12424; animation: qam-pulse 1s ease-in-out infinite; }
.realtime-theme .qam-grab-ok .qam-grab-dot { background: #16a34a; }
.realtime-theme .qam-grab-warn { color: #8a7107; }
.realtime-theme .qam-grab-warn .qam-grab-dot { background: #f1c232; }
@keyframes qam-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* counter cards — same card language as the KPI tiles */
.realtime-theme .qam-ctr-card { gap: 10px; padding: 14px 16px; min-height: 0; }
.realtime-theme .qam-cc-top { min-width: 0; }
.realtime-theme .qam-cc-name { font-size: 13px; line-height: 18px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realtime-theme .qam-cc-zone { font-size: 11px; line-height: 16px; font-weight: 600; color: #6d6c6c; background: #f3f4f6; border-radius: 999px; padding: 1px 8px; max-width: 40%; }
.realtime-theme .qam-cc-mid { align-items: center; gap: 8px; min-height: 32px; }
.realtime-theme .qam-cc-count { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: .13px; }
.realtime-theme .qam-cc-off { font-size: 18px; font-weight: 600; }
.realtime-theme .qam-cc-unit { font-size: 12px; line-height: 16px; color: #6d6c6c; }
.realtime-theme .qam-cc-trend { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #f3f4f6; color: #6d6c6c; font-size: 14px; }
.realtime-theme .qam-cc-foot { gap: 6px; }
.realtime-theme .qam-cc-sub { font-size: 12px; line-height: 16px; color: #6d6c6c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realtime-theme .qam-cc-warn { border-color: rgba(194,65,12,.35); }
.realtime-theme .qam-cc-crit { border-color: rgba(185,28,28,.4); background: #fff7f7; }
.realtime-theme .qam-split-main .qam-counter-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.realtime-theme .qam-ctr-card { container-type: inline-size; }
@container (min-width: 340px) {
  .realtime-theme .qam-cc-name { font-size: 15px; line-height: 20px; }
  .realtime-theme .qam-cc-count { font-size: 30px; line-height: 36px; }
  .realtime-theme .qam-cc-unit, .realtime-theme .qam-cc-sub { font-size: 13px; line-height: 18px; }
}

/* analytics: six tiles in one row, two rows of three when narrow */
.realtime-theme .qam-kpi-row-6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* fact cards follow the tile type scale */
.realtime-theme .qam-fact { gap: 2px; }
.realtime-theme .qam-fact .f-label { font-size: 11px; line-height: 16px; letter-spacing: .06em; color: #6d6c6c; }
.realtime-theme .qam-fact .f-value { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: .13px; font-variant-numeric: tabular-nums; }
.realtime-theme .qam-fact .f-sub { font-size: 12px; line-height: 16px; }

/* counter drawer: merged timeline (queue length + state events) */
.realtime-theme .qam-tl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.realtime-theme .qam-tl-head h4 { margin-bottom: 2px; }
.realtime-theme .qam-tl-sub { font-size: 11.5px; line-height: 1.45; color: #6d6c6c; max-width: 420px; margin-bottom: 4px; }
.realtime-theme .qam-tl-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: #6d6c6c; }
.realtime-theme .qam-tl-legend span { display: inline-flex; align-items: center; gap: 5px; }
.realtime-theme .qam-tl-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.realtime-theme .qam-tl-svg { width: 100%; height: auto; display: block; cursor: crosshair; user-select: none; -webkit-tap-highlight-color: transparent; }
.realtime-theme .qam-tl-detail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; margin-top: 6px; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 12.5px; color: #1a1a1a; background: #fff; }
.realtime-theme .qam-tl-detail.muted { color: #6d6c6c; border-style: dashed; }
.realtime-theme .qam-tl-detail b { font-weight: 700; letter-spacing: .02em; }
.realtime-theme .qam-tl-detail .qam-tl-dot { margin-top: 0; }
.realtime-theme .qam-tl-sep { color: #9a9a9a; }
.realtime-theme .qam-tl-pin { margin-left: auto; font-size: 11px; color: #9a9a9a; }
.realtime-theme .qam-tl-wrap { position: relative; }
.realtime-theme .qam-tl-ring { animation: qam-tl-ring-in .14s ease; }
@keyframes qam-tl-ring-in { from { opacity: 0; } to { opacity: 1; } }
.realtime-theme .qam-tl-tip { position: absolute; top: 0; pointer-events: none; z-index: 2; background: #1a1a1a; color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 11.5px; line-height: 1.5; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.realtime-theme .qam-tl-tip .t { font-weight: 700; font-size: 11px; opacity: .8; margin-bottom: 1px; }
.realtime-theme .qam-tl-tip .r { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.realtime-theme .qam-tl-tip .r i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.realtime-theme .qam-tl-states { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; padding: 0 2px; font-size: 12px; }
.realtime-theme .qam-tl-states-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a9a9a; }
.realtime-theme .qam-tl-states > span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: #6d6c6c; }
.realtime-theme .qam-tl-states b { font-weight: 600; color: #1a1a1a; }

/* ⓘ on KPI tiles — same PanelInfoMark as the insights dashboard */
.realtime-theme .qam-kpi-info { margin-left: auto; width: 18px; height: 18px; color: #9a9a9a; border-radius: 50%; }
.realtime-theme .qam-kpi-info:hover { color: #e12424; background: #fceaea; }
.realtime-theme .qam-kpi-info svg { width: 14px; height: 14px; }

/* ⓘ inline with card and fact titles */
.realtime-theme .qam-h2-info { display: inline-flex; vertical-align: middle; margin-left: 6px; width: 18px; height: 18px; color: #9a9a9a; border-radius: 50%; }
.realtime-theme .qam-h2-info:hover { color: #e12424; background: #fceaea; }
.realtime-theme .qam-h2-info svg { width: 14px; height: 14px; }
.realtime-theme .qam-fact .f-label { display: flex; align-items: center; gap: 2px; }
.realtime-theme .qam-fact .f-label .qam-h2-info { margin-left: 2px; width: 16px; height: 16px; }
.realtime-theme .qam-fact .f-label .qam-h2-info svg { width: 12px; height: 12px; }
.realtime-theme .qam-attention-head h2 .qam-h2-info { margin-left: 2px; }
/* table chips stay on one line */
.realtime-theme .qam-table td .qam-pill, .realtime-theme .qam-table td .qam-pc { white-space: nowrap; }

/* store switched off in admin: the module is read-only — every action is inert and dimmed,
   navigation, the store selector, the date range and the ⓘ marks keep working */
.realtime-theme .qam-paused .qam-btn:not(.qam-allow),
.realtime-theme .qam-paused .qam-icon-btn,
.realtime-theme .qam-paused .qam-linkbtn,
.realtime-theme .qam-paused .qam-switch,
.realtime-theme .qam-paused .qam-field input,
.realtime-theme .qam-paused .qam-field select,
.realtime-theme .qam-paused .qam-th-grid input,
.realtime-theme .qam-paused .qam-ev-select,
.realtime-theme .qam-paused .qam-table tbody tr,
.realtime-theme .qam-paused .qam-feed > * { pointer-events: none; opacity: .45; }
.realtime-theme .qam-paused .qam-btn[disabled] { opacity: .45; }

/* Historical Analytics layout: KPI tiles in semantic groups, chart + hourly side by side,
   the wide comparison table on its own full-width card (scrolls inside, never squeezes neighbours) */
.realtime-theme .qam-kpi-group { margin-bottom: 16px; }
.realtime-theme .qam-kpi-caption { font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6d6c6c; margin: 0 0 8px 2px; }
.realtime-theme .qam-kpi-row-auto { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 0; }
.realtime-theme .qam-grid-21 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.realtime-theme .qam-grid-21 > .qam-card { margin-bottom: 0; min-width: 0; }
@media (max-width: 1100px) { .realtime-theme .qam-grid-21 { grid-template-columns: 1fr; } }
.realtime-theme .qam-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.realtime-theme .qam-table th, .realtime-theme .qam-table td { white-space: nowrap; }
.realtime-theme .qam-table td:first-child { white-space: normal; min-width: 140px; }

/* custom date range inputs beside the range select */
.realtime-theme .qam-dates { display: inline-flex; align-items: center; gap: 6px; }
.realtime-theme .qam-dates input[type="date"] { height: 36px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0 10px; font-size: 13px; font-weight: 500; color: #1a1a1a; background: #fff; font-family: inherit; }
.realtime-theme .qam-dates-sep { font-size: 12px; color: #6d6c6c; }

/* region editor: surface-area preview + Confirm region step */
.realtime-theme .qam-cre-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 10px; padding: 10px 14px; border: 1px solid #e5e7eb; border-left-width: 4px; border-radius: 10px; background: #fff; font-size: 13px; color: #1a1a1a; }
.realtime-theme .qam-cre-confirm-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 320px; }
.realtime-theme .qam-cre-confirm-text strong { font-size: 14px; }
.realtime-theme .qam-cre-confirm-text .qam-cre-warn { color: #8a5b00; font-weight: 600; }
.realtime-theme .qam-cre-confirm-text .qam-cre-rule { color: #6d6c6c; font-size: 12px; }
.realtime-theme .qam-cre-confirm-actions { display: flex; gap: 8px; }
.realtime-theme .qam-cre-confirm .qam-btn-agree { background: #1e7f4a; color: #fff; border-color: #1e7f4a; }
.realtime-theme .qam-cre-confirm .qam-btn-agree:disabled { opacity: .5; cursor: not-allowed; }