/**
 * deck-planner-theme.css
 * Visual theme overrides — brings the calculator UI in line with Extrawood design.
 * Loaded after deck-planner.min.css. Only CSS. No JS, no exw- IDs changed.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. ROOT & CONTAINER
   ═══════════════════════════════════════════════════════════════════════ */

/* Remove fullpage height — calculator now lives inside an accordion */
.exw-deck-planner {
  min-height: unset !important;
  background: transparent;
  align-items: stretch;
}

/* Tighten the inner container */
.exw-deck-planner .container {
  padding: 0;
  gap: 0;
  max-width: none;
  align-items: stretch;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. PANELS — remove duplicate card chrome (accordion body is the card)
   ═══════════════════════════════════════════════════════════════════════ */

.exw-deck-planner .panel {
  background: #FFFFFC;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Dividing line between canvas and controls */
.exw-deck-planner .canvas-panel {
  border-right: 1px solid #C1C1BB;
  gap: 0;
}

.exw-deck-planner .controls-panel {
  gap: 0;
  overflow-y: auto;
  max-height: 80vh;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. CANVAS PANEL — top bar, canvas, hint, final summary
   ═══════════════════════════════════════════════════════════════════════ */

/* Top bar: title + scale badge */
.exw-deck-planner .canvas-panel > div:first-child {
  padding: 10px 16px;
  border-bottom: 1px solid #C1C1BB;
  background: #F7F7F7;
  min-height: 40px;
}

.exw-deck-planner h2 {
  font-size: 13px;
  font-weight: 600;
  color: #10110C;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Scale badge — subtler */
.exw-deck-planner .canvas-panel .badge {
  font-size: 11px;
  background: rgba(193, 193, 187, 0.3);
  border: 1px solid #C1C1BB;
  color: #8B8E85;
  padding: 2px 8px;
  border-radius: 999px;
}

.exw-deck-planner .canvas-panel .badge-dot {
  display: none;
}

/* Canvas itself */
.exw-deck-planner canvas {
  border-radius: 0;
  border: none;
  display: block;
  width: 100%;
}

/* Hint bar below canvas */
.exw-deck-planner .hint {
  padding: 8px 16px;
  border-top: 1px solid #C1C1BB;
  font-size: 11px;
  color: #8B8E85;
  line-height: 1.6;
  background: #F7F7F7;
}

/* ── Final summary (results + action buttons) ── */
.exw-deck-planner .final-summary {
  margin-top: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid #C1C1BB;
  padding: 14px 16px;
  background: #F7F7F7;
}

.exw-deck-planner .final-summary-head {
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.exw-deck-planner .final-summary-head h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8B8E85;
  margin: 0;
}

/* Action buttons — Submit = orange, PDF = dark, rest = secondary */
.exw-deck-planner #submitBtn {
  background: #FF5733 !important;
  color: #fff !important;
  font-weight: 700;
  min-height: 36px;
  padding: 8px 18px;
}

.exw-deck-planner #pdfBtn {
  background: #10110C !important;
  color: #fff !important;
  font-weight: 600;
  min-height: 36px;
  padding: 8px 18px;
}

.exw-deck-planner #copyJsonBtn,
.exw-deck-planner #toggleJsonBtn {
  font-size: 11px;
  padding: 5px 10px;
  min-height: 28px;
  color: #8B8E85;
  border-color: #C1C1BB;
}

/* Summary list rows */
.exw-deck-planner .final-summary-list {
  gap: 4px;
}

.exw-deck-planner .final-summary-item {
  padding: 5px 10px;
  background: #FFFFFC;
  border-color: #C1C1BB;
  border-radius: 8px;
}

.exw-deck-planner .final-summary-k {
  font-size: 12px;
  color: #8B8E85;
}

.exw-deck-planner .final-summary-v {
  font-size: 12px;
  font-weight: 600;
  color: #10110C;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. CONTROLS PANEL — sections as clean groups
   ═══════════════════════════════════════════════════════════════════════ */

.exw-deck-planner .controls-panel {
  background: #F7F7F7;
}

/* Each section = a settings group */
.exw-deck-planner .section {
  padding: 14px 16px;
  margin-bottom: 0;
  border-bottom: 1px solid #C1C1BB;
  background: #FFFFFC;
}

.exw-deck-planner .section:last-child {
  border-bottom: none;
}

/* Section titles (h3) — subtle label style */
.exw-deck-planner h3 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8B8E85;
  margin: 0 0 10px;
}

/* Fields */
.exw-deck-planner .field {
  margin-bottom: 8px;
}

.exw-deck-planner .field:last-child {
  margin-bottom: 0;
}

/* Labels */
.exw-deck-planner label {
  font-size: 11px;
  font-weight: 500;
  color: #8B8E85;
  margin-bottom: 3px;
}

/* Inputs & selects */
.exw-deck-planner input:not([type="checkbox"]):not([type="radio"]),
.exw-deck-planner select {
  border-radius: 8px;
  border: 1px solid #C1C1BB;
  background: #FFFFFC;
  padding: 7px 10px;
  font-size: 13px;
  color: #10110C;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.exw-deck-planner input:not([type="checkbox"]):not([type="radio"]):focus,
.exw-deck-planner select:focus {
  border-color: #FF5733;
  box-shadow: 0 0 0 2px rgba(255, 87, 51, 0.18);
  outline: none;
}

/* Toggle (show rulers, show joists etc.) */
.exw-deck-planner .toggle {
  color: #10110C;
  font-size: 12px;
  gap: 8px;
  margin-bottom: 6px;
  padding: 4px 0;
}

.exw-deck-planner .toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: unset;
  accent-color: #FF5733;
  cursor: pointer;
}

/* Status lines */
.exw-deck-planner .status,
.exw-deck-planner .small {
  font-size: 11px;
  color: #8B8E85;
  line-height: 1.5;
}

/* ── Buttons ── */
.exw-deck-planner button {
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  min-height: 34px;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
}

.exw-deck-planner button:hover {
  opacity: 0.88;
}

.exw-deck-planner button:active {
  transform: translateY(1px);
}

.exw-deck-planner button.secondary {
  background: #FFFFFC;
  color: #10110C;
  border: 1px solid #C1C1BB;
}

.exw-deck-planner button.secondary:hover {
  border-color: #8B8E85;
}

/* Primary action (close polygon, recalc) */
.exw-deck-planner #closePolygonBtn,
.exw-deck-planner #recalcBtn {
  background: #FF5733;
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
}

