.cl-tabs { margin-bottom: 18px; }

.cl-id { font-family: var(--ms-font-mono); font-weight: 700; color: var(--ms-ink-950); white-space: nowrap; }
.cl-plates { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cl-stack { display: flex; }
.cl-stack > img, .cl-stack > span {
  width: 30px; height: 30px; border-radius: 7px; object-fit: cover; flex-shrink: 0;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ms-border-subtle); background: var(--ms-bg-subtle);
}
.cl-stack > * + * { margin-left: -12px; }
.cl-stack > span { display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: var(--ms-text-muted); }
.cl-plates__n { font-size: 12px; color: var(--ms-text-light); }
.cl-plates__n strong { color: var(--ms-ink-950); }
.cl-type { display: flex; gap: 4px; margin-top: 4px; }
.cl-type:empty { display: none; }
.cl-trap { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--ms-primary-600); white-space: nowrap; }
.cl-trap .ic { width: 12px; height: 12px; }
.cl-plates__none { font-size: 12px; color: var(--ms-text-light); white-space: nowrap; }
.ms-status.cl-awaiting { background: #fff; color: var(--ms-ink-700); box-shadow: inset 0 0 0 1px var(--ms-border-strong); }
.ms-status.cl-awaiting::before { background: var(--ms-text-light); }
.cl-scan-now { align-self: flex-start; }
.cl-table tr.is-awaiting td { background: #fcfcfd; }
.cl-table tr.is-flash td { animation: cl-flash 2.2s ease-out; }
@keyframes cl-flash { 0%, 40% { box-shadow: inset 0 0 0 1.5px var(--ms-accent-500); } 100% { box-shadow: none; } }

.cl-await {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 12px 10px 14px;
  border-radius: var(--ms-radius-md); background: #fff; border: 1px solid var(--ms-border-subtle); box-shadow: var(--ms-shadow-sm);
  width: fit-content; max-width: 100%;
}
.cl-await__icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ms-accent-700, #b06f06); background: #fff; box-shadow: inset 0 0 0 1px var(--ms-border); }
.cl-await__icon .ic { width: 16px; height: 16px; }
.cl-await__text { font-size: 13px; color: var(--ms-text-muted); }
.cl-await__text b { color: var(--ms-ink-950); }

.cl-log-id { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px; margin-bottom: 18px; border-radius: var(--ms-radius-md); background: var(--ms-bg-subtle); }
.cl-log-id__k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-text-light); }
.cl-log-id__v { font-size: 17px; font-weight: 800; color: var(--ms-ink-950); }
.cl-log-id__hint { font-size: 12px; color: var(--ms-text-light); }
.cl-site-pick { display: flex; gap: 8px; }
.cl-site-pick .ms-select { flex: 1; min-width: 0; }
.cl-site-pick__meta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ms-text-light); min-height: 16px; }
.cl-site-pick__meta .ic { width: 12px; height: 12px; }
.cl-duration { display: flex; align-items: center; height: 40px; font-size: 13px; color: var(--ms-text-muted); }
.cl-duration b { color: var(--ms-ink-950); margin-right: 4px; }
.cl-noplates { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px dashed var(--ms-border-strong); border-radius: var(--ms-radius-md); font-size: 12.5px; color: var(--ms-text-muted); }
.cl-noplates .ic { width: 18px; height: 18px; color: var(--ms-text-light); flex-shrink: 0; }
.cl-section__title .cl-linkbtn { font-size: 12px; text-transform: none; letter-spacing: 0; }

