/* ============================================================
   Collaje — Configurator MVP
   ============================================================ */

:root {
  --bg: #f5f5f4;
  --panel-bg: #ffffff;
  --border: #e5e5e3;
  --border-strong: #d4d4d2;
  --text: #1c1c1a;
  --text-muted: #767672;
  --text-faint: #a3a3a0;
  --brand-bar: #1a2540;
  --brand-bar-text: #ffffff;
  --accent: #c1432e;
  --accent-soft: rgba(193, 67, 46, 0.5);
  --accent-glow: rgba(193, 67, 46, 0.2);
  --success: #2f6f3f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --radius: 8px;
  --radius-sm: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

/* ----------- Header ----------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--brand-bar);
  color: var(--brand-bar-text);
  height: 52px;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.brand-name {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.brand-sub {
  font-size: 13px;
  opacity: 0.65;
  margin-left: 6px;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.btn {
  font: inherit;
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.15s, background 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  background: transparent;
  color: var(--brand-bar-text);
  border-color: rgba(255,255,255,0.3);
}

.btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* ----------- Main layout ----------- */
.app-main {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-title {
  font-weight: 600;
  font-size: 14px;
}

.filter-clear {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 4px;
}

.filter-clear:hover { color: var(--text); }

.filter-hint {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-muted);
  background: #fafaf9;
  border-bottom: 1px solid var(--border);
  display: none;
}

.filter-hint.visible { display: block; }

/* ----------- Scene list ----------- */
.scene-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}

.scene-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.15s, border-color 0.15s;
}

.scene-card:hover {
  background: #fafaf9;
  border-color: var(--border);
}

.scene-card.active {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.scene-thumb {
  width: 100%;
  aspect-ratio: 5 / 4;
  background: #eee;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.scene-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scene-name {
  font-size: 13px;
  font-weight: 500;
}

.scene-meta {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.anno-badge {
  color: var(--success);
  font-size: 9px;
  vertical-align: middle;
  margin-left: 4px;
}

.anno-badge.missing {
  color: var(--text-faint);
}

/* ----------- Canvas ----------- */
.canvas-area {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  gap: 8px;
}

.canvas-frame {
  flex: 1;
  position: relative;
  background: #ebeae7;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.canvas-bg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.canvas-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.canvas-overlay > * { pointer-events: auto; }

.canvas-status {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
}

/* Wrapping div to constrain overlays to image-area bounds */
.canvas-image-area {
  position: absolute;
  /* set dynamically via JS to match displayed image */
}

/* Placed item overlay (cabinet or asset on scene) */
.placed-overlay {
  position: absolute;
  /* transform set inline based on layer (wall=center, floor/countertop=bottom) */
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: element;
  transition: filter 0.15s;
}

.placed-overlay img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* Cabinet keeps explicit width × height — image fits via object-fit. */
.placed-overlay.cabinet img {
  height: 100%;
  object-fit: contain;
}

.placed-overlay.dragging { opacity: 0.4; }
/* During an incompatible drag: don't intercept events so drops pass through to
   point markers beneath (e.g. a rug slot positioned under the cabinet image). */
.placed-overlay.drag-incompatible { pointer-events: none; }
/* Click-cycling: clicking an overlay that covers another sends THIS one to
   the back, surfacing the next overlay for interaction (e.g. click cabinet
   to surface rug beneath). Z-index drops below any other placed overlay. */
.placed-overlay.demoted { z-index: 0 !important; }
.placed-overlay:hover { filter: drop-shadow(0 0 8px rgba(193,67,46,0.6)); }

.placed-overlay.cabinet { z-index: 2; }
.placed-overlay.wall { z-index: 1; }
.placed-overlay.countertop { z-index: 4; }
.placed-overlay.floor { z-index: 3; }
/* Rug must render BELOW cabinet (so cabinet legs/base cover rug at overlap).
   Higher selector specificity (3 classes) wins over .placed-overlay.floor (2). */
.placed-overlay.floor.rug { z-index: 1; }

/* Point markers */
.point {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  pointer-events: auto;
}

.point.circle {
  border-radius: 50%;
}

.point.ellipse {
  border-radius: 50%;
}

.point.rect {
  border-radius: 4px;
  background: transparent;
  border: 2px dashed var(--accent);
}

.point:hover,
.point.highlight {
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-glow);
  transform: translate(-50%, -50%) scale(1.1);
}

.point.selected {
  background: var(--accent);
  box-shadow: 0 0 0 8px var(--accent-glow);
}

.point.drag-over {
  background: var(--accent);
  box-shadow: 0 0 0 10px rgba(193,67,46,0.35);
}

.point.dimmed {
  opacity: 0.25;
  /* Incompatible slots must not intercept drops — particularly important for the
     large cabinet rect, which would otherwise eat drops aimed at points inside it
     (e.g. the rug slot positioned in front of cabinet). Mouse events pass through
     to sibling slots and the canvas underneath. */
  pointer-events: none;
}

.point.occupied {
  background: transparent;
  border-color: rgba(193,67,46,0.55);
  border-style: dashed;
  opacity: 0.55;
  pointer-events: none;
}

.placed-overlay.drag-over {
  filter: drop-shadow(0 0 14px rgba(193,67,46,0.9)) brightness(1.05);
}

/* Point label tooltip */
.point-label {
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  background: rgba(28,28,26,0.92);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.15s;
}

.point:hover + .point-label,
.point.selected + .point-label {
  opacity: 1;
}

/* ----------- Item list (right) ----------- */
.item-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-content: start;
}

.item-card {
  display: flex;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}

.item-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.item-card:active { cursor: grabbing; }

.item-card.dragging { opacity: 0.5; }

.item-card.placed {
  background: #fafaf9;
  border-style: dashed;
}

.item-card.placed::after {
  content: "✓";
  color: var(--success);
  margin-left: auto;
  font-weight: 600;
  align-self: center;
  padding-right: 4px;
}

.item-thumb {
  width: 56px;
  height: 56px;
  background: #f5f5f4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.item-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.item-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-type {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.tag-chip {
  font-size: 10px;
  background: #f0eeec;
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Group separator in item list */
.item-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 8px 4px 4px;
  font-weight: 600;
}

/* Empty state */
.empty-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* ----------- Edit mode ----------- */

body.edit-mode .point {
  cursor: grab;
}

body.edit-mode .point:active {
  cursor: grabbing;
}

body.edit-mode .point.occupied {
  pointer-events: auto !important;
  opacity: 0.85;
}

body.edit-mode .point.selected {
  background: var(--accent);
  box-shadow: 0 0 0 10px rgba(193,67,46,0.4);
  z-index: 11;
}

body.edit-mode .placed-overlay {
  opacity: 0.6;
  cursor: pointer;
}

body.edit-mode #canvas-bg {
  cursor: crosshair;
}

body.edit-mode .item-list {
  display: none;
}

body.edit-mode #edit-panel {
  display: block !important;
}

body.edit-mode .canvas-status::before {
  content: "EDIT MODE — ";
  color: var(--accent);
  font-weight: 600;
}

#btn-edit.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.edit-panel {
  padding: 14px;
  overflow-y: auto;
  flex: 1;
  display: none;
}

.edit-section {
  margin-bottom: 16px;
}

.edit-section label.field-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.edit-section input[type="text"],
.edit-section input[type="number"],
.edit-section select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font: inherit;
  background: #fff;
}

.edit-section .num-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.edit-section .num-row label {
  font-size: 11px;
  color: var(--text-muted);
}

.edit-section .num-row input {
  width: 100%;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag-list label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  background: #fafaf9;
}

.tag-list label.checked {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.tag-list input {
  display: none;
}

.btn-danger {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
}

.btn-danger:hover {
  background: var(--accent);
  color: #fff;
}

.preset-section {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.preset-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.preset-item {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: #fafaf9;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid var(--border);
}

.preset-item:hover {
  border-color: var(--border-strong);
}

.preset-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.preset-meta {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: normal;
}

.preset-list .empty-row {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  padding: 6px 0;
}

.btn-mini {
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border-strong);
  background: #fff;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-mini:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-mini.danger:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.preset-save {
  display: flex;
  gap: 4px;
}

.preset-save input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  font: inherit;
  font-size: 12px;
}

.edit-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 12px;
  background: #fafaf9;
  border-radius: 4px;
}

.edit-hint code {
  background: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* ----------- Modal ----------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] {
  display: none !important;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  width: min(620px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}

.modal-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.modal-textarea {
  width: 100%;
  flex: 1;
  min-height: 240px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }