/* /assets/js/editor/editor.css
   Cardinal Editor – Tabs-left layout
   - No right panel
   - Overlay + topbar + canvas styling
   - Safe overrides to kill legacy fixed left/right layouts
*/

:root {
  --ced-topbar-h: 48px;
  --ced-gap: 12px;
  --ced-panel-w: 320px;
  --ced-border: rgba(0,0,0,0.10);
}

/* =========================
   Overlay / Root mount
========================= */

#cardinal-editor-root {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none; /* shown when editor opens */
}

body.editor-open #cardinal-editor-root {
  display: block;
}

body.editor-open {
  overflow: hidden;
}

/* Optional background dim */
.cardinal-editor-shell {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.20);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   Top bar
============================ */

.ced-topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--ced-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 0 12px;
  background: #111827;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.ced-topbar .ced-left,
.ced-topbar .ced-center,
.ced-topbar .ced-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ced-topbar button {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.ced-topbar button:hover {
  background: rgba(255,255,255,0.12);
}

.ced-topbar button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================
   Tab UI (optional class hooks)
========================= */

.ced-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.ced-tab-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.ced-tab-btn.is-active {
  border: 1px solid rgba(0,120,255,0.55);
  box-shadow: 0 0 0 2px rgba(0,120,255,0.10) inset;
}

/* =========================
   Canvas / Grid
========================= */

.ced-canvas-stage {
  position: relative;
}

.ced-grid-overlay {
  pointer-events: none;
  opacity: 0.55;
}

/* =========================
   Node wrapper visuals
========================= */

.ced-node-wrapper {
  box-sizing: border-box;
}

/* =========================
   Node inner components
========================= */

.ced-text-node { width: 100%; height: 100%; }
.ced-btn-node  { width: 100%; height: 100%; }

.ced-module-node {
  width: 100%;
  height: 100%;
  border: 1px dashed #9ca3af;
  padding: 8px;
  background: #f9fafb;
  box-sizing: border-box;
}

.ced-module-title {
  font-weight: 600;
  margin-bottom: 6px;
}

/* =========================
   Properties container (NEW)
========================= */

.ced-properties {
  width: 100%;
  box-sizing: border-box;
}

/* =========================
   Sidebar form styling
========================= */

.ced-section {
  margin: 12px 0;
  padding: 10px;
  background: #f9fafb;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
}

.ced-section label {
  display: block;
  margin: 6px 0;
  font-size: 13px;
  opacity: 0.9;
}

.ced-section input,
.ced-section textarea,
.ced-section select {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  background: #fff;
}

.ced-section textarea {
  min-height: 90px;
  resize: vertical;
}

.ced-section input:focus,
.ced-section textarea:focus,
.ced-section select:focus {
  outline: none;
  border-color: rgba(0,120,255,0.55);
  box-shadow: 0 0 0 3px rgba(0,120,255,0.12);
}

/* =========================
   IMPORTANT: Kill legacy fixed left/right panel layout
   If any older CSS exists in your project, these prevent it
   from forcing a right sidebar.
========================= */

.ced-leftpanel,
.ced-rightpanel,
.ced-canvas-wrap {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
}

/* If ANY legacy component still uses ced-rightpanel, hide it.
   (Your new PropertiesSidebar does NOT use this class.) */
.ced-rightpanel {
  display: none !important;
}