/* ==========================================================
   LWTRICK CMS — Hive Planner
   ========================================================== */

.lw-planner-panel{ max-width: 100%; }

.lw-planner-toolbar{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  background: var(--lw-panel-2);
  border: 1px solid var(--lw-border);
  border-radius: 10px;
}
.lw-planner-toolbar-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.lw-planner-public-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  color: var(--lw-text-dim);
  cursor:pointer;
}

.lw-planner-save-status{
  font-size:.82rem;
  color: var(--lw-green, #3ecf8e);
  min-width: 90px;
}

.lw-planner-readonly-badge{
  font-size:.82rem;
  color: var(--lw-orange);
  background: rgba(245,166,35,.12);
  border: 1px solid rgba(245,166,35,.3);
  border-radius: 6px;
  padding: 4px 10px;
}

.lw-planner-palette{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.lw-planner-tool-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--lw-border);
  background: var(--lw-panel);
  color: var(--lw-text);
  cursor:pointer;
  font-size:.85rem;
}
.lw-planner-tool-btn:hover{ border-color: var(--lw-gold); }
.lw-planner-tool-btn.active{
  background: linear-gradient(135deg, var(--lw-gold), var(--lw-orange));
  color: #16110a;
  border-color: transparent;
  font-weight:600;
}
.lw-planner-tool-swatch{
  width: 14px; height: 14px; border-radius: 3px; display:inline-block; flex-shrink:0;
}

.lw-planner-marker-config{
  display:flex;
  align-items:center;
  gap:6px;
}
.lw-planner-marker-config input[type="color"]{
  width: 34px; height: 34px; padding:0; border:1px solid var(--lw-border); border-radius:6px; background:none; cursor:pointer;
}

.lw-planner-zoom{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
}
.lw-planner-grid-label{
  color: var(--lw-text-dim);
  font-size:.82rem;
}

.lw-planner-canvas-wrap{
  border: 1px solid var(--lw-border);
  border-radius: 10px;
  overflow: auto;
  max-height: 70vh;
  background: #0d1420;
  touch-action: none;
}
.lw-planner-canvas-wrap canvas{
  display:block;
  cursor: crosshair;
}

@media (max-width: 640px){
  .lw-planner-toolbar-row{ gap:6px; }
  .lw-planner-canvas-wrap{ max-height: 55vh; }
}

/* ---------- RTL ---------- */
html[dir="rtl"] .lw-planner-toolbar-row{ direction: ltr; justify-content: flex-end; }