/* Solution assistant (/yapilandir/muhendislik) and project solution panel.
 * Uses only LedCommerce design tokens. Port colours cycle through 8 token-based hues. */

/* ---------- Engineering form ---------- */
.lc-eng__pair,
.lc-eng__quad {
  display: grid;
  gap: var(--lc-space-4);
  margin-top: var(--lc-space-4);
}

@media (min-width: 640px) {
  .lc-eng__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-eng__quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lc-eng .lc-chip { position: relative; }
.lc-eng .lc-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lc-eng .lc-chip:has(input:checked) { color: var(--lc-text); border-color: var(--lc-text); background: var(--lc-surface-raised); }
.lc-eng .lc-chip:has(input:focus-visible) { box-shadow: var(--lc-focus-ring); }
.lc-eng .lc-option.is-disabled { opacity: 0.55; cursor: not-allowed; }
.lc-eng__advanced { margin-top: 0; }
.lc-eng__advanced > summary { padding-block: var(--lc-space-3); }

/* JS shows one input panel at a time; without JS all panels stay visible. */
.lc-eng__form.is-enhanced [data-mode-panel][hidden],
.lc-eng__form.is-enhanced [data-source-panel][hidden] { display: none; }

.lc-config__engineering { margin-top: var(--lc-space-6); display: grid; gap: var(--lc-space-3); justify-items: start; }

/* ---------- Result ---------- */
.lc-solution-section { padding-block: var(--lc-space-12); }

.lc-solution {
  display: grid;
  gap: var(--lc-space-8);
  color: var(--lc-text);
}

.lc-solution__head .lc-h2 { margin: 0; }
.lc-solution__block { display: grid; gap: var(--lc-space-4); }
.lc-solution__block > h3 { display: flex; align-items: center; gap: var(--lc-space-2); margin: 0; }
.lc-text-muted { color: var(--lc-text-muted); }
.lc-text-subtle { color: var(--lc-text-subtle); }

.lc-solution__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--lc-space-3);
  margin: 0;
}

.lc-solution__facts > div {
  padding: var(--lc-space-4);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background: var(--lc-surface-raised);
}

.lc-solution__facts dt { font-size: var(--lc-text-xs); color: var(--lc-text-subtle); text-transform: uppercase; letter-spacing: var(--lc-tracking-caps); }
.lc-solution__facts dd { margin: var(--lc-space-1) 0 0; font-weight: var(--lc-weight-semibold); font-variant-numeric: tabular-nums; }

.lc-solution__picks {
  display: grid;
  gap: var(--lc-space-6);
}

@media (min-width: 1024px) {
  .lc-solution__picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lc-solution__pick {
  display: grid;
  gap: var(--lc-space-3);
  align-content: start;
  padding: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-surface-raised);
  box-shadow: var(--lc-shadow-sm);
}

.lc-solution__pick .lc-h3 { margin: 0; }
.lc-solution__pick .lc-badge { justify-self: start; }
.lc-solution__catalog-link { justify-self: start; font-size: var(--lc-text-sm); }
.lc-solution__alt h4 a { color: inherit; }

.lc-solution__kicker {
  display: flex;
  align-items: center;
  gap: var(--lc-space-2);
  margin: 0;
  font-size: var(--lc-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--lc-tracking-caps);
  color: var(--lc-text-subtle);
}

.lc-solution__big {
  margin: 0;
  font-size: var(--lc-text-3xl);
  font-weight: var(--lc-weight-bold);
  line-height: var(--lc-leading-tight);
  font-variant-numeric: tabular-nums;
}

.lc-solution__big span { font-size: var(--lc-text-md); font-weight: var(--lc-weight-medium); color: var(--lc-text-muted); margin-left: 0.25em; }
.lc-solution__why { margin: var(--lc-space-2) 0 0; font-size: var(--lc-text-sm); }

.lc-solution__reasons,
.lc-solution__notes {
  display: grid;
  gap: var(--lc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-solution__reasons li,
.lc-solution__notes li {
  position: relative;
  padding-left: var(--lc-space-5);
  font-size: var(--lc-text-sm);
  color: var(--lc-text-muted);
}

.lc-solution__reasons li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--lc-accent);
}

.lc-solution__notes li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--lc-text-subtle);
}

.lc-solution__notes li.is-warning::before { background: var(--lc-warn-500); }
.lc-solution__notes li.is-error::before { background: var(--lc-danger-500); }

.lc-solution__alts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--lc-space-3);
}

.lc-solution__alt {
  display: grid;
  gap: var(--lc-space-2);
  align-content: start;
  padding: var(--lc-space-4);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background: var(--lc-surface-raised);
}

.lc-solution__alt h4 { margin: 0; font-size: var(--lc-text-lg); }
.lc-solution__alt h4 span { color: var(--lc-text-muted); font-weight: var(--lc-weight-medium); font-size: var(--lc-text-sm); }
.lc-solution__alt .lc-badge { justify-self: start; }
.lc-solution__rejected ul { display: grid; gap: var(--lc-space-2); padding-left: var(--lc-space-5); font-size: var(--lc-text-sm); color: var(--lc-text-muted); }
.lc-solution__src-note { display: block; }
.lc-solution__versions { font-family: var(--lc-font-mono); font-size: var(--lc-text-xs); }
.lc-solution__recalc { margin-top: var(--lc-space-4); }

