/* ==========================================================================
   El Haggar Misr — Kaeser SYSTEM BUILDER styles
   Builds on the design tokens defined in style.css (:root).
   ========================================================================== */

.sys-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 900px) {
  .sys-steps { grid-template-columns: 1fr; }
}

.sys-step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.sys-step > h3 {
  margin: 0 0 12px;
  color: var(--blue-800);
  font-size: 1.05rem;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

.sys-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

@media (max-width: 520px) {
  .sys-form { grid-template-columns: 1fr; }
}

.sys-form .field { margin: 0; }
.sys-form .form-actions { grid-column: 1 / -1; margin-top: 4px; }
.sys-form .btn { width: 100%; }

/* ---- result cards ---- */

.sys-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.sys-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #fbfdff, #f4f8fc);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}

.sys-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.sys-card.chosen {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px rgba(31, 157, 85, .18);
}

/* the chosen card also carries a tick and a green wash, so the selection is
   obvious even at a glance and even when the button is the ghost variant */
.sys-card.chosen {
  background: linear-gradient(180deg, #f2fcf6, #e8f7ee);
}

.sys-card.chosen .sys-card-head h4::before {
  content: "✓ ";
  color: var(--ok);
  font-weight: 700;
}

.sys-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sys-card-head h4 {
  margin: 0;
  font-size: 1.02rem;
  color: var(--blue-800);
}

.sys-spec {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .84rem;
}

.sys-spec li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  border-bottom: 1px dashed var(--line);
}

.sys-spec li:last-child { border-bottom: 0; }
.sys-spec li > span:first-child { color: var(--ink-soft); }
.sys-spec li > span:last-child { font-weight: 600; text-align: end; }

.sys-price {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  color: var(--ink);
}

.sys-price strong { color: var(--blue-700); font-size: 1.05rem; }
.sys-price small { color: var(--ink-soft); font-size: .74rem; }

.sys-card .btn { margin-top: auto; }

/* ---- advisor ---- */

.sys-advice {
  margin-top: 14px;
  padding: 10px 12px;
  border-inline-start: 4px solid var(--accent);
  background: #fff8ec;
  border-radius: 10px;
  font-size: .88rem;
}

.sys-advice strong {
  display: block;
  color: var(--blue-700);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
}

.sys-advice p { margin: 0; color: var(--ink); }

/* ---- filter grade picker ---- */

.grade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-top: 4px;
}

.grade-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  cursor: pointer;
}

.grade-grid label small { color: var(--ink-soft); }

/* ---- station summary ---- */

.sys-summary {
  margin-top: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-hi);
}

.sys-summary h3 {
  margin: 0 0 12px;
  color: var(--blue-800);
}

.sys-sum-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.sys-sum-table th,
.sys-sum-table td {
  text-align: start;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.sys-sum-table th:first-child { color: var(--ink-soft); font-weight: 600; width: 34%; }
.sys-sum-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sys-sum-table tfoot th,
.sys-sum-table tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--blue-700);
  font-size: 1rem;
  color: var(--blue-800);
}

.sys-sum-table tfoot small { color: var(--ink-soft); font-weight: 400; }

.sys-summary .btn { margin-top: 12px; }

/* small helper used by the summary note */
.sys-summary .small { font-size: .8rem; }

/* ---- product-range family / type filter bar ---- */

.prod-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.prod-filter-bar .field {
  margin: 0;
  min-width: 190px;
}

.prod-filter-bar label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: 4px;
}

.prod-filter-bar select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

/* ---- price line on product cards ---- */

.card .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.card .price strong {
  color: var(--blue-700);
  font-size: 1.05rem;
}

.card .price small { color: var(--ink-soft); font-size: .75rem; }
.card .price.muted { color: var(--ink-soft); font-size: .88rem; }

/* ==========================================================================
   3D station view
   ========================================================================== */

.d3-empty {
  margin-top: 18px;
  padding: 34px 24px;
  text-align: center;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.d3-empty p { margin: 0 0 6px; }
.d3-empty .btn { margin-top: 12px; }

.d3-stage {
  position: relative;
  margin-top: 18px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #eef4fa;
}

/* The toolbar sits in normal flow above the canvas. It used to be absolutely
   positioned over the canvas, which meant the buttons could be laid out before
   the stage/canvas had any size and collapsed to zero. */
.d3-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 0;
  background: #eef4fa;
}

.d3-canvas {
  display: block;
  width: 100%;
  height: 520px;
  touch-action: none;
  cursor: grab;
}

.d3-canvas:active { cursor: grabbing; }

/* Only the neutral (ghost) buttons get the frosted look. A primary button —
   the "Station drawing (PDF)" action — must keep its own blue, otherwise this
   rule wins on specificity and it turns into a blank white button. */
.d3-toolbar .btn-ghost {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
}

.d3-toolbar .btn.active {
  border-color: var(--blue-600);
  color: var(--blue-700);
  font-weight: 700;
}

/* belt and braces: make sure the drawing action is always readable */
.d3-toolbar .btn-primary,
.d3-toolbar #d3Pdf {
  background: var(--blue-700);
  color: #fff;
  border: 0;
  box-shadow: var(--shadow);
}

.d3-toolbar .btn-primary:hover,
.d3-toolbar #d3Pdf:hover {
  background: var(--blue-800);
  color: #fff;
}

.d3-legend { margin-top: 20px; }
.d3-legend h3 { margin: 0 0 10px; }

.d3-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.d3-items li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.d3-swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.d3-item-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.d3-item-main strong { color: var(--blue-900); }
.d3-item-main small { color: var(--ink-soft); }

.d3-item-dim {
  flex: 0 0 auto;
  text-align: end;
  font-size: .84rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
}

.d3-item-dim em { font-style: normal; font-size: .72rem; color: var(--blue-600); }

.d3-items .d3-pipe { background: var(--bg); }

@media (max-width: 620px) {
  .d3-canvas { height: 380px; }
  .d3-items li { flex-wrap: wrap; }
  .d3-item-dim { text-align: start; }
}

/* ---------------- station drawing (PDF) preview modal ------------------ */

.dr-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(9, 20, 33, .62);
  backdrop-filter: blur(3px);
}

.dr-overlay[hidden] { display: none; }

/* the modal box is the direct child, whatever it is called */
.dr-overlay > div {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: min(92vh, 900px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(6, 18, 33, .42);
  overflow: hidden;
}

.dr-modal {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: min(92vh, 900px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(6, 18, 33, .42);
  overflow: hidden;
}

.dr-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #e3e8ee);
  background: #fbfcfe;
}

/* the close button sits first so it lands in the leading corner in both
   LTR and RTL, which keeps it away from the download button */
.dr-head h3 { margin: 0; font-size: 1.05rem; order: 1; flex: 1; }
.dr-head p { margin: 0; }
#drClose { order: 0; }

.dr-tools { display: flex; align-items: center; gap: 6px; order: 2; }

.dr-hint { padding: 0 18px 8px; margin: 8px 0 0; }

.dr-view {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: auto;
  background:
    linear-gradient(0deg, #f2f6fa, #e9eff5);
}

.dr-view canvas {
  background: #fff;
  box-shadow: 0 6px 22px rgba(15, 36, 58, .18);
  /* the JS sizes the canvas to the A3 ratio on both axes; the flex box must
     not squash it, so it is a fixed flex item that can scroll instead */
  flex: 0 0 auto;
  display: block;
  max-width: none;
  max-height: none;
}

.dr-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line, #e3e8ee);
  background: #fbfcfe;
}

.dr-msg { flex: 1; min-width: 0; }
.dr-pager { display: flex; gap: 4px; }

/* the download is an <a download>, so it must read as a button, not as a link */
.dr-overlay a.btn,
.dr-overlay a.btn:visited,
.dr-overlay a.btn:hover {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dr-overlay a.btn::before {
  content: "⤓";
  font-size: 1.05em;
  line-height: 1;
  font-weight: 700;
}

/* an <a download> that has not been armed yet still reads as a live button */
.dr-overlay a.btn[href="#"],
.dr-overlay a.btn[aria-disabled="true"] {
  opacity: .85;
  cursor: pointer;
}

.dr-toast {
  position: fixed;
  inset-inline: 0;
  bottom: 26px;
  margin-inline: auto;
  margin-block: 0;
  width: max-content;
  max-width: min(92vw, 520px);
  padding: 12px 18px;
  background: #0d5288;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(8, 25, 45, .35);
  font-size: .92rem;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 120;
}

.dr-toast.show { opacity: 1; transform: translateY(0); }