/* Zoom controls: tight square buttons */
.exw-deck-planner #zoomOutBtn,
.exw-deck-planner #zoomInBtn {
  min-width: 34px;
  min-height: 34px;
  padding: 4px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  flex-shrink: 0;
}

.exw-deck-planner #zoomLabel {
  font-size: 12px;
  color: #8B8E85;
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Pan + Fit + Fullscreen — icon buttons */
.exw-deck-planner .icon-btn {
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: #10110C;
  border: 1px solid #C1C1BB;
  background: #FFFFFC;
  gap: 5px;
}

.exw-deck-planner .icon-btn svg {
  width: 16px;
  height: 16px;
  color: #8B8E85;
  fill: none;
  stroke: currentColor;
}

.exw-deck-planner .icon-btn.active {
  border-color: #FF5733;
  color: #FF5733;
  box-shadow: 0 0 0 2px rgba(255, 87, 51, 0.15);
}

.exw-deck-planner .icon-btn.active svg {
  color: #FF5733;
}

/* ── Buttons row ── */
.exw-deck-planner .buttons-row {
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Shape preset buttons — toolbar style ── */
.exw-deck-planner #presetShapesRow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-top: 8px;
}

.exw-deck-planner #presetShapesRow button {
  background: #FFFFFC;
  border: 1px solid #C1C1BB;
  border-radius: 8px;
  color: #10110C;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 4px;
  aspect-ratio: 1;
  min-height: unset;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.exw-deck-planner #presetShapesRow button:hover {
  border-color: #FF5733;
  color: #FF5733;
  background: rgba(255, 87, 51, 0.05);
  opacity: 1;
}

