/* showDetail.css — styles for the ASR detail dialog opened by showDetail.js
   Style: light gray canvas, white panels, thin row separators (no full grid),
   dark text, Fluent blue + green accents. All selectors are prefixed with
   .sdt- so the library does not collide with host-page styles. */

.sdt-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 22px 10px; overflow: auto;
  background: rgba(30, 30, 30, .45);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 14px; line-height: 1.45; color: #303030;
}
.sdt-overlay * { box-sizing: border-box; }

.sdt-dialog {
  width: 100%; max-width: 1000px; margin: 4px 0 22px;
  background: #ffffff;
  border: 1px solid #d8d8d8; border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

.sdt-head { display: flex; align-items: baseline; gap: 12px;
            padding: 14px 22px 10px; border-bottom: 1px solid #e2e2e2; }
.sdt-head h1 { font-size: 16px; font-weight: 600; margin: 0; }

.sdt-body { padding: 16px 22px 20px; }

.sdt-foot { display: flex; justify-content: flex-end; gap: 10px;
            padding: 10px 22px; border-top: 1px solid #e2e2e2; }

h2.sdt-h { font-size: 12px; margin: 20px 0 4px; font-weight: 600;
       text-transform: uppercase; letter-spacing: .06em; color: #707070; }
h2.sdt-h:first-of-type { margin-top: 4px; }

.sdt-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sdt-bar .sdt-sep { width: 1px; height: 22px; background: #d8d8d8; margin: 0 6px; }

/* buttons + mode picks */
.sdt-overlay button, .sdt-overlay label.sdt-pick {
  padding: 5px 14px; border: 1px solid #c8c8c8; border-radius: 3px;
  background: #fafafa; color: #303030; cursor: pointer; font: inherit;
}
.sdt-overlay button:hover, .sdt-overlay label.sdt-pick:hover {
  border-color: #0070f0; color: #0070f0; }
.sdt-overlay button:active { background: #eef5fe; }
.sdt-overlay label.sdt-pick.sdt-mode { display: inline-flex; align-items: center; gap: 7px; }
.sdt-overlay label.sdt-pick.sdt-mode input { accent-color: #0070f0; }
.sdt-overlay label.sdt-pick.sdt-mode.sdt-on {
  border-color: #0070f0; color: #0050b0; background: #eef5fe; font-weight: 600; }

/* footer buttons: primary action + close */
.sdt-overlay .sdt-btn-primary {
  background: #0070f0; border-color: #0070f0; color: #ffffff; font-weight: 600; }
.sdt-overlay .sdt-btn-primary:hover { background: #005fd0; border-color: #005fd0; color: #ffffff; }
.sdt-overlay .sdt-btn-primary:active { background: #004ab0; }

/* flat tables: thin row separators only */
.sdt-overlay table { border-collapse: collapse; width: 100%; }
.sdt-overlay th, .sdt-overlay td { border: 0; border-bottom: 1px solid #e2e2e2;
  padding: 7px 10px; text-align: left; }
.sdt-overlay thead th { border-bottom: 2px solid #c8c8c8; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: #505050; background: #fafafa; }
.sdt-overlay tbody tr:last-child td { border-bottom: 0; }
.sdt-overlay td.sdt-num, .sdt-overlay th.sdt-num { text-align: right; font-variant-numeric: tabular-nums; }

/* label/value rows (Emission) */
.sdt-kv { border-top: 1px solid #e2e2e2; }
.sdt-kv .sdt-cell { display: flex; align-items: baseline; gap: 14px;
  border-bottom: 1px solid #e2e2e2; padding: 7px 10px; }
.sdt-kv .sdt-k { flex: 0 0 110px; font-size: 12px; color: #707070;
  text-transform: uppercase; letter-spacing: .05em; }
.sdt-kv .sdt-v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* two-column label/value grid (Receptor Information) */
.sdt-overlay table.sdt-asr { width: 100%; table-layout: fixed; }
.sdt-overlay table.sdt-asr td { border: 0; border-bottom: 1px solid #e2e2e2; padding: 7px 12px; }
.sdt-overlay table.sdt-asr tr:last-child td { border-bottom: 0; }
.sdt-overlay table.sdt-asr td.sdt-k { width: 110px; font-size: 12px; color: #707070;
  text-transform: uppercase; letter-spacing: .05em; }
.sdt-overlay table.sdt-asr td.sdt-v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* AQO exceedance highlight (Total row only) */
.sdt-overlay tr.sdt-total td.sdt-over { color: #b91c1c; font-weight: 700; background: #fdf0f0; }

/* SIL mode: rows excluded from the result */
.sdt-overlay tr.sdt-sil-off td { color: #a8a8a8; }
.sdt-overlay tr.sdt-sil-off td:first-child::before { background: #c0c0c0 !important; }
.sdt-overlay tr.sdt-sil-off input.sdt-ratio { color: #b0b0b0; border-color: #e0e0e0; }

/* ratio float input */
.sdt-overlay input.sdt-ratio { width: 88px; padding: 5px 8px; text-align: right; font: inherit;
  border: 1px solid #c8c8c8; border-radius: 3px; background: #ffffff; color: #303030; }
.sdt-overlay input.sdt-ratio:focus { outline: none; border-color: #0070f0;
  box-shadow: 0 0 0 2px rgba(0,112,240,.25); }

.sdt-overlay .sdt-muted { color: #808080; font-size: 12px; }
.sdt-overlay .sdt-kind-bg td, .sdt-overlay .sdt-kind-sc td { color: #606060; }
.sdt-overlay .sdt-kind-bg td:first-child::before,
.sdt-overlay .sdt-kind-sc td:first-child::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; background: #20a040; margin-right: 8px; }
.sdt-overlay .sdt-kind-model td:first-child::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; background: #0070f0; margin-right: 8px; }
.sdt-overlay tr.sdt-total td { font-weight: 700; background: #eef5fe; color: #0050b0; }
.sdt-overlay .sdt-hint { margin-top: 8px; }
.sdt-overlay .sdt-err { color: #b91c1c; }
.sdt-overlay .sdt-over-word { color: #b91c1c; }
.sdt-overlay th .sdt-sub { font-weight: 400; text-transform: none;
  color: #808080; font-size: 12px; }

/* ratio / tier1 inputs: harden against host-page CSS (appearance resets,
   user-select, pointer-events) and against host mousedown/mouseup handlers
   that steal focus — keep the number box editable. */
.sdt-overlay input.sdt-ratio,
.sdt-overlay input.sdt-tier1 {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: auto;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  pointer-events: auto;
  touch-action: manipulation;
}
.sdt-overlay input.sdt-ratio::-webkit-outer-spin-button,
.sdt-overlay input.sdt-ratio::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }