/* ============================================================
   Garden Bed Designer — designer.css
   Matches site brand: #fdfae9 warm cream, moss green accents
   ============================================================ */

.gbd-wrap {
  --bg:         #fdfae9;
  --bg-warm:    #f5f0d4;
  --bg-card:    #fffdf4;
  --border:     #e4d9b8;
  --border-dk:  #d4c8a0;
  --text:       #2a2016;
  --text-mid:   #6b5c3e;
  --text-soft:  #a89070;
  --moss:       #4a7c3f;
  --sage:       #6aaa58;
  --leaf:       #3d6b35;
  --sprout:     #c8e8b0;
  --bark:       #8b6340;
  --sun:        #d4952a;
  --water:      #5a9db0;
  --grid:       rgba(139,99,64,.11);
  --grid-maj:   rgba(139,99,64,.22);
  --cell:       48px;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  box-sizing: border-box;
  position: relative;
}
.gbd-wrap *, .gbd-wrap *::before, .gbd-wrap *::after { box-sizing: border-box; }

/* ── Layout shell ────────────────────────────────────────── */
.gbd-shell {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  background: var(--bg-card);
}

/* ── Top bar ─────────────────────────────────────────────── */
.gbd-topbar {
  height: 52px;
  background: var(--bg-card);
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 6px;
  flex-shrink: 0;
}
.gbd-logo {
  display: flex; align-items: center; gap: 8px;
  margin-right: 14px;
}
.gbd-logo-leaf {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--moss), var(--sage));
  border-radius: 50% 10% 50% 10%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
}
.gbd-logo-title {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.05rem; font-weight: 600; color: var(--text); white-space: nowrap;
}
.gbd-logo-title em { color: var(--moss); font-style: italic; }
.gbd-divider { width:1px; height:28px; background:var(--border); margin:0 8px; flex-shrink:0; }

.gbd-tool-btn {
  width:32px; height:32px; border-radius:7px;
  border:1.5px solid transparent; background:transparent;
  cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-mid); transition:all .15s; position:relative;
}
.gbd-tool-btn:hover { background:var(--bg-warm); border-color:var(--border); }
.gbd-tool-btn.active { background:var(--moss); border-color:var(--moss); color:#fff; }
.gbd-tool-btn[title]:hover::after {
  content:attr(title); position:absolute; bottom:-26px; left:50%;
  transform:translateX(-50%); background:var(--text); color:#fff;
  font-size:.6rem; padding:3px 7px; border-radius:4px;
  white-space:nowrap; z-index:300; pointer-events:none;
}
.gbd-topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.gbd-bed-name {
  border:1.5px solid var(--border); background:var(--bg-warm);
  border-radius:7px; padding:5px 10px;
  font-family:inherit; font-size:.8rem; font-weight:500;
  color:var(--text); outline:none; width:150px; transition:border-color .2s;
}
.gbd-bed-name:focus { border-color:var(--moss); }
.gbd-btn {
  padding:6px 13px; border-radius:7px; font-family:inherit;
  font-size:.76rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.gbd-btn-primary { background:var(--moss); color:#fff; border:none; }
.gbd-btn-primary:hover { background:var(--leaf); }
.gbd-btn-ghost { background:transparent; color:var(--text-mid); border:1.5px solid var(--border); }
.gbd-btn-ghost:hover { border-color:var(--moss); color:var(--moss); }

/* ── Body row ────────────────────────────────────────────── */
.gbd-body { display:flex; flex:1; overflow:hidden; min-height:520px; }

/* ── Left panel ──────────────────────────────────────────── */
.gbd-left {
  width:220px; flex-shrink:0;
  background:var(--bg-card);
  border-right:1.5px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.gbd-section { border-bottom:1px solid var(--border); }
.gbd-section-hd {
  padding:9px 13px 7px; display:flex; align-items:center;
  justify-content:space-between; cursor:pointer; user-select:none;
}
.gbd-section-lbl {
  font-size:.58rem; text-transform:uppercase;
  letter-spacing:1.8px; font-weight:700; color:var(--bark);
}
.gbd-chevron { font-size:.68rem; color:var(--text-soft); transition:transform .2s; }
.gbd-section.collapsed .gbd-chevron { transform:rotate(-90deg); }
.gbd-section.collapsed .gbd-section-body { display:none; }

/* Bed setup controls */
.gbd-bed-controls { padding:0 12px 12px; }
.gbd-size-row { display:flex; align-items:center; gap:5px; margin-bottom:7px; }
.gbd-size-row label { font-size:.68rem; color:var(--text-soft); font-weight:500; width:40px; }
.gbd-size-inp {
  flex:1; border:1.5px solid var(--border); background:var(--bg-warm);
  border-radius:6px; padding:5px 7px; font-family:inherit; font-size:.8rem;
  color:var(--text); outline:none; text-align:center; transition:border-color .2s;
}
.gbd-size-inp:focus { border-color:var(--moss); }
.gbd-size-unit { font-size:.65rem; color:var(--text-soft); }
.gbd-shape-row { display:flex; gap:4px; margin-bottom:8px; }
.gbd-shape-btn {
  flex:1; padding:5px 3px; border:1.5px solid var(--border);
  border-radius:6px; background:var(--bg-warm); font-size:.64rem;
  font-family:inherit; color:var(--text-mid); cursor:pointer; text-align:center;
  transition:all .15s;
}
.gbd-shape-btn:hover,.gbd-shape-btn.active {
  border-color:var(--moss); background:var(--sprout); color:var(--leaf); font-weight:600;
}
.gbd-apply-btn {
  width:100%; padding:7px; font-size:.74rem; font-weight:600;
  background:var(--moss); color:#fff; border:none; border-radius:7px;
  font-family:inherit; cursor:pointer; transition:background .15s;
}
.gbd-apply-btn:hover { background:var(--leaf); }

/* Plant palette */
.gbd-palette-search { padding:7px 12px 5px; position:relative; }
.gbd-palette-search input {
  width:100%; padding:6px 10px 6px 28px;
  border:1.5px solid var(--border); border-radius:7px;
  background:var(--bg-warm); font-family:inherit; font-size:.76rem;
  color:var(--text); outline:none; transition:border-color .2s;
}
.gbd-palette-search input:focus { border-color:var(--moss); }
.gbd-palette-search-ico {
  position:absolute; left:20px; top:50%;
  transform:translateY(-50%); font-size:.76rem; pointer-events:none;
}
.gbd-palette-cats { display:flex; gap:3px; padding:0 12px 6px; }
.gbd-palette-cat {
  flex:1; padding:4px 2px; font-size:.6rem; font-weight:600;
  font-family:inherit; border:1.5px solid var(--border);
  border-radius:6px; background:var(--bg-warm); color:var(--text-soft);
  cursor:pointer; text-align:center; transition:all .15s;
}
.gbd-palette-cat.active { background:var(--moss); border-color:var(--moss); color:#fff; }
.gbd-palette-list {
  flex:1; overflow-y:auto; padding:0 12px 10px;
}
.gbd-palette-list::-webkit-scrollbar { width:3px; }
.gbd-palette-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.gbd-palette-item {
  display:flex; align-items:center; gap:8px; padding:6px 9px;
  border-radius:8px; border:1.5px solid transparent;
  cursor:grab; transition:all .14s; user-select:none; margin-bottom:2px;
}
.gbd-palette-item:hover { background:var(--bg-warm); border-color:var(--border); }
.gbd-palette-item:active { cursor:grabbing; }
.gbd-palette-item.dragging-src { opacity:.35; }
.gbd-palette-ico {
  width:32px; height:32px; flex-shrink:0; border-radius:8px;
  background:var(--bg-warm); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.gbd-palette-info { flex:1; min-width:0; }
.gbd-palette-name { font-size:.76rem; font-weight:500; color:var(--text); line-height:1.2; }
.gbd-palette-spacing { font-size:.62rem; color:var(--text-soft); margin-top:1px; }
.gbd-drag-hint {
  padding:7px 12px; font-size:.62rem; color:var(--text-soft);
  text-align:center; font-style:italic;
  border-top:1px solid var(--border); background:var(--bg-warm);
}
.gbd-no-results {
  padding:14px 0; text-align:center; color:var(--text-soft);
  font-size:.75rem; font-style:italic;
}

/* ── Canvas area ─────────────────────────────────────────── */
.gbd-canvas-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.gbd-canvas-bar {
  height:38px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 12px; gap:8px;
  background:var(--bg-card); flex-shrink:0;
}
.gbd-zoom-wrap { display:flex; align-items:center; gap:3px; }
.gbd-zoom-btn {
  width:24px; height:24px; border:1.5px solid var(--border);
  border-radius:5px; background:var(--bg-warm); font-size:.85rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--text-mid); transition:all .13s; font-family:inherit;
}
.gbd-zoom-btn:hover { border-color:var(--moss); color:var(--moss); }
.gbd-zoom-lbl { font-size:.7rem; color:var(--text-soft); min-width:34px; text-align:center; }
.gbd-canvas-info {
  margin-left:auto; display:flex; align-items:center; gap:12px;
  font-size:.7rem; color:var(--text-soft);
}
.gbd-canvas-scroll {
  flex:1; overflow:auto; padding:28px 28px 28px 44px; background:var(--bg);
  position:relative;
}
.gbd-canvas-scroll::-webkit-scrollbar { width:5px; height:5px; }
.gbd-canvas-scroll::-webkit-scrollbar-track { background:var(--bg-warm); }
.gbd-canvas-scroll::-webkit-scrollbar-thumb { background:var(--border-dk); border-radius:3px; }
.gbd-canvas-inner { position:relative; display:inline-block; }

/* Rulers */
.gbd-ruler-x {
  position:absolute; top:-20px; left:0;
  display:flex; pointer-events:none;
}
.gbd-ruler-y {
  position:absolute; left:-36px; top:0;
  display:flex; flex-direction:column; pointer-events:none;
}
.gbd-rtick {
  font-size:.52rem; color:var(--text-soft); font-family:inherit;
  width:var(--cell); text-align:center; line-height:1;
}
.gbd-rtick-y {
  font-size:.52rem; color:var(--text-soft); font-family:inherit;
  height:var(--cell); display:flex; align-items:center;
  justify-content:flex-end; padding-right:3px; line-height:1;
  width:34px;
}

/* ── Garden bed ──────────────────────────────────────────── */
.gbd-bed {
  position:relative; display:inline-block;
  border:2.5px solid var(--bark); border-radius:10px;
  background:#f8f3e0;
  box-shadow:0 0 0 5px rgba(139,99,64,.07), 0 6px 28px rgba(0,0,0,.09),
             inset 0 0 0 1px rgba(255,255,255,.4);
  overflow:visible; transform-origin:top left; cursor:default;
}
.gbd-bed-grid {
  position:absolute; inset:0; border-radius:8px;
  overflow:hidden; pointer-events:none;
}
.gbd-bed-grid::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);
}
.gbd-bed-grid::after {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--grid-maj) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-maj) 1px,transparent 1px);
  background-size:calc(var(--cell)*4) calc(var(--cell)*4);
}