/* ── Stock rows (board lengths / prices table) ── */
.exw-deck-planner .stock-rows {
  gap: 5px;
  margin-top: 6px;
}

.exw-deck-planner .stock-row {
  background: #F7F7F7;
  border: 1px solid #C1C1BB;
  border-radius: 8px;
  padding: 5px 8px;
  gap: 5px;
}

.exw-deck-planner .stock-row input {
  font-size: 12px;
  padding: 4px 6px;
  min-height: unset;
  background: #FFFFFC;
}

.exw-deck-planner .onlyLen input {
  min-height: unset;
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: #FF5733;
}

/* ── Status / stock badge ── */
.exw-deck-planner #stockStatus .badge {
  font-size: 12px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

.exw-deck-planner #stockStatus .badge.ok  { color: #16a34a; }
.exw-deck-planner #stockStatus .badge.bad { color: #dc2626; }

/* ── Corner status ── */
.exw-deck-planner #cornerStatus {
  font-size: 11px;
  color: #8B8E85;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. FULLSCREEN MODE — keep it working
   ═══════════════════════════════════════════════════════════════════════ */

.exw-deck-planner .container.is-fs {
  background: #FFFFFC;
}

.exw-deck-planner .container.is-fs .canvas-panel {
  border-right: 1px solid #C1C1BB;
}

.exw-deck-planner .container.is-fs .controls-panel {
  max-height: none;
  background: #F7F7F7;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. MOBILE ≤ 768px
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Stack vertically */
  .exw-deck-planner .container {
    flex-direction: column;
  }

  /* Canvas panel full width, fixed height */
  .exw-deck-planner .canvas-panel {
    border-right: none;
    border-bottom: 1px solid #C1C1BB;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* Hide everything in canvas panel except canvas on mobile.
     __EXW_EDGE_INPUTS_MOBILE_RESTORE_V1__: #edge-inputs-layer excluded — duplicate of the
     same rule in deck-planner-mobile.css (already patched there), but THIS copy carries
     !important and was the one actually winning the cascade regardless of load order,
     since the mobile.css copy has no !important on this specific rule. Found via DevTools
     Computed panel showing deck-planner-theme.css:477 as the winning source. */
  .exw-deck-planner .canvas-panel > *:not(canvas):not(#edge-inputs-layer) {
    display: none !important;
  }

  .exw-deck-planner canvas {
    width: 100% !important;
    height: 100% !important;
  }

  /* Controls panel full width below canvas */
  .exw-deck-planner .controls-panel {
    width: 100%;
    min-width: unset;
    max-height: none;
    overflow-y: visible;
    padding: 0;
  }

  /* Sections on mobile: no border-radius needed */
  .exw-deck-planner .section {
    padding: 12px;
  }

  /* Touch-friendly inputs */
  .exw-deck-planner input:not([type="checkbox"]):not([type="radio"]),
  .exw-deck-planner select {
    font-size: 16px;  /* prevent iOS auto-zoom */
    min-height: 44px;
    padding: 10px 12px;
  }

  .exw-deck-planner button {
    min-height: 44px;
    font-size: 14px;
  }

  /* Shape buttons: bigger touch area */
  .exw-deck-planner #presetShapesRow button {
    aspect-ratio: unset;
    min-height: 44px;
    font-size: 16px;
  }

  /* Stock rows: stack on very narrow screens */
  .exw-deck-planner .stock-row {
    flex-wrap: wrap;
  }

  .exw-deck-planner .stock-row input {
    min-width: 60px;
    min-height: 40px;
    font-size: 16px;
  }

  /* Final summary buttons: wrap */
  .exw-deck-planner .final-summary-head {
    flex-direction: column;
    align-items: stretch;
  }

  .exw-deck-planner .final-summary-head > div {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .exw-deck-planner #submitBtn,
  .exw-deck-planner #pdfBtn {
    flex: 1;
    min-width: 120px;
  }

  /* Hide the badge in canvas panel top bar on mobile (canvas hides the bar anyway) */
  .exw-deck-planner .canvas-panel .badge {
    display: none;
  }
}