/**
 * 5G NR CSI-RS Resource Grid Visualizer - scoped styles
 * 3GPP TS 38.211 Table 7.4.1.5.3-1 | max-width 800px | Courier New | dark theme
 */
#csi-rs-root {
  max-width: 800px;
  margin: 0 auto;
  background: #0a0a0a;
  color: #e5e5e5;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  padding: 8px;
  box-sizing: border-box;
}

#csi-rs-root * {
  box-sizing: border-box;
}

/* Control panel */
.csi-rs-control-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 10px;
  background: #141414;
  border: 1px solid #333;
  border-radius: 4px;
}

.csi-rs-control-panel label,
#csi-rs-root .csi-rs-param-row label,
#csi-rs-root .csi-rs-control-panel .csi-rs-param-row label {
  color: #fff !important;
  white-space: nowrap;
}

#csi-rs-root select,
#csi-rs-root input[type="number"],
#csi-rs-root input[type="text"] {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  padding: 4px 6px;
  background: #1e1e1e;
  border: 1px solid #444;
  color: #e5e5e5;
  border-radius: 2px;
}

#csi-rs-root input[type="number"] {
  width: 3.5em;
}

#csi-rs-root #csi-rs-first-symbol {
  width: 4.9em;
}

#csi-rs-root #csi-rs-first-symbol2 {
  width: 4.55em;
}

#csi-rs-root input[type="text"] {
  width: 8em;
  min-width: 80px;
}

#csi-rs-root input.csi-rs-12dig {
  width: 12ch;
  min-width: 96px;
  max-width: 12ch;
}

.csi-rs-control-panel-alloc .csi-rs-param-row {
  flex-wrap: wrap;
}

/* Tabs container */
.csi-rs-tabs-container {
  margin-top: 12px;
  margin-bottom: 12px;
}

.csi-rs-tabs-header {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.csi-rs-tab-btn {
  padding: 6px 10px;
  cursor: pointer;
  border: 1px solid #444;
  border-bottom: none;
  background: #2a2a2a;
  color: #b0b0b0;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  border-radius: 4px 4px 0 0;
}

.csi-rs-tab-btn:hover {
  background: #333;
  color: #e5e5e5;
}

.csi-rs-tab-btn.active {
  background: #1a1a1a;
  color: #fff;
  font-weight: bold;
  border-color: #555;
  margin-bottom: -1px;
  padding-bottom: 7px;
}

.csi-rs-tab-btn.inactive-tab {
  color: #555;
}

/* 32-port thumbnail gallery: all grids shown always; tabs used for auto-scroll */
#csi-rs-root .csi-rs-port-gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  background: #000;
  padding: 12px;
  max-height: 580px;
  overflow-y: auto;
  border: 1px solid #333;
  border-radius: 4px;
}

/* UE tab: only 4 resource grids (ports 3016–3019), center-aligned; hide the rest */
#csi-rs-root.csi-rs-ue-tab-active .csi-rs-port-gallery-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

#csi-rs-root.csi-rs-ue-tab-active .csi-rs-port-gallery-container .csi-rs-port-card {
  display: none;
}

/* UE tab: show first 4 cards (UE Rx Antenna 0–3); visibility also toggled in JS */
#csi-rs-root.csi-rs-ue-tab-active .csi-rs-port-gallery-container #card_3000,
#csi-rs-root.csi-rs-ue-tab-active .csi-rs-port-gallery-container #card_3001,
#csi-rs-root.csi-rs-ue-tab-active .csi-rs-port-gallery-container #card_3002,
#csi-rs-root.csi-rs-ue-tab-active .csi-rs-port-gallery-container #card_3003 {
  display: block;
}

#csi-rs-root.csi-rs-ue-tab-active .csi-rs-legend,
#csi-rs-root.csi-rs-ue-tab-active .csi-rs-ref-section,
#csi-rs-root.csi-rs-ue-tab-active .csi-rs-note {
  display: none;
}

#ue-rx-container {
  display: none;
  margin-top: 16px;
}

#csi-rs-root.csi-rs-ue-tab-active #ue-rx-container {
  display: block;
}

#ue-channel-matrix-wrapper {
  margin-top: 20px;
  padding: 15px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  overflow-x: auto;
}

#ue-channel-matrix-wrapper .csi-rs-phase-row {
  margin-bottom: 16px;
}

#ue-channel-matrix-wrapper .csi-rs-phase-row label {
  color: #fff !important;
}

#ue-channel-matrix-wrapper #channel-phase-slider {
  width: 120px;
  vertical-align: middle;
}

#ue-channel-matrix-wrapper #phase-display {
  margin-left: 8px;
  color: #0ea5e9;
  font-family: "Courier New", Courier, monospace;
  min-width: 2.5em;
}

#ue-channel-matrix-wrapper h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #94a3b8;
  font-size: 14px;
}

.ue-matrix-container {
  margin-top: 12px;
  padding: 15px;
  background: #0a0a0a;
  border: 1px solid #444;
  border-radius: 4px;
  overflow-x: auto;
}

.ue-matrix-container h4 {
  margin-top: 0;
  margin-bottom: 10px;
}

.channel-matrix-table {
  border-collapse: collapse;
  width: 100%;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  margin: 0 auto;
  color: #888;
}

.channel-matrix-table th,
.channel-matrix-table td {
  border: 1px solid #333;
  padding: 6px;
  text-align: center;
  min-width: 60px;
}

.channel-matrix-table th {
  background: #111;
  color: #888;
}

.channel-matrix-table .matrix-cell {
  color: #22c55e;
  font-weight: bold;
}

#csi-rs-root .csi-rs-port-card {
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 5px;
  border-radius: 4px;
  text-align: center;
}

#csi-rs-root .csi-rs-port-card.inactive {
  opacity: 0.35;
  filter: grayscale(1);
}

#csi-rs-root .csi-rs-port-card .csi-rs-port-title {
  font-size: 10px;
  color: #0fa;
  margin-bottom: 4px;
  font-family: "Courier New", Courier, monospace;
}

#csi-rs-root .csi-rs-port-card .csi-rs-group-tag {
  color: #888;
  font-style: italic;
  font-size: 9px;
}

#csi-rs-root .csi-rs-port-card .csi-rs-mini-grid {
  width: 100%;
  height: auto;
  display: block;
  background: #050505;
  border-radius: 2px;
}

/* Legend */
.csi-rs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
  padding: 8px;
  font-size: 11px;
  color: #94a3b8;
}

.csi-rs-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.csi-rs-legend .csi-rs-swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid #444;
}

/* Reference table */
.csi-rs-ref-section {
  margin-top: 16px;
  padding: 10px;
  background: #141414;
  border: 1px solid #333;
  border-radius: 4px;
}

.csi-rs-ref-section h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #0fa;
}

.csi-rs-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}

.csi-rs-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.csi-rs-ref-table th,
.csi-rs-ref-table td {
  border: 1px solid #333;
  padding: 4px 6px;
  text-align: left;
  background: #1a1a1a;
  color: #ccc;
}

.csi-rs-ref-table th {
  background: #252525;
  color: #0fa;
  font-weight: bold;
}

.csi-rs-ref-table tr.selected-row td {
  background: #2d3d1a;
  color: #b8e986;
}

.csi-rs-ref-table tr:hover td {
  background: #222;
}

/* CDM group index j column: fixed width with wrapping */
#csi-rs-root .csi-rs-ref-table th:nth-child(6),
#csi-rs-root .csi-rs-ref-table td:nth-child(6) {
  width: 100px;
  max-width: 100px;
  overflow-wrap: break-word;
  word-break: break-all;
}

.csi-rs-note {
  margin-top: 12px;
  font-size: 11px;
  color: #666;
}

.csi-rs-param-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.csi-rs-param-row label { margin-right: 2px; }

.csi-rs-param-row .csi-rs-param-row-push-right { margin-left: auto; }

/* Calculation panel row: infobox + polar subplot on the right */
#csi-rs-root .csi-rs-calc-panel-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 10px 0;
}

#csi-rs-root .csi-rs-calc-panel-row #csi-rs-infobox {
  flex: 1;
  min-width: 0;
}

#csi-rs-root #csi-rs-polar-subplot-wrap {
  flex-shrink: 0;
  width: 100px;
  min-height: 216px;
  padding: 8px;
  margin-right: 10px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  text-align: center;
}

#csi-rs-root #csi-rs-polar-subplot-wrap #csi-rs-polar-canvas {
  display: block;
  margin: 0 auto 4px;
  background: #0d0d0d;
  border-radius: 4px;
}

#csi-rs-root #csi-rs-polar-subplot-wrap #csi-rs-polar-label {
  font-size: 10px;
  color: #94a3b8;
  font-family: "Courier New", Courier, monospace;
}

/* Real-time calculation infobox */
#csi-rs-root #csi-rs-infobox {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 15px;
  border: 1px solid #333;
  border-left: 5px solid #0ea5e9;
  font-family: "Courier New", Courier, monospace;
  margin: 0;
  font-size: 12px;
}

#csi-rs-root #csi-rs-infobox h4 {
  color: #0ea5e9;
  margin: 0 0 10px 0;
  font-size: 13px;
}

#csi-rs-root #csi-rs-infobox.validation-error,
#csi-rs-root #csi-rs-infobox.error-state {
  border-left-color: #ef4444;
  background: #450a0a;
  color: #fca5a5;
}

#csi-rs-root #csi-rs-infobox .csi-rs-infobox-error {
  color: #fca5a5 !important;
  background: #450a0a !important;
  border: 2px solid #ef4444 !important;
  padding: 15px;
  margin: 10px 0;
  font-weight: bold;
  border-radius: 4px;
  border-left: 4px solid #ef4444;
  animation: csi-rs-pulse-red 2s infinite;
}

@keyframes csi-rs-pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

#csi-rs-root #csi-rs-infobox .csi-rs-formula-block p {
  margin: 5px 0;
  font-size: 12px;
}

/* Invalid config: dim the port gallery */
#csi-rs-root .csi-rs-port-gallery-container.grid-error {
  position: relative;
  opacity: 0.25;
  pointer-events: none;
}

#csi-rs-root .csi-rs-port-gallery-container.grid-error .csi-rs-mini-grid {
  filter: grayscale(1) opacity(0.5);
}

#csi-rs-root .csi-rs-port-gallery-container.grid-error::after {
  content: "Invalid config — check infobox";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #f87171;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
}

.csi-rs-param-row input#k0 { width: 3em; }
.csi-rs-param-row input#l0 { width: 3em; }

/* Scrollbars: dark theme, blended with #csi-rs-root */
#csi-rs-root {
  scrollbar-width: thin;
  scrollbar-color: #444 #252525;
}
#csi-rs-root .csi-rs-port-gallery-container,
#csi-rs-root .csi-rs-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: #444 #252525;
}
#csi-rs-root ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#csi-rs-root ::-webkit-scrollbar-track {
  background: #252525;
  border-radius: 4px;
}
#csi-rs-root ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
  border: 2px solid #252525;
}
#csi-rs-root ::-webkit-scrollbar-thumb:hover {
  background: #555;
}
#csi-rs-root ::-webkit-scrollbar-thumb:active {
  background: #666;
}
#csi-rs-root ::-webkit-scrollbar-corner {
  background: #252525;
}