/* ============================================================
   components.css — 1:1 from original LiveScatter3D/wwwroot/index.html
   ============================================================ */

/* ── Card ── */
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; }

/* ── Buttons ── */
.btn {
  background: #f3f6fa; color: #44505c;
  border: 1px solid #cfd8e3; border-radius: 4px;
  padding: 5px 10px; font-size: 12px;
  cursor: pointer; transition: background .12s; white-space: nowrap;
}
.btn:hover { background: #e8eef5; color: #17212b; }
.btn.active { background: #e7f1fb; color: var(--brand); border-color: var(--brand); }
.btn-small {
  font-size: 11px; padding: 3px 7px; border-radius: 3px;
  background: #f5f5f5; color: #555; border: 1px solid #d0d0d0; cursor: pointer;
}
.btn-small.active { background: #e8f0fb; color: #0078d4; border-color: #0078d4; }
.btn-primary {
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  border-radius: 4px; padding: 6px 14px; font-size: 12px; cursor: pointer;
  transition: background .12s;
}
.btn-primary:hover { background: #106ebe; }
.btn:disabled, .btn-primary:disabled { opacity: .45; cursor: not-allowed; }

/* ── Slider ── */
.sl-group { display: flex; align-items: center; gap: 6px; }
.sl-group label { font-size: 11px; color: #888; white-space: nowrap; }
input[type=range] {
  -webkit-appearance: none; width: 90px; height: 3px;
  border-radius: 2px; background: #d0d0d0; outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px;
  border-radius: 50%; background: #0078d4; cursor: pointer;
}
.sl-val { font-size: 11px; color: #888; min-width: 30px; text-align: right; }

/* ── Channel toggle ── */
.ch-tog {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
  font-size: 11px; font-weight: 600; user-select: none;
  border: 1px solid transparent;
  transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.ch-tog.off { background: #f0f0f0 !important; border-color: #d0d0d0 !important; color: #aaa !important; }
.ch-tog.off .ch-tog-line { background: #ccc !important; }
#ch-toggles:has(.ch-tog:hover) .ch-tog:not(:hover) { opacity: .3; }
#ch-toggles:has(.ch-tog:hover) .ch-tog:hover { opacity: 1; }

/* ── Toggle switch ── */
.toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: #d0d0d0; border-radius: 22px; transition: background .2s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; left: 3px; top: 3px;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background: #0078d4; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ── Pin row ── */
.pin-row {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 0; border-bottom: 1px solid #f5f5f5; font-size: 11px;
}
.pin-row:last-child { border-bottom: none; }
.pin-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pin-name { width: 24px; font-weight: 600; color: #333; }
.pin-a    { margin-left: auto; font-weight: 600; color: #1a1a1a; min-width: 46px; text-align: right; }
.pin-w    { color: #888; min-width: 46px; text-align: right; }
.pin-star { color: #0078d4; font-size: 9px; }

/* ── Pin card ── */
.pin-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; }
.pin-card-hdr { display: flex; align-items: center; gap: 6px; padding: 6px 10px 2px; flex-shrink: 0; }
.pc-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pc-name { font-size: 12px; font-weight: 700; }
.pc-live { margin-left: auto; font-size: 12px; color: #4f5a66; }
.pc-tools { display: flex; align-items: center; gap: 4px; padding: 0 10px 3px; flex-shrink: 0; }
.pc-scale-lbl { font-size: 10px; color: #0078d4; cursor: pointer; }
.pc-scale-lbl:hover { text-decoration: underline; }
.pc-sep { color: #ccc; font-size: 10px; }
.pc-mini { flex: 1; min-height: 0; height: 100%; width: 100%; }
.pc-peaks { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 10px 6px; flex-shrink: 0; border-top: 1px solid #f0f0f0; }
.pc-peak-item { display: flex; flex-direction: column; gap: 1px; }
.pc-peak-lbl  { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .07em; }
.pc-peak-val  { font-size: 14px; font-weight: 700; color: #1a1a1a; }

/* ── Rolling cells ── */
.roll-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 0; border-radius: 6px;
  background: #fafafa; border: 1px solid #ebebeb;
  flex: 1; min-width: 0; cursor: default;
  position: relative; overflow: hidden;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.roll-cell::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: #e0e0e0; border-radius: 7px 7px 0 0; transition: background .18s;
}
.roll-cell:hover { background: #f0f5ff; border-color: #c5d8f5; box-shadow: 0 1px 6px rgba(0,100,220,.07); }
.roll-cell:hover::before { background: #90b8f0; }
.roll-cell.highlight { background: #eef4ff; border-color: #0078d4; }
.roll-cell.highlight::before { background: #0078d4; }
.roll-cell.no-data { opacity: .55; }
.roll-lbl { font-size: 9px; font-weight: 700; color: #b0b0b0; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; white-space: nowrap; }
.roll-cell.highlight .roll-lbl { color: #0078d4; }
.roll-w { font-size: 12px; font-weight: 700; color: #1a1a1a; line-height: 1; white-space: nowrap; }
.roll-cell.no-data .roll-w { color: #d0d0d0; }
.roll-a { font-size: 9px; color: #999; margin-top: 2px; white-space: nowrap; }
.roll-cell.no-data .roll-a { color: #e0e0e0; }
.roll-divider { width: 1px; height: 26px; background: #ebebeb; flex-shrink: 0; align-self: center; margin: 0 2px; }

/* ── State banner / badge ── */
.diag-kpi-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  border: 1px solid #d0d0d0; color: #666; background: #f7f7f7;
}
.state-banner {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  border-radius: 4px; padding: 4px 8px; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
}
.state-banner.stable { background: #e6f4e6; color: #107c10; border: 1px solid #8bcb8b; }
.state-banner.watch  { background: #fff3e0; color: #f28e2b; border: 1px solid #f3c57a; }
.state-banner.fault  { background: #fde8e8; color: #d13438; border: 1px solid #f1a0a0; }

/* ── Fault LED ── */
.fault-led { width: 9px; height: 9px; border-radius: 50%; background: #d5d5d5; transition: background .2s, box-shadow .2s; }
.fault-led.active  { background: #d13438; box-shadow: 0 0 7px rgba(209,52,56,.55); }
.fault-led.cleared { background: #107c10; }
.fault-item {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center;
  gap: 6px; padding: 6px 8px; border: 1px solid #ececec; border-radius: 5px;
  background: #fafafa; font-size: 12px;
}
.fault-item-name { color: #2e2e2e; font-weight: 600; }
.fault-val { font-size: 11px; font-weight: 700; color: #5a5a5a; letter-spacing: .04em; }
.fault-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.fault-actions { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ── Summary rows (overview) ── */
.ov-summary-grid { display: flex; flex-direction: column; gap: 0; padding: 0; }
.ov-summary-row {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 0; border-bottom: 1px solid #f5f5f5; font-size: 10px;
}
.ov-summary-row:last-child { border-bottom: none; }
.ov-summary-sep { height: 1px; background: #e8e8e8; margin: 3px 0; }
.ov-summary-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .07em; }
.ov-summary-value { margin-left: auto; min-width: 60px; font-size: 10px; font-weight: 600; color: #1a1a1a; text-align: right; white-space: nowrap; }

/* ── Diag info table ── */
.diag-info-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.diag-info-table tr { border-bottom: 1px solid #f0f0f0; }
.diag-info-table tr:last-child { border-bottom: none; }
.diag-info-table td { padding: 5px 4px; }
.diag-info-table td:first-child { color: #6f7883; font-weight: 600; white-space: nowrap; }
.diag-info-table td:last-child { color: #1a1a1a; font-weight: 700; font-family: 'Cascadia Code','Consolas',monospace; text-align: right; }

/* ── Settings ── */
.settings-cat-header { display: flex; align-items: center; gap: 14px; padding: 16px 18px 12px; border-bottom: 1px solid #e8e8e8; flex-shrink: 0; }
.settings-cat-icon { font-family: 'Segoe MDL2 Assets'; font-size: 22px; color: #0078d4; width: 36px; text-align: center; }
.settings-cat-title { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.settings-cat-sub   { font-size: 11px; color: #888; margin-top: 2px; }
.page-layout { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.page-section { display: flex; flex-direction: column; gap: 8px; }
.page-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #888; border-bottom: 1px solid #e8e8e8; padding-bottom: 5px; }
.page-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; gap: 12px; }
.page-row-label { display: flex; flex-direction: column; gap: 2px; }
.page-row-label span:first-child { font-size: 13px; color: #1a1a1a; }
.page-row-label span:last-child  { font-size: 11px; color: #888; }

/* ── Fan control ── */
.fan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fan-field { display: flex; flex-direction: column; gap: 3px; }
.fan-field-label { font-size: 8px; color: #888; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.fan-input { width: 100%; padding: 2px 6px; height: 24px; border: 1px solid #d0d0d0; border-radius: 4px; font-size: 14px; font-weight: 700; color: #1a1a1a; background: #fff; }
.fan-input[disabled] { background: #f4f4f4; color: #9a9a9a; border-color: #e0e0e0; }
.fan-mode-row { display: flex; gap: 6px; }
.fan-mode-row .btn { flex: 1; padding: 3px 6px; min-height: 24px; font-size: 12px; font-weight: 700; }

/* ── Alarm ── */
.alarm-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 10px; min-height: 0; }
.alarm-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.alarm-card-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #888; padding: 0 2px; }
.alarm-limits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.alarm-limit-item { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; padding: 6px; }
.alarm-limit-item label { font-size: 10px; color: #666; white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.alarm-limit-item input, .alarm-limit-item select { width: 100%; padding: 3px 6px; border: 1px solid #d0d0d0; border-radius: 4px; font-size: 12px; }
.alarm-reset-btn { border: 1px solid #d0d0d0; background: #f7f7f7; color: #666; border-radius: 4px; font-size: 10px; padding: 1px 6px; cursor: pointer; }
.alarm-reset-btn:hover { background: #ececec; color: #333; }
.alarm-matrix { display: flex; flex-direction: column; gap: 5px; }
.alarm-head, .alarm-row { display: grid; grid-template-columns: 1.6fr 72px 72px 72px 72px; align-items: center; gap: 6px; }
.alarm-head { padding: 0 8px; font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .08em; }
.alarm-row { padding: 6px 8px; background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; }
.alarm-fault-name { display: flex; flex-direction: column; gap: 1px; }
.alarm-fault-name span:first-child { font-size: 12px; color: #1a1a1a; font-weight: 600; }
.alarm-fault-name span:last-child  { font-size: 10px; color: #888; }
.alarm-cell-center { display: flex; justify-content: center; }
@media (max-width: 1180px) { .alarm-layout { grid-template-columns: 1fr; } }

/* ── Export ── */
.export-card-new { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; }
.export-card-new:hover { background: #f0f4fb; border-color: #c5d8f5; box-shadow: 0 1px 6px rgba(0,100,220,.07); }
.export-card-icon { font-family: 'Segoe MDL2 Assets'; font-size: 20px; color: #0078d4; width: 32px; text-align: center; flex-shrink: 0; }
.export-card-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.export-card-title { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.export-card-desc  { font-size: 11px; color: #888; }
.export-card-arrow { font-family: 'Segoe MDL2 Assets'; font-size: 11px; color: #aaa; flex-shrink: 0; }

/* ── Channel visibility grid ── */
.ch-vis-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 2px; }
.ch-vis-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; cursor: pointer; user-select: none; transition: background .12s; }
.ch-vis-item:hover { background: #f8f8f8; }
.ch-vis-item.off { opacity: .4; }
.ch-vis-dot { width: 9px; height: 9px; border-radius: 50%; }
.ch-vis-name { font-size: 13px; font-weight: 600; }
.ch-vis-chk { margin-left: auto; font-size: 14px; color: #0078d4; }

/* ── Trigger btn ── */
.trigger-btn { width: 100%; border: 1px solid #0d6ebf; background: #0078d4; color: #fff; border-radius: 4px; padding: 7px 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .12s; }
.trigger-btn:hover { background: #106ebe; }
.trigger-btn:disabled { background: #efefef; border-color: #ddd; color: #aaa; cursor: not-allowed; }
.trigger-btn.ready { background: #107c10; border-color: #107c10; }
.trigger-btn.ready:hover { background: #0e6a0e; }

/* ── Test cards ── */
.test-layout { display: grid; grid-template-columns: 1fr; gap: 10px; }
.test-card { border: 1px solid #e3e8ef; border-radius: 8px; background: #fff; overflow: hidden; }
.test-card-head { display: flex; align-items: center; gap: 0; padding: 9px 10px; border-bottom: 1px solid #edf1f5; background: linear-gradient(180deg,#fafcff 0%,#f5f8fc 100%); }
.test-card-title { font-size: 12px; font-weight: 700; color: #2a3440; letter-spacing: .04em; text-transform: uppercase; }
.test-card-sub { font-size: 12px; color: #6a7480; margin-top: 1px; }
.test-card-body { padding: 10px; }
.test-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.test-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.test-divider { height: 1px; background: #edf1f5; margin: 8px 0; }
.test-help { font-size: 11px; color: #7a8591; line-height: 1.35; }
.trigger-warning { margin-top: 6px; font-size: 11px; line-height: 1.35; color: #b35f00; background: #fff7ea; border: 1px solid #f3d6a8; border-radius: 4px; padding: 5px 7px; }
.trigger-row { display: grid; grid-template-columns: 82px 1fr auto; gap: 8px; align-items: center; margin-bottom: 9px; }
.trigger-row label { font-size: 12px; color: #666; font-weight: 600; }
.trigger-row select, .trigger-row input[type=number] { width: 100%; padding: 5px 8px; border: 1px solid #d0d0d0; border-radius: 4px; background: #fff; font-size: 12px; color: #1a1a1a; }
.trigger-unit { font-size: 12px; color: #888; min-width: 26px; text-align: right; }
.display-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 8px; margin-bottom: 10px; }
.display-row label { font-size: 12px; color: #666; font-weight: 600; }
.display-row input[type=range] { width: 100%; }
.display-btn-group { display: flex; gap: 6px; }
.display-row.compact { grid-template-columns: 120px 1fr; }
@media (max-width: 1200px) { .test-grid-2 { grid-template-columns: 1fr; } }