/* Drop highlight */
.gbd-drop-hl {
  position:absolute; border:2px dashed var(--moss);
  background:rgba(74,124,63,.1); border-radius:4px;
  pointer-events:none; display:none; z-index:5;
}

/* ── Placed plants ───────────────────────────────────────── */
.gbd-plant {
  position:absolute; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10; user-select:none;
  transition:transform .14s, box-shadow .14s;
}
.gbd-plant:hover { transform:scale(1.1); z-index:20; }
.gbd-plant.selected { z-index:30; transform:scale(1.08); }

/* spread glow */
.gbd-spread {
  position:absolute; border-radius:50%; pointer-events:none;
  z-index:2; top:50%; left:50%;
  transform:translate(-50%,-50%); opacity:.2;
}

/* icon circle */
.gbd-plant-face {
  width:100%; height:100%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:3;
  font-size:calc(var(--cell)*.46);
  border:2px solid rgba(255,255,255,.65);
  box-shadow:0 2px 7px rgba(0,0,0,.14);
}

/* selected ring */
.gbd-plant.selected .gbd-plant-face::after {
  content:''; position:absolute; inset:-5px;
  border-radius:50%; border:2.5px dashed var(--moss);
  pointer-events:none;
}

/* conflict: white gap + amber glow */
.gbd-plant.conflict .gbd-plant-face {
  box-shadow:0 0 0 3px #fff, 0 0 0 6px #f5a000, 0 2px 10px rgba(0,0,0,.18);
  animation:gbd-conflict 1.2s ease-in-out infinite;
}
@keyframes gbd-conflict {
  0%,100% { box-shadow:0 0 0 3px #fff, 0 0 0 6px #f5a000, 0 2px 10px rgba(0,0,0,.18); }
  50%      { box-shadow:0 0 0 3px #fff, 0 0 0 9px rgba(245,160,0,.45), 0 2px 14px rgba(245,160,0,.3); }
}

/* amber ⚠ badge */
.gbd-conflict-badge {
  position:absolute; top:-9px; left:-9px;
  width:21px; height:21px; background:#f5a000;
  border:2.5px solid #fff; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  font-size:.68rem; line-height:1; z-index:50;
  box-shadow:0 2px 7px rgba(0,0,0,.26);
  animation:gbd-badge-pop .2s ease both;
}
@keyframes gbd-badge-pop {
  from { transform:scale(0) rotate(-20deg); }
  to   { transform:scale(1); }
}
.gbd-plant.conflict .gbd-conflict-badge { display:flex; }

/* conflict tooltip */
.gbd-conflict-tip {
  position:absolute; bottom:calc(100% + 9px); left:50%;
  transform:translateX(-50%); background:var(--text); color:#fff;
  font-size:.66rem; font-weight:500; padding:5px 10px;
  border-radius:7px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .16s; z-index:200;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.gbd-conflict-tip::after {
  content:''; position:absolute; top:100%; left:50%;
  transform:translateX(-50%); border:5px solid transparent;
  border-top-color:var(--text);
}
.gbd-plant.conflict:hover .gbd-conflict-tip { opacity:1; }

/* delete handle */
.gbd-plant-del {
  position:absolute; top:-6px; right:-6px;
  width:18px; height:18px; border-radius:50%;
  background:#e05030; color:#fff; font-size:.6rem;
  display:none; align-items:center; justify-content:center;
  cursor:pointer; z-index:40; border:1.5px solid #fff;
  line-height:1; font-family:inherit;
}
.gbd-plant.selected .gbd-plant-del { display:flex; }

/* drop animation */
@keyframes gbd-drop {
  from { transform:scale(0) rotate(-15deg); opacity:0; }
  60%  { transform:scale(1.14) rotate(3deg); opacity:1; }
  to   { transform:scale(1); opacity:1; }
}

/* ── Right panel ─────────────────────────────────────────── */
.gbd-right {
  width:200px; flex-shrink:0;
  background:var(--bg-card);
  border-left:1.5px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.gbd-right-hd {
  padding:10px 13px 8px; border-bottom:1px solid var(--border);
  font-size:.58rem; text-transform:uppercase;
  letter-spacing:1.8px; font-weight:700; color:var(--bark);
}
.gbd-detail { padding:13px; border-bottom:1px solid var(--border); display:none; }
.gbd-detail.visible { display:block; }
.gbd-detail-hd { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.gbd-detail-ico {
  width:38px; height:38px; border-radius:10px;
  background:var(--bg-warm); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
}
.gbd-detail-name { font-size:.88rem; font-weight:600; color:var(--text); }
.gbd-detail-latin { font-size:.65rem; color:var(--text-soft); font-style:italic; margin-top:1px; }
.gbd-detail-row {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:4px 0; border-bottom:1px solid rgba(228,217,184,.5);
  font-size:.72rem;
}
.gbd-detail-row:last-child { border-bottom:none; }
.gbd-detail-key { color:var(--text-soft); font-weight:500; }
.gbd-detail-val { color:var(--text); font-weight:600; text-align:right; max-width:100px; }
.gbd-no-sel {
  padding:20px 13px; text-align:center;
  color:var(--text-soft); font-size:.75rem; font-style:italic; line-height:1.6;
}
.gbd-legend { padding:11px 13px; border-bottom:1px solid var(--border); }
.gbd-legend-item {
  display:flex; align-items:center; gap:7px;
  margin-bottom:6px; font-size:.7rem; color:var(--text-mid);
}
.gbd-legend-item:last-child { margin-bottom:0; }
.gbd-legend-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.gbd-stats {
  padding:11px 13px; margin-top:auto;
  border-top:1px solid var(--border); background:var(--bg-warm);
}
.gbd-stat-row {
  display:flex; justify-content:space-between;
  font-size:.7rem; margin-bottom:4px;
}
.gbd-stat-row:last-child { margin-bottom:0; }
.gbd-stat-lbl { color:var(--text-soft); }
.gbd-stat-val { font-weight:600; color:var(--text); }

/* ── Toast ───────────────────────────────────────────────── */
.gbd-toast {
  position:fixed; bottom:20px; left:50%;
  transform:translateX(-50%) translateY(16px);
  padding:9px 18px; border-radius:9px; font-size:.76rem; font-weight:500;
  box-shadow:0 6px 22px rgba(0,0,0,.1); z-index:9999;
  opacity:0; transition:opacity .28s, transform .28s;
  pointer-events:none; max-width:320px; text-align:center;
}
.gbd-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.gbd-toast.ok  { background:#f0f8ec; border:1.5px solid #c8e8b0; color:#2a4a20; }
.gbd-toast.err { background:#fff0ee; border:1.5px solid #f0c0b8; color:#8b3030; }

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:700px) {
  .gbd-right { display:none; }
  .gbd-left  { width:190px; }
}
@media(max-width:520px) {
  .gbd-left  { display:none; }
}