/* ============================================================
   SD-Link — Orientierungs-Helper (Winkeladapter) · Styles
   Port aus docs/handoff_orientation_helper/code/orientation.css.
   Nutzt die SD-Link-Design-Tokens (sdlink-tokens.css).
   Farb-Semantik:
   - Amber  = waehlbare/normale Adapter-Option
   - Navy   = vom Kunden GEWAEHLTE, funktionierende Variante
   - Rot    = Konflikt (Antennenbuchse) / blockiert
   - Adapter gestrichelt = Position nicht moeglich
   ============================================================ */

/* Standard-Variations-UI weicht dem gefuehrten Helper. */
form.variations_form.sd-om-form table.variations,
form.variations_form:has(.sd-om) table.variations { display: none; }

.sd-om { margin: 0 0 18px; border: 1px solid var(--sd-line-soft); border-radius: var(--r-lg); padding: 18px; background: #fff; }
.sd-om.is-error { border-color: var(--sd-danger); }
.sd-om [hidden] { display: none !important; }
.sd-om-head { display: flex; align-items: baseline; gap: 10px; }
.sd-om-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--fg-1); }
.sd-om-req { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sd-amber-600); }
.sd-om-intro { margin: 6px 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--fg-2); }

.sd-om-step { margin-top: 16px; }
.sd-om-step.is-locked { opacity: .5; }
.sd-om-step:not(.is-locked) .sd-om-locked-hint { display: none; }
.sd-om-step-h { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--sd-navy-700); margin-bottom: 10px; }
.sd-om-step-h .n {
  width: 20px; height: 20px; border-radius: 999px; flex: none;
  background: var(--sd-navy-700); color: #fff; font-family: var(--font-mono); font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}

.sd-om-models { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sd-om-dirs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Modellkarten — visuelle Wiedererkennung (Foto + Specs) */
.sd-om-model {
  position: relative; display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid var(--sd-line); border-radius: var(--r-md); overflow: hidden;
  padding: 0; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.sd-om-model:hover { border-color: var(--sd-navy-400); }
.sd-om-model:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.sd-om-model .ph {
  display: flex; align-items: center; justify-content: center;
  height: 112px; background: var(--sd-navy-050); padding: 8px; border-bottom: 1px solid var(--sd-line-soft);
}
.sd-om-model .ph img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sd-om-model .ph-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--sd-navy-400); }
.sd-om-model .ph-empty em { font-style: normal; font-size: 11px; color: var(--fg-3); }
.sd-om-model .bd { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.sd-om-model .nm { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-weight: 700; font-size: 15px; color: var(--fg-1); }
.sd-om-model .nm .tag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--sd-navy-700); background: var(--sd-navy-100); border-radius: 999px; padding: 2px 8px;
}
.sd-om-model .specs { display: flex; flex-direction: column; gap: 3px; }
.sd-om-model .specs .sp { position: relative; padding-left: 13px; font-size: 12px; color: var(--fg-2); line-height: 1.35; }
.sd-om-model .specs .sp::before { content: ''; position: absolute; left: 2px; top: 6px; width: 4px; height: 4px; border-radius: 1px; background: var(--sd-amber-600); transform: rotate(45deg); }
.sd-om-model .recog { font-size: 11.5px; line-height: 1.4; color: var(--fg-3); margin-top: 1px; }
.sd-om-model .tick {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 999px; z-index: 2;
  background: var(--sd-amber-600); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6); transition: all var(--dur-fast) var(--ease-out); box-shadow: var(--shadow-1);
}
.sd-om-model.is-active { border-color: var(--sd-amber-600); box-shadow: 0 0 0 1.5px var(--sd-amber-600); }
.sd-om-model.is-active .ph { background: var(--sd-amber-100); }
.sd-om-model.is-active .tick { opacity: 1; transform: none; }
.sd-om-model.is-unsure .ph { background: var(--sd-navy-050); }

/* Ausrichtungskarten (Schritt 2) — schematische Seitenansicht */
.sd-om-dir {
  position: relative; display: flex; flex-direction: column; text-align: left; cursor: pointer; background: #fff;
  border: 1.5px solid var(--sd-line); border-radius: var(--r-md); overflow: hidden;
  padding: 0; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-fast);
}
.sd-om-dir:hover:not([disabled]) { border-color: var(--sd-navy-400); }
.sd-om-dir:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.sd-om-dir[disabled] { cursor: not-allowed; }
.sd-om-dir .diag {
  display: flex; align-items: center; justify-content: center;
  height: 124px; padding: 8px 10px; background: var(--sd-navy-050); border-bottom: 1px solid var(--sd-line-soft); overflow: hidden;
}
.sd-om-dir .diag img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.sd-om-diag { width: 100%; height: auto; display: block; }
.sd-om-dir .txt { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px 12px; }
.sd-om-dir .nm { font-weight: 700; font-size: 14px; color: var(--fg-1); }
.sd-om-dir .sb { font-size: 11.5px; line-height: 1.3; color: var(--fg-3); }
.sd-om-dir .tick {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 999px; z-index: 2;
  background: var(--sd-amber-600); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6); transition: all var(--dur-fast) var(--ease-out); box-shadow: var(--shadow-1);
}
.sd-om-dir.is-active { border-color: var(--sd-amber-600); box-shadow: 0 0 0 1.5px var(--sd-amber-600); }
.sd-om-dir.is-active .diag { background: var(--sd-amber-100); }
.sd-om-dir.is-active .tick { opacity: 1; transform: none; }
.sd-om-locked-hint { margin: 8px 0 0; font-size: 12px; color: var(--fg-3); }
.sd-om-dir.is-blocked { border-color: var(--sd-danger); }
.sd-om-dir.is-blocked .diag { background: var(--sd-warning-bg); }
.sd-om-dir.is-blocked.is-active { box-shadow: 0 0 0 1.5px var(--sd-danger); border-color: var(--sd-danger); }
.sd-om-dir .nogo { display: none; margin-left: 7px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--sd-danger); background: var(--sd-warning-bg); border-radius: 999px; padding: 1px 7px; }
.sd-om-dir.is-blocked .nogo { display: inline-block; }
.sd-om-dir.is-active.is-blocked .tick { background: var(--sd-danger); }

/* SVG-Zustaende: Amber = Option, Navy = gewaehlt, gestrichelt+rot = blockiert */
.sd-om-dir { --om-ac: #d76b14; --om-tint: rgba(215, 107, 20, .12); --om-ac2: #ee8127; }
.sd-om-dir.is-active:not(.is-blocked) { --om-ac: #163558; --om-tint: rgba(22, 53, 88, .12); --om-ac2: #5384b6; }
.sd-om-diag .om-adapter { stroke: var(--om-ac); fill: var(--om-tint); }
.sd-om-diag .om-hatch { stroke: var(--om-ac2); }
.sd-om-diag .om-loop, .sd-om-diag .om-arrow { stroke: var(--om-ac); }
.sd-om-diag .om-blockonly { display: none; }
.sd-om-dir.is-blocked .om-blockonly { display: block; }
.sd-om-dir.is-blocked .om-adapter { stroke-dasharray: 5 3; }
.sd-om-dir.is-blocked .om-hatch, .sd-om-dir.is-blocked .om-free { display: none; }

/* Ergebnis-Panels */
.sd-om-result { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); }
.sd-om-result .rt { font-weight: 700; font-size: 14.5px; color: var(--fg-1); }
.sd-om-result .rs { font-size: 13px; line-height: 1.5; color: var(--fg-2); margin-top: 3px; }
.sd-om-result .rs strong { color: var(--fg-1); font-weight: 700; }
.sd-om-result .btn { margin-top: 10px; white-space: nowrap; font-size: 13px; padding: 8px 14px; }
.sd-om-result.is-ok { background: var(--sd-success-bg); }
.sd-om-result.is-ok > svg { color: var(--sd-success); flex: none; }
.sd-om-result.is-blocked { background: var(--sd-warning-bg); }
.sd-om-result.is-blocked > svg { color: var(--sd-warning); flex: none; }
.sd-om-result.is-inquiry { background: var(--sd-navy-050); }
.sd-om-result.is-inquiry > svg { color: var(--sd-navy-600); flex: none; }
.sd-om-result a:not(.btn) { color: var(--sd-navy-600); text-decoration: underline; text-underline-offset: 2px; }
.sd-om-err { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 12.5px; color: var(--sd-danger); }

/* Rueckansicht-Schemazeichnung im Blockiert-Panel */
.sd-om-rear-wrap { display: flex; gap: 12px; align-items: center; margin: 12px 0 4px; }
.sd-om-rear { width: 116px; height: 116px; flex: none; background: #fff; border: 1px solid var(--sd-line-soft); border-radius: var(--r-md); padding: 4px; }
.sd-om-rear-wrap .cap { font-size: 12px; line-height: 1.45; color: var(--fg-2); }

/* Ausklappbare Referenz-Matrix */
.sd-om-matrix-toggle {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 0; background: 0; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--sd-navy-600);
}
.sd-om-matrix-toggle:hover { color: var(--sd-amber-600); }
.sd-om-matrix-toggle .chev { display: inline-flex; transition: transform var(--dur-fast) var(--ease-out); }
.sd-om-matrix-toggle[aria-expanded='true'] .chev { transform: rotate(180deg); }
.sd-om-matrix { margin-top: 12px; border-top: 1px solid var(--sd-line-soft); padding-top: 12px; }
.sd-om-matrix table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.sd-om-matrix th, .sd-om-matrix td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--sd-line-soft); }
.sd-om-matrix thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); font-weight: 600; }
.sd-om-matrix tbody th { font-weight: 600; color: var(--fg-1); }
.sd-om-matrix .ms { font-weight: 400; color: var(--fg-3); }
.sd-om-matrix .mc { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.sd-om-matrix .mc-left, .sd-om-matrix .mc-right { color: var(--sd-navy-700); }
.sd-om-matrix .mc-blocked { color: var(--sd-warning); }
.sd-om-matrix .mc-inq { color: var(--fg-3); }
.sd-om-matrix-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--fg-3); }
@media (max-width: 480px) { .sd-om-models, .sd-om-dirs { grid-template-columns: 1fr; } }