/* ---------- Tables ---------- */
.lc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--lc-border); border-radius: var(--lc-radius-md); }

.lc-solution__table { width: 100%; border-collapse: collapse; font-size: var(--lc-text-sm); }
.lc-solution__table th,
.lc-solution__table td { padding: var(--lc-space-3) var(--lc-space-4); border-bottom: 1px solid var(--lc-border); text-align: left; vertical-align: top; }
.lc-solution__table thead th { font-size: var(--lc-text-xs); text-transform: uppercase; letter-spacing: var(--lc-tracking-caps); color: var(--lc-text-subtle); font-weight: var(--lc-weight-medium); background: var(--lc-surface-sunken); }
.lc-solution__table tbody tr:last-child > * { border-bottom: 0; }
.lc-solution__table tbody th { font-weight: var(--lc-weight-semibold); white-space: nowrap; }
.lc-solution__table .lc-icon { display: inline-block; vertical-align: -0.2em; margin-right: var(--lc-space-1); }
.lc-solution__table .lc-num { text-align: right; font-variant-numeric: tabular-nums; }
.lc-solution__chain { font-family: var(--lc-font-mono); font-size: var(--lc-text-xs); word-break: break-word; }

/* ---------- Port palette ---------- */
.lc-port-1 { --port: var(--lc-signal-500); }
.lc-port-2 { --port: var(--lc-info-500); }
.lc-port-3 { --port: var(--lc-ok-500); }
.lc-port-4 { --port: var(--lc-warn-500); }
.lc-port-5 { --port: var(--lc-danger-500); }
.lc-port-6 { --port: var(--lc-info-700); }
.lc-port-7 { --port: var(--lc-ok-700); }
.lc-port-8 { --port: var(--lc-signal-700); }
.lc-port-0 { --port: var(--lc-text-subtle); }

.lc-port-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; background: var(--port); vertical-align: -0.05em; margin-right: var(--lc-space-1); }

/* ---------- Receiver map ---------- */
.lc-rxmap { margin: 0; display: grid; gap: var(--lc-space-2); }
.lc-rxmap figcaption { font-size: var(--lc-text-xs); color: var(--lc-text-subtle); font-family: var(--lc-font-mono); }

.lc-rxmap__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(70vh, 40rem);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background: var(--lc-graphite-950);
  padding: var(--lc-space-3);
  box-sizing: border-box;
}

.lc-rxmap__screen { fill: var(--lc-graphite-900); }

.lc-rxmap__rx rect {
  fill: color-mix(in srgb, var(--port) 22%, transparent);
  stroke: var(--port);
  stroke-width: 1.5px;
  transition: fill var(--lc-dur) var(--lc-ease), opacity var(--lc-dur) var(--lc-ease);
}

.lc-rxmap__rx.is-irregular rect { stroke-dasharray: 4 3; }
.lc-rxmap__rx text { fill: #f2f3f4; text-anchor: middle; dominant-baseline: central; font-family: var(--lc-font-mono); pointer-events: none; }

.lc-rxmap__controller { fill: var(--lc-graphite-800); stroke: var(--lc-graphite-500); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: stroke var(--lc-dur) var(--lc-ease); }
.lc-rxmap__port circle { fill: var(--port); stroke: var(--lc-graphite-950); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lc-rxmap__port text { fill: #f2f3f4; text-anchor: middle; dominant-baseline: central; font-family: var(--lc-font-mono); }

.lc-rxmap__wire {
  stroke: var(--port);
  stroke-width: 2px;
  stroke-linecap: round;
  opacity: 0.85;
}

/* Animation states (set by lc-solution.js from the real connection sequence). */
.lc-rxmap.is-animating .lc-rxmap__wire { opacity: 0; }
.lc-rxmap.is-animating .lc-rxmap__rx rect { fill: transparent; opacity: 0.45; }
.lc-rxmap.is-animating .lc-rxmap__wire.is-drawn { opacity: 0.9; }
.lc-rxmap.is-animating .lc-rxmap__rx.is-lit rect { fill: color-mix(in srgb, var(--port) 45%, transparent); opacity: 1; }
.lc-rxmap.is-animating .lc-rxmap__controller.is-lit { stroke: var(--lc-signal-400); }
.lc-rxmap__port.is-lit circle { stroke: #fff; stroke-width: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .lc-rxmap.is-animating .lc-rxmap__wire.is-drawing { opacity: 0.9; transition: stroke-dashoffset var(--lc-wire-ms, 380ms) linear; }
}

.lc-wiring-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); }
.lc-wiring-status { font-family: var(--lc-font-mono); font-size: var(--lc-text-xs); color: var(--lc-text-muted); min-height: 1.2em; }

.lc-project-solution .lc-solution { gap: var(--lc-space-6); }

/* Project page: the legacy .panel sets its own colours — use the LedCommerce dark surface tokens instead. */
.panel.lc-project-solution { background: var(--lc-surface); color: var(--lc-text); border-color: var(--lc-border); }