.cl-site { display: flex; align-items: center; gap: 10px; min-width: 230px; }
.cl-table .cell-sub { white-space: nowrap; }
.cl-site__code {
  font-family: var(--ms-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 6px; border-radius: 6px; color: var(--ms-primary-700); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 38%, transparent);
}
.cl-sites-table tr.is-paused .cl-site__code { background: var(--ms-bg-subtle); color: var(--ms-text-light); }
.cl-sites-table tr.is-paused .cell-strong { color: var(--ms-text-muted); }
.cl-sites-table tr.is-hot td { background: var(--ms-bg-hover); }
.cl-gps { font-family: var(--ms-font-mono); font-size: 12px; color: var(--ms-text-muted); white-space: nowrap; }
.cl-methods { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.cl-methods .ms-badge { font-weight: 600; }

.cl-sites-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.cl-sites-grid > * { min-width: 0; }
.cl-map-card { align-self: start; position: sticky; top: calc(var(--ms-topbar-h) + 16px); }
.cl-map { display: block; width: 100%; height: auto; border-radius: var(--ms-radius-md); background: var(--ms-bg-subtle); }
.cl-map__legend { margin-top: 12px; }
.cl-map text { font-family: var(--ms-font-body); }
.cl-map .cl-pin { cursor: pointer; }
.cl-map .cl-pin circle { fill: var(--ms-primary-500); stroke: #fff; stroke-width: 2.5; transition: fill var(--ms-dur-fast); }
.cl-map .cl-pin.is-paused circle { fill: #fff; stroke: var(--ms-text-light); stroke-width: 2; stroke-dasharray: 3 2; }
.cl-map .cl-pin text { font-size: 11.5px; font-weight: 700; fill: var(--ms-ink-950); paint-order: stroke; stroke: var(--ms-bg-subtle); stroke-width: 4px; stroke-linejoin: round; }
.cl-map .cl-pin.is-paused text { fill: var(--ms-text-light); }
.cl-map .cl-pin:hover circle, .cl-map .cl-pin.is-hot circle { fill: var(--ms-ink-950); }
.cl-map .cl-pin.is-hot .cl-pin__ring { opacity: 1; }
.cl-map .cl-pin__ring { fill: none !important; stroke: var(--ms-accent-500) !important; stroke-width: 2.5 !important; stroke-dasharray: none !important; opacity: 0; }
.cl-map .cl-pin:focus { outline: none; }
.cl-map .cl-pin:focus-visible .cl-pin__ring { opacity: 1; }
.cl-map__axis { font-size: 10px; fill: var(--ms-text-light); font-family: var(--ms-font-mono); }
.cl-map__scale { stroke: var(--ms-ink-950); stroke-width: 2; }
.cl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ms-primary-500); margin-right: 6px; vertical-align: -1px; }
.cl-dot--paused { background: #fff; border: 1.5px dashed var(--ms-text-light); }

.cl-drawer { width: min(480px, 100vw); }
.cl-drawer__heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-drawer__heading .ms-drawer__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-section__title { font-family: var(--ms-font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-text-light); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 8px; }
.cl-section__title span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.cl-drawer .ms-dl dd { white-space: normal; }
.cl-linkbtn { color: var(--ms-primary-600); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.cl-linkbtn:hover { color: var(--ms-primary-700); text-decoration: underline; }
.cl-totals { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ms-text-muted); }
.cl-totals strong { color: var(--ms-ink-950); font-family: var(--ms-font-display); font-size: 15px; }
.cl-mix .ms-split-bar { height: 10px; margin-bottom: 10px; }
.cl-mix__list { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 12.5px; }
.cl-mix__list .num { text-align: right; font-weight: 700; color: var(--ms-ink-950); font-variant-numeric: tabular-nums; }

.cl-plate-list { border: 1px solid var(--ms-border-subtle); border-radius: var(--ms-radius-md); overflow: hidden; }
.cl-plate { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--ms-border-subtle); color: inherit; }
.cl-plate:last-child { border-bottom: 0; }
/* A list row with no thumbnail (site panel: recent collections): text and status only. */
.cl-plate--text { grid-template-columns: minmax(0, 1fr) auto; }
.cl-plate--text .cl-plate__title { white-space: nowrap; }
a.cl-plate:hover, button.cl-plate:hover { background: var(--ms-bg-hover); color: inherit; }
button.cl-plate { width: 100%; text-align: left; }
.cl-plate__title { font-family: var(--ms-font-mono); font-weight: 700; color: var(--ms-ink-950); font-size: 13px; }
.cl-plate__sub { font-size: 11.5px; color: var(--ms-text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-plate__end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; }
.cl-plate__end strong { color: var(--ms-ink-950); }

.cl-site-form .ms-switch { margin-top: 2px; }

@media (max-width: 1100px) {
  .cl-sites-grid { grid-template-columns: minmax(0, 1fr); }
  .cl-map-card { position: static; width: 100%; max-width: 520px; }
}
@media (max-width: 640px) {
  .cl-site-form { grid-template-columns: 1fr; }
}

/* Site map (Leaflet, SiteMap.vue). Kept in its own stacking layer so Leaflet's panes stay
   under the top bar and the drawers. */
.cl-map-wrap { position: relative; }
.cl-leaflet { height: 380px; border-radius: var(--ms-radius-md); border: 1px solid var(--ms-border-subtle); isolation: isolate; font-family: var(--ms-font-body); }
.cl-map-off { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; border: 1px solid var(--ms-border-subtle); border-radius: var(--ms-radius-md); background: #fff; color: var(--ms-text-muted); font-size: 13px; text-align: center; z-index: 1; }
.cl-leaflet .leaflet-tooltip.cl-map-label { padding: 0; border: 0; background: none; box-shadow: none; font-size: 11.5px; font-weight: 700; color: var(--ms-ink-950); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.cl-leaflet .leaflet-tooltip.cl-map-label::before { display: none; }
.cl-leaflet .leaflet-popup-content-wrapper { border-radius: var(--ms-radius-md); box-shadow: var(--ms-shadow-lg); }
.cl-leaflet .leaflet-popup-content { margin: 12px 14px; min-width: 180px; font-size: 12.5px; line-height: 1.4; }
.cl-pop__title { margin-bottom: 8px; font-weight: 800; color: var(--ms-ink-950); }
.cl-pop__rows { display: grid; gap: 3px; margin-bottom: 10px; }
.cl-pop__rows div { display: flex; justify-content: space-between; gap: 12px; color: var(--ms-text-muted); }
.cl-pop__rows b { color: var(--ms-ink-950); }
.cl-leaflet .leaflet-control-attribution { font-size: 10px; }