/* Layout fixes only - don't touch component styles */
.main-wrapper {
  margin-left: 200px !important;
  width: calc(100vw - 200px) !important;
  padding: 0 !important;
}
.main-content {
  margin-top: 60px !important;
  padding: 24px !important;
  width: 100% !important;
}
.topbar {
  left: 200px !important;
  right: 0 !important;
  width: calc(100vw - 200px) !important;
}

.main-content {
  margin-left: 0 !important;
}

/* Light background for main content area */
.main-content {
  background: #ffffff !important;
}

/* Page titles should be dark text on light background */
.page-title, h1, h2 {
  color: #1e293b !important;
}

/* Dashboard title */
.dashboard h1, .dashboard .page-title {
  color: #1e293b !important;
}

/* Reports and other page headers */
.reports h1, .reports .page-title,
[class*="page"] h1, [class*="view"] h1 {
  color: #1e293b !important;
}

/* Dashboard cards - white bg */
.stat-card, .dashboard .stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}
.stat-card .stat-label {
  color: #64748b !important;
}

/* Sidebar title */
.sidebar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-left: 8px;
}

/* Force Logic Toolbox to upper right of canvas */
.logic-toolbox {
  position: fixed !important;
  top: 140px !important;
  right: 80px !important;
  left: auto !important;
  z-index: 100;
}

/* Dashboard cards white background */
.stat-card, .dashboard .stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
.stat-card .stat-value {
  color: #1e293b !important;
}
.stat-card .stat-label {
  color: #64748b !important;
}

/* Main content background white */
.main-content {
  background: #f8fafc !important;
}

/* Page headers dark text */
.page-header h1, h1, h2, h3 {
  color: #1e293b !important;
}

/* ============================================
   GLOBAL MODAL CENTERING FIX
   ============================================ */
.modal-overlay,
.modal-backdrop,
[class*="modal-overlay"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.modal-content,
.modal-dialog,
[class*="modal-content"] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

/* ============================================
   FULL UI FIX - Modals + Font Readability
   ============================================ */

/* MODAL CENTERING - ALL MODALS */
.modal-overlay,
.modal-backdrop,
.pipeline-modal,
.add-pipeline-modal,
[class*="modal-overlay"],
div[style*="position: fixed"][style*="background"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.modal-content,
.modal-dialog,
.modal-card,
[class*="modal-content"],
[class*="modal-dialog"] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 auto !important;
}

/* FONT READABILITY FIXES */

/* AgenticMind Toolbox - Right Panel */
.logic-toolbox,
.toolbox,
.node-palette,
[class*="toolbox"],
[class*="palette"] {
  background: white !important;
  opacity: 1 !important;
}

.logic-toolbox *,
.toolbox *,
.node-palette *,
[class*="toolbox"] *,
[class*="palette"] * {
  color: #1e293b !important;
  opacity: 1 !important;
}

.logic-toolbox .category-header,
.toolbox .category-header {
  color: #1e293b !important;
  font-weight: 600 !important;
}

.logic-toolbox .node-item,
.toolbox .node-item,
[class*="toolbox"] [class*="item"] {
  color: #374151 !important;
  opacity: 1 !important;
}

/* AgenticMind Folder Tree - Left Panel */
.folder-tree,
.agent-tree,
.agents-panel,
[class*="folder"],
[class*="tree-item"],
.tree-view {
  color: #1e293b !important;
}

.folder-tree *,
.agent-tree *,
.agents-panel *,
[class*="tree"] span,
[class*="tree"] div,
[class*="folder"] span {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* Folder names and icons */
.folder-name,
.tree-label,
.agent-name,
[class*="folder"] > span,
[class*="tree"] > span {
  color: #1e293b !important;
  font-weight: 500 !important;
}

/* Expanded folder items */
.folder-children,
.tree-children,
[class*="children"] {
  color: #374151 !important;
}

/* All text should be readable */
.main-content,
.main-content *,
.content-area,
.content-area * {
  color: inherit;
}

/* Sidebar text */
.sidebar-nav a,
.sidebar-nav span,
.nav-item,
.nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Labels and form text */
label,
.label,
.form-label {
  color: #1e293b !important;
}

/* Input placeholders */
input::placeholder,
textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Table text */
table, th, td {
  color: #1e293b !important;
}

/* Card titles and text */
.card-title,
.card-header,
h1, h2, h3, h4, h5, h6 {
  color: #1e293b !important;
}

/* Dropdown menus */
select,
.dropdown,
.select {
  color: #1e293b !important;
}

/* Node Properties Panel (bottom) */
.node-properties,
.properties-panel,
[class*="properties"] {
  background: white !important;
}

.node-properties *,
.properties-panel *,
[class*="properties"] label,
[class*="properties"] span {
  color: #1e293b !important;
}

/* Ensure workflow canvas labels are readable */
.node-label,
.node-title,
[class*="node"] [class*="label"],
[class*="node"] [class*="title"] {
  color: #1e293b !important;
  font-weight: 500 !important;
}

/* ============================================
   CENTRALIZED MODAL SYSTEM STYLES
   ============================================ */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 99999 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.modal-container,
.modal-content {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  max-height: calc(100vh - 40px) !important;
  width: 100% !important;
  max-width: 600px !important;
  overflow: hidden !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

.modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.modal-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 !important;
}

.modal-close-btn {
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 24px !important;
  color: #64748b !important;
  cursor: pointer !important;
}

.modal-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 24px !important;
  overflow-y: auto !important;
}

.modal-body .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}

.modal-body label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #1e293b !important;
}

.modal-body input,
.modal-body select,
.modal-body textarea {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  color: #1e293b !important;
}

.modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  border-top: 1px solid #e2e8f0 !important;
}

.modal-btn-primary {
  padding: 10px 20px !important;
  background: #6366f1 !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

.modal-btn-secondary {
  padding: 10px 20px !important;
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

/* MODAL CENTERING */
.modal-overlay, [class*="modal-overlay"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 99999 !important;
  padding: 20px !important;
}

.modal-content, [class*="modal-content"] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
}

.modal-body { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.modal-body .form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; }

/* FONT FIXES */
.logic-toolbox *, .toolbox *, [class*="toolbox"] * { color: #1e293b !important; opacity: 1 !important; }
.folder-tree *, .agent-tree *, [class*="tree"] * { color: #1e293b !important; opacity: 1 !important; }
label, .label { color: #1e293b !important; }

/* UNIVERSAL MODAL FIX */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 99999 !important;
  padding: 20px !important;
}

.modal,
.modal-content,
.modal-dialog {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.modal .form-group,
.modal-content .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* ============================================
   AGENTICMIND UI FIXES
   Default readable, theme can override
   ============================================ */

/* Header bar - workflow title, buttons */
.designer-header,
.workflow-header,
.agenticmind-header,
[class*="designer-header"],
[class*="workflow-header"] {
  color: #1e293b !important;
}

.designer-header *,
.workflow-header *,
.agenticmind-header * {
  color: inherit;
}

/* Back button */
.btn-back,
.back-btn,
[class*="back"] button,
button[class*="back"],
.designer-header button:first-child,
.workflow-header button:first-child {
  color: #1e293b !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  opacity: 1 !important;
}

/* Workflow title */
.workflow-title,
.designer-title,
.workflow-header h2,
.designer-header h2,
[class*="workflow"] h1,
[class*="workflow"] h2,
[class*="designer"] h1,
[class*="designer"] h2 {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* Zoom controls */
.zoom-controls,
.zoom-buttons,
[class*="zoom"] {
  color: #1e293b !important;
  opacity: 1 !important;
}

.zoom-controls button,
.zoom-buttons button,
[class*="zoom"] button {
  color: #1e293b !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  opacity: 1 !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

/* Validate button */
.btn-validate,
button[class*="validate"],
[class*="validate"] button {
  color: #1e293b !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  opacity: 1 !important;
}

/* Save button */
.btn-save,
button[class*="save"]:not(.btn-primary) {
  color: #1e293b !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

/* Status badge (SAVED, MODIFIED) */
.status-badge,
.workflow-status,
[class*="status"]:not(.status-active):not(.status-inactive) {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* ============================================
   RIGHT SIDEBAR - TOOLBOX WITH SLIDE ANIMATION
   ============================================ */
/* DISABLED .logic-toolbox, */
/* DISABLED .toolbox, */
/* DISABLED .node-palette, */
/* DISABLED .right-sidebar, */
/* DISABLED [class*="toolbox"], */
/* DISABLED [class*="palette"] { */
/* DISABLED   position: fixed !important; */
/* DISABLED   right: 0 !important; */
/* DISABLED   top: 140px !important; */
/* DISABLED   width: 280px !important; */
/* DISABLED   max-height: calc(100vh - 160px) !important; */
/* DISABLED   background: white !important; */
/* DISABLED   border-radius: 12px 0 0 12px !important; */
/* DISABLED   box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1) !important; */
/* DISABLED   z-index: 100 !important; */
/* DISABLED   overflow-y: auto !important; */
/* DISABLED    */
/* DISABLED   /* Slide animation */ */
/* DISABLED   transition: transform 0.3s ease !important; */
/* DISABLED } */
/* DISABLED  */
/* DISABLED .logic-toolbox:hover, */
/* DISABLED .toolbox:hover, */
/* DISABLED .node-palette:hover, */
/* DISABLED .right-sidebar:hover, */
/* DISABLED [class*="toolbox"]:hover, */
/* DISABLED [class*="palette"]:hover { */
/* DISABLED   transform: translateX(0) !important; */
/* DISABLED } */
/* DISABLED  */
/* DISABLED /* Show tab/handle when collapsed */ */
/* DISABLED .logic-toolbox::before, */
/* DISABLED .toolbox::before, */
/* DISABLED [class*="toolbox"]::before { */
/* DISABLED   position: absolute !important; */
/* DISABLED   left: -30px !important; */
/* DISABLED   top: 50% !important; */
/* DISABLED   transform: translateY(-50%) rotate(-90deg) !important; */
/* DISABLED   background: #6366f1 !important; */
/* DISABLED   color: white !important; */
/* DISABLED   padding: 8px 16px !important; */
/* DISABLED   border-radius: 8px 8px 0 0 !important; */
/* DISABLED   font-size: 12px !important; */
/* DISABLED   font-weight: 500 !important; */
/* DISABLED   white-space: nowrap !important; */
/* DISABLED   cursor: pointer !important; */
/* DISABLED } */
/* DISABLED  */
/* Toolbox content readable */
.logic-toolbox *,
.toolbox *,
.node-palette *,
[class*="toolbox"] * {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* Category headers in toolbox */
.toolbox-category,
.category-header,
[class*="category"] {
  font-weight: 600 !important;
  color: #1e293b !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Node items in toolbox */
.toolbox-item,
.node-item,
.agent-item,
[class*="toolbox"] [class*="item"] {
  padding: 10px 16px !important;
  cursor: grab !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.2s !important;
}

.toolbox-item:hover,
.node-item:hover,
.agent-item:hover {
  background: #f1f5f9 !important;
}

/* ============================================
   LEFT SIDEBAR - FOLDER TREE READABLE
   ============================================ */
.folder-tree,
.agent-tree,
.agents-panel,
[class*="folder-tree"],
[class*="agent-tree"] {
  color: #1e293b !important;
}

.folder-tree *,
.agent-tree *,
.agents-panel * {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* Folder/tree item hover */
.tree-item:hover,
.folder-item:hover,
[class*="tree"] [class*="item"]:hover {
  background: #f1f5f9 !important;
}

/* ============================================
   CANVAS AREA
   ============================================ */
.workflow-canvas,
.canvas-area,
[class*="canvas"] {
  background: #f8fafc !important;
}

/* Grid pattern */
.canvas-grid {
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

/* ============================================
   THEME OVERRIDE SUPPORT
   These use CSS custom properties so themes can override
   ============================================ */
:root {
  --agenta-text-primary: #1e293b;
  --agenta-text-secondary: #64748b;
  --agenta-bg-primary: #ffffff;
  --agenta-bg-secondary: #f8fafc;
  --agenta-border: #e2e8f0;
  --agenta-accent: #6366f1;
}

/* Apply theme variables where possible */
.agenticmind-page {
  --text-color: var(--agenta-text-primary);
  --bg-color: var(--agenta-bg-primary);
}

/* ============================================
   FIX 1: AGENTA LOGO TEXT IN SIDEBAR
   ============================================ */
.sidebar-header,
.sidebar-brand,
.sidebar-logo,
[class*="sidebar"] > a:first-child,
[class*="sidebar"] > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
}

/* Add "Agenta" text after logo if missing */

/* If there's already a title element, style it */
.sidebar-title,
.sidebar-brand-text,
.logo-text {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: white !important;
  display: inline-block !important;
}

/* ============================================
   FIX 2: AGENTICMIND HEADER TEXT READABLE
   ============================================ */

/* Workflow title - force dark text */
.workflow-title,
.workflow-name,
.designer-title,
h1.workflow-title,
h2.workflow-title,
[class*="workflow"] > h1,
[class*="workflow"] > h2,
[class*="designer"] > h1,
[class*="designer"] > h2,
.agenticmind-page h1,
.agenticmind-page h2,
/* Target the specific element structure */
.page-header h1,
.designer-header h2,
.workflow-header h2,
/* Direct child text elements in header area */
.designer-header > *,
.workflow-header > * {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* Specifically target "Untitled Workflow" text */
[class*="workflow"][class*="title"],
[class*="workflow"][class*="name"],
span[class*="workflow"],
div[class*="workflow"] > span,
/* Any text next to robot icon */
.designer-header span,
.workflow-header span {
  color: #1e293b !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* ============================================
   FIX 3: RIGHT SIDEBAR SLIDE ANIMATION
   Slides OUT from right edge, then IN on hover
   ============================================ */

/* Right sidebar container */
.logic-toolbox,
.toolbox,
/* DISABLED2 .node-palette, */
/* DISABLED2 .right-sidebar, */
/* DISABLED2 .agents-toolbox, */
/* DISABLED2 [class*="toolbox"]:not(.left), */
/* DISABLED2 [class*="palette"] { */
/* DISABLED2   position: fixed !important; */
/* DISABLED2   right: 0 !important; */
/* DISABLED2   top: 120px !important; */
/* DISABLED2   width: 280px !important; */
/* DISABLED2   height: auto !important; */
/* DISABLED2   max-height: calc(100vh - 140px) !important; */
/* DISABLED2   background: white !important; */
/* DISABLED2   border-radius: 12px 0 0 12px !important; */
/* DISABLED2   box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important; */
/* DISABLED2   z-index: 100 !important; */
/* DISABLED2   overflow-y: auto !important; */
/* DISABLED2   overflow-x: hidden !important; */
/* DISABLED2    */
/* DISABLED2   /* Start position: mostly hidden, only 40px visible */ */
/* DISABLED2    */
/* DISABLED2   /* Smooth slide animation */ */
/* DISABLED2   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; */
/* DISABLED2 } */
/* DISABLED2  */
/* DISABLED2 /* On hover: slide fully into view */ */
/* DISABLED2 .logic-toolbox:hover, */
/* DISABLED2 .toolbox:hover, */
/* DISABLED2 .node-palette:hover, */
/* DISABLED2 .right-sidebar:hover, */
/* DISABLED2 .agents-toolbox:hover, */
/* DISABLED2 [class*="toolbox"]:not(.left):hover, */
/* DISABLED2 [class*="palette"]:hover { */
/* DISABLED2   transform: translateX(0) !important; */
/* DISABLED2 } */
/* DISABLED2  */
/* DISABLED2 /* Visible tab/handle when collapsed */ */
/* DISABLED2 .logic-toolbox::before, */
/* DISABLED2 .toolbox::before, */
/* DISABLED2 .node-palette::before, */
/* DISABLED2 [class*="toolbox"]:not(.left)::before { */
/* DISABLED2   position: absolute !important; */
/* DISABLED2   left: 8px !important; */
/* DISABLED2   top: 50% !important; */
/* DISABLED2   transform: translateY(-50%) !important; */
/* DISABLED2   font-size: 16px !important; */
/* DISABLED2   color: #6366f1 !important; */
/* DISABLED2   opacity: 1 !important; */
/* DISABLED2   transition: opacity 0.2s !important; */
/* DISABLED2 } */
/* DISABLED2  */
/* DISABLED2 /* Hide arrow when expanded */ */
/* DISABLED3 .logic-toolbox:hover::before, */
/* DISABLED3 .toolbox:hover::before, */
/* DISABLED3 [class*="toolbox"]:not(.left):hover::before { */
/* DISABLED3   opacity: 0 !important; */
/* DISABLED3 } */

/* Ensure toolbox content is readable */
.logic-toolbox,
.logic-toolbox *,
.toolbox,
.toolbox *,
[class*="toolbox"] *,
[class*="palette"] * {
  color: #1e293b !important;
}

/* Category headers */
.logic-toolbox [class*="header"],
.logic-toolbox [class*="category"],
.toolbox [class*="header"],
.toolbox [class*="category"] {
  font-weight: 600 !important;
  background: #f8fafc !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}

/* Items in toolbox */
.logic-toolbox [class*="item"],
.toolbox [class*="item"] {
  padding: 8px 16px !important;
  cursor: grab !important;
  transition: background 0.15s !important;
}

.logic-toolbox [class*="item"]:hover,
.toolbox [class*="item"]:hover {
  background: #f1f5f9 !important;
}

/* ============================================
   CLEAN UI FIXES - v2
   ============================================ */

/* FIX 1: Remove any duplicate Agenta text */
.sidebar-header::after,
.sidebar-brand::after,
.sidebar-logo::after {
  content: none !important;
  display: none !important;
}

/* FIX 2: AgenticMind header text readable */
.agenticmind-page .workflow-title,
.agenticmind-page .designer-header span,
.agenticmind-page h2,
.workflow-header h2,
.designer-header h2 {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* FIX 3: Logic Toolbox - Right Panel - PROPER STYLING */
.logic-toolbox,
.node-toolbox,
.toolbox-panel,
/* DISABLED4 .right-panel, */
/* DISABLED4 [class*="logic-toolbox"], */
/* DISABLED4 [class*="toolbox-panel"] { */
/* DISABLED4   position: fixed !important; */
/* DISABLED4   right: 0 !important; */
/* DISABLED4   top: 130px !important; */
/* DISABLED4   width: 280px !important; */
/* DISABLED4   min-height: 400px !important; */
/* DISABLED4   max-height: calc(100vh - 150px) !important; */
/* DISABLED4   background: #ffffff !important; */
/* DISABLED4   border: 1px solid #e2e8f0 !important; */
/* DISABLED4   border-right: none !important; */
/* DISABLED4   border-radius: 12px 0 0 12px !important; */
/* DISABLED4   box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1) !important; */
/* DISABLED4   z-index: 500 !important; */
/* DISABLED4   overflow: hidden !important; */
  display: flex !important;
  flex-direction: column !important;
  
  /* Slide animation - start off-screen */
  transform: translateX(calc(100% - 50px)) !important;
  transition: transform 0.4s ease-in-out !important;
}

/* Hover - slide in */
.logic-toolbox:hover,
.node-toolbox:hover,
.toolbox-panel:hover,
.right-panel:hover,
[class*="logic-toolbox"]:hover,
[class*="toolbox-panel"]:hover {
  transform: translateX(0) !important;
}

/* Toolbox header */
.logic-toolbox > div:first-child,
.toolbox-header,
[class*="toolbox"] > [class*="header"] {
  padding: 16px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  flex-shrink: 0 !important;
}

/* Toolbox content area */
.logic-toolbox > div:not(:first-child),
.toolbox-content,
[class*="toolbox"] > [class*="content"] {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 8px !important;
}

/* Toolbox categories */
.logic-toolbox [class*="category"],
.logic-toolbox [class*="group"] {
  margin-bottom: 8px !important;
}

.logic-toolbox [class*="category"] > [class*="header"],
.logic-toolbox [class*="group"] > [class*="header"],
.logic-toolbox [class*="category"] > div:first-child {
  padding: 10px 12px !important;
  background: #f1f5f9 !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Toolbox items */
.logic-toolbox [class*="item"],
.logic-toolbox [class*="node-item"],
.logic-toolbox [class*="agent-item"] {
  padding: 8px 12px !important;
  margin: 2px 0 !important;
  border-radius: 6px !important;
  cursor: grab !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #1e293b !important;
  transition: background 0.15s !important;
}

.logic-toolbox [class*="item"]:hover {
  background: #e0e7ff !important;
}

/* All text in toolbox readable */
.logic-toolbox,
.logic-toolbox * {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* FIX 4: Left sidebar - ensure no extra text */
.sidebar,
.left-sidebar,
nav[class*="sidebar"] {
  /* Normal sidebar styling */
}

/* Hide any CSS-generated content we accidentally added */
.sidebar *::after,
.sidebar *::before {
  content: none !important;
}

/* ============================================
   MODAL FIXES (keeping these)
   ============================================ */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 99999 !important;
}

.modal,
.modal-content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* ============================================
   AGENTICMIND CANVAS FIXES
   ============================================ */

/* CANVAS BACKGROUND - Grey dot grid (approx 1/8" = 12px at 96dpi) */
.workflow-canvas,
.canvas-area,
.designer-canvas,
[class*="canvas"] {
  background-color: #fafafa !important;
  background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px) !important;
  background-size: 12px 12px !important;
}

/* ============================================
   LOGIC TOOLBOX - FLOATING & DRAGGABLE
   ============================================ */
.logic-toolbox,
.node-toolbox,
.toolbox-floating,
[class*="logic-toolbox"],
[class*="node-toolbox"] {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 220px !important;
  max-height: 500px !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  z-index: 100 !important;
  overflow: hidden !important;
  cursor: move !important;
  
  /* Remove any fixed positioning */
  transform: none !important;
  transition: box-shadow 0.2s !important;
}

.logic-toolbox:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Toolbox header - drag handle */
.logic-toolbox > div:first-child,
.logic-toolbox-header,
[class*="logic-toolbox"] > [class*="header"],
[class*="toolbox"] > [class*="header"]:first-child {
  padding: 12px 16px !important;
  background: #fef3c7 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  cursor: grab !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Toolbox content */
.logic-toolbox-content,
.logic-toolbox > div:not(:first-child) {
  max-height: 400px !important;
  overflow-y: auto !important;
  padding: 8px !important;
}

/* Toolbox items */
.logic-toolbox [class*="item"],
[class*="logic-toolbox"] [class*="item"] {
  padding: 10px 14px !important;
  margin: 4px 0 !important;
  border-radius: 8px !important;
  cursor: grab !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #1e293b !important;
  background: #f8fafc !important;
  border: 1px solid transparent !important;
  transition: all 0.15s !important;
}

.logic-toolbox [class*="item"]:hover {
  background: #e0e7ff !important;
  border-color: #6366f1 !important;
  transform: translateX(-2px) !important;
}

/* Collapse/expand button */
.logic-toolbox [class*="collapse"],
.logic-toolbox [class*="toggle"] {
  cursor: pointer !important;
  padding: 4px !important;
}

/* ============================================
   AI ASSISTANT SIDEBAR - SLIDE IN/OUT
   ============================================ */
/* DISABLED5 .ai-assistant, */
/* DISABLED5 .assistant-sidebar, */
/* DISABLED5 .help-sidebar, */
/* DISABLED5 [class*="assistant"][class*="sidebar"], */
/* DISABLED5 [class*="ai-assistant"] { */
/* DISABLED5   position: fixed !important; */
/* DISABLED5   right: 0 !important; */
/* DISABLED5   top: 50% !important; */
/* DISABLED5   transform: translateY(-50%) translateX(calc(100% - 45px)) !important; */
/* DISABLED5   width: 350px !important; */
/* DISABLED5   max-height: 80vh !important; */
/* DISABLED5   background: white !important; */
/* DISABLED5   border-radius: 16px 0 0 16px !important; */
/* DISABLED5   box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15) !important; */
/* DISABLED5   z-index: 1000 !important; */
/* DISABLED5   overflow: hidden !important; */
/* DISABLED5    */
/* DISABLED5   /* Smooth slide animation */ */
/* DISABLED5   transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; */
/* DISABLED5 } */
/* DISABLED5  */
/* DISABLED5 .ai-assistant:hover, */
/* DISABLED5 .assistant-sidebar:hover, */
/* DISABLED5 [class*="assistant"][class*="sidebar"]:hover, */
/* DISABLED5 [class*="ai-assistant"]:hover { */
/* DISABLED5   transform: translateY(-50%) translateX(0) !important; */
/* DISABLED5 } */
/* DISABLED5  */
/* DISABLED5 /* AI Assistant tab/handle */ */
/* DISABLED5 .ai-assistant-tab, */
/* DISABLED5 [class*="assistant"] [class*="tab"], */
/* DISABLED5 .ai-assistant > div:first-child { */
/* DISABLED5   position: absolute !important; */
/* DISABLED5   left: 0 !important; */
/* DISABLED5   top: 50% !important; */
/* DISABLED5   transform: translateY(-50%) !important; */
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: white !important;
  padding: 12px 8px !important;
  border-radius: 8px 0 0 8px !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

/* ============================================
   TOOLBAR - SNAP TO GRID CHECKBOX
   Add via JavaScript, style here
   ============================================ */
.snap-to-grid-control,
.toolbar-checkbox,
[class*="snap-grid"] {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #374151 !important;
  cursor: pointer !important;
}

.snap-to-grid-control input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

.snap-to-grid-control:hover {
  background: #e2e8f0 !important;
}

/* ============================================
   ZOOM CONTROLS AREA
   ============================================ */
.zoom-controls,
.toolbar-zoom,
[class*="zoom"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.zoom-controls button {
  min-width: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* AgenticMind Logic Toolbox Override - Must be at end for specificity */
.agentic-mind .logic-toolbox,
div[class*="agentic-mind"] .logic-toolbox {
  position: fixed !important;
  right: auto !important;
  top: auto !important;
  width: 200px !important;
  height: auto !important;
  min-height: 100px !important;
  max-height: 400px !important;
  background: white !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 600 !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}
.agentic-mind .logic-toolbox::before,
div[class*="agentic-mind"] .logic-toolbox::before {
  display: none !important;
  content: none !important;
}
.agentic-mind .toolbox-header,
div[class*="agentic-mind"] .toolbox-header {
  background: #fef3c7 !important;
  color: #1e293b !important;
  cursor: move !important;
  pointer-events: auto !important;
  padding: 10px 12px !important;
  border-radius: 8px 8px 0 0 !important;
}
.agentic-mind .toolbox-agents,
div[class*="agentic-mind"] .toolbox-agents {
  background: white !important;
  max-height: 350px !important;
  overflow-y: auto !important;
}

/* Fix Logic Toolbox - Single cohesive box */
.agentic-mind .logic-toolbox {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.agentic-mind .logic-toolbox .toolbox-header {
  flex-shrink: 0 !important;
  border-bottom: 1px solid #fcd34d !important;
}
.agentic-mind .logic-toolbox .toolbox-agents {
  flex: 1 !important;
  border-radius: 0 0 8px 8px !important;
  padding: 8px !important;
}

/* FORCE Override for AgenticMind Logic Toolbox */
div[class*="logic-toolbox"][data-v-] {
  position: fixed !important;
  display: flex !important;
  flex-direction: column !important;
  width: 200px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  background: white !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 600 !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}
div[class*="logic-toolbox"][data-v-]::before,
div[class*="logic-toolbox"][data-v-]::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}
div[class*="toolbox-header"][data-v-] {
  background: #fef3c7 !important;
  color: #1e293b !important;
  cursor: move !important;
  pointer-events: auto !important;
  padding: 10px 12px !important;
  border-radius: 8px 8px 0 0 !important;
  border-bottom: 1px solid #fcd34d !important;
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
div[class*="toolbox-agents"][data-v-] {
  background: white !important;
  padding: 8px !important;
  border-radius: 0 0 8px 8px !important;
  overflow-y: auto !important;
  max-height: 350px !important;
}

/* FORCE Override for AgenticMind Logic Toolbox */
div[class*="logic-toolbox"][data-v-] {
  position: fixed !important;
  display: flex !important;
  flex-direction: column !important;
  width: 200px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  background: white !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 600 !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}
div[class*="logic-toolbox"][data-v-]::before,
div[class*="logic-toolbox"][data-v-]::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}
div[class*="toolbox-header"][data-v-] {
  background: #fef3c7 !important;
  color: #1e293b !important;
  cursor: move !important;
  pointer-events: auto !important;
  padding: 10px 12px !important;
  border-radius: 8px 8px 0 0 !important;
  border-bottom: 1px solid #fcd34d !important;
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
div[class*="toolbox-agents"][data-v-] {
  background: white !important;
  padding: 8px !important;
  border-radius: 0 0 8px 8px !important;
  overflow-y: auto !important;
  max-height: 350px !important;
}

/* Fix drag functionality for logic toolbox */
.logic-toolbox,
div[class*="logic-toolbox"] {
  pointer-events: auto !important;
}
.toolbox-header,
div[class*="toolbox-header"] {
  pointer-events: auto !important;
  cursor: move !important;
  cursor: grab !important;
}
.toolbox-header:active,
div[class*="toolbox-header"]:active {
  cursor: grabbing !important;
}

/* FINAL OVERRIDE - Allow inline styles to work for logic-toolbox position */
.logic-toolbox[style],
div.logic-toolbox[style],
[class*="logic-toolbox"][style] {
  left: unset;
  right: unset;
  top: unset;
}

/* Fix collapsed toolbox - no white box visible */
.logic-toolbox.collapsed {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}
.logic-toolbox.collapsed .toolbox-agents {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.logic-toolbox.collapsed .toolbox-header {
  border-radius: 8px !important;
  border-bottom: none !important;
}

/* AI Assistant header text white */
.ai-panel-header,
.ai-panel-header h3,
.ai-panel-header * {
  color: white !important;
}

/* Properties tab text white */
.props-tab,
.props-tab span,
.properties-panel-wrapper .props-tab {
  color: white !important;
}

/* Force props-tab to show when node is selected */
.props-tab.hidden {
  display: block !important;
}

/* Or better - only show when there's a selected node (handled by Vue) */
.properties-panel-wrapper:has(.properties-panel.expanded) .props-tab.hidden {
  display: none !important;
}

/* Properties Panel - Centered at bottom */
.properties-panel-wrapper {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  width: 600px !important;
  z-index: 99999 !important;
}

.properties-panel.expanded {
  position: relative !important;
  width: 100% !important;
  height: 350px !important;
  max-height: 350px !important;
  background: #fff !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
  left: 0 !important;
  transform: none !important;
}

.props-tab {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 100000 !important;
}
/* Properties Panel Override - Maximum Specificity */
div.properties-panel-wrapper,
.properties-panel-wrapper[data-v-f5727699],
[class*="properties-panel-wrapper"] {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  width: 550px !important;
  height: auto !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  margin-left: 100px !important; /* offset for sidebar */
}

div.properties-panel-wrapper > *,
.properties-panel-wrapper[data-v-f5727699] > * {
  pointer-events: auto !important;
}

div.properties-panel.expanded,
.properties-panel.expanded[data-v-f5727699],
[class*="properties-panel"].expanded {
  position: relative !important;
  width: 100% !important;
  height: 380px !important;
  max-height: 380px !important;
  min-height: 380px !important;
  background: #ffffff !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.25) !important;
  border-top: 3px solid #3b82f6 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

  display: none !important;
}

/* Center on canvas area (after sidebar) */
div.properties-panel-wrapper,
[class*="properties-panel-wrapper"] {
  left: calc(200px + (100vw - 200px) / 2) !important;
  margin-left: 0 !important;
}

/* Props Tab - show when panel is closed */
.props-tab {
  display: block !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 200px !important;
  z-index: 10000 !important;
}
.props-tab.hidden {
  display: none !important;
}

/* OVERRIDE ALL - Properties Panel */
div.properties-panel-wrapper[data-v-f5727699],
div.properties-panel-wrapper[data-v-faedf971],
div[class*="properties-panel-wrapper"] {
  position: fixed !important;
  bottom: 0 !important;
  left: 200px !important;
  right: 220px !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  z-index: 99999 !important;
  pointer-events: none !important;
}

div.properties-panel-wrapper[data-v-f5727699] > *,
div.properties-panel-wrapper[data-v-faedf971] > *,
div[class*="properties-panel-wrapper"] > * {
  pointer-events: auto !important;
}

/* Documentation modal - fix light text */
.docs-modal h3,
.docs-modal h4,
.docs-section h3,
.docs-title-text h2,
.example-header h4 {
  color: #f1f5f9 !important;
}

.docs-overview,
.docs-tip,
.use-case-item,
.field-desc,
.example-desc,
.tip-item {
  color: #cbd5e1 !important;
}

.docs-section {
  border-bottom: 1px solid #334155 !important;
}

/* ============================================
   LAYOUT FIX v5 - scrollbars, padding, heights
   ============================================ */

/* page-content: below fixed 60px topbar, fills remaining viewport */
.page-content.with-topbar {
  margin-top: 60px !important;
  height: calc(100vh - 60px) !important;
  padding: 24px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* AgenticMind designer: no outer scroll, no padding */
.page-content.with-topbar:has(.agentic-mind) {
  overflow: hidden !important;
  padding: 0 !important;
}

/* agentic-mind: fill parent (not 100vh - it's already constrained) */
.agentic-mind {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.agentic-mind > .main-layout {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Folder tree: internal scroll */
.agentic-mind .folder-tree-panel {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.agentic-mind .tree-content {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* Canvas: scrollbar VISIBLE (auto, not hidden!) */
.agentic-mind .canvas-area {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: auto !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* Consistent 24px padding on ALL page root containers */
.dashboard-page,
.pipelines-page,
.profiles-page,
.analytics-page,
.reports-page,
.social-page,
.predictions-page,
.campaigns-page,
.integrations-page,
.settings-container,
.status-page,
.admin-page,
.tenant-list,
.user-list,
.trash-page {
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* AgenticMind index (workflow list) also gets 24px */
.agenticmind-workflows,
.workflow-list-page {
  padding: 24px !important;
  box-sizing: border-box !important;
}


/* ============================================
   LAYOUT FIX v6
   ============================================ */

/* page-content: below fixed 60px topbar, fills remaining viewport */
.page-content.with-topbar {
  margin-top: 60px !important;
  height: calc(100vh - 60px) !important;
  padding: 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Children should NOT independently scroll (prevents double scrollbar) */
.page-content.with-topbar > * {
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  padding-top: 0 !important;
}

/* AgenticMind designer: override - no outer scroll, no padding */
.page-content.with-topbar:has(.agentic-mind) {
  overflow: hidden !important;
  padding: 0 !important;
}
.page-content.with-topbar > .agentic-mind {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.agentic-mind > .main-layout {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.agentic-mind .folder-tree-panel {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.agentic-mind .tree-content {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* Canvas: scrollbar visible */
.agentic-mind .canvas-area {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: auto !important;
  height: 100% !important;
  max-height: 100% !important;
}


/* ============================================
   LAYOUT FIX v7
   ============================================ */

/* page-content: below fixed 60px topbar, fills remaining viewport */
.page-content.with-topbar {
  margin-top: 60px !important;
  height: calc(100vh - 60px) !important;
  padding: 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Kill double scrollbar: children don't scroll independently */
.page-content.with-topbar > * {
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Kill extra top/left padding on ALL page root containers.
   page-content already provides 24px on all sides. */
.page-content.with-topbar > * {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
}

/* Also kill padding on common wrapper divs inside pages */
.page-content.with-topbar > * > .page-header,
.page-content.with-topbar > * > .content-header {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Page titles: no extra top margin */
.page-content h1:first-child,
.page-content h2:first-child,
.page-content > * > h1:first-child,
.page-content > * > h2:first-child,
.page-content > * > .page-header:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── AgenticMind designer override ── */
.page-content.with-topbar:has(.agentic-mind) {
  overflow: hidden !important;
  padding: 0 !important;
}
.page-content.with-topbar > .agentic-mind {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.agentic-mind > .main-layout {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.agentic-mind .folder-tree-panel {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.agentic-mind .tree-content {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

.agentic-mind .canvas-area {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: auto !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* Kill top margin on page titles so top spacing matches left (24px) */
.page-content.with-topbar > * h1:first-of-type,
.page-content.with-topbar > * h2:first-of-type,
.page-content.with-topbar > div > h1:first-child,
.page-content.with-topbar > div > h2:first-child,
.page-content.with-topbar > div > div:first-child > h1,
.page-content.with-topbar > div > div:first-child > h2,
.page-content.with-topbar > div > header:first-child,
.page-content.with-topbar > div > .page-title:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Settings has its own container - kill its extra padding */
.settings-container,
.settings-page,
.settings-wrapper,
[class*="settings"] > .settings-tabs,
.page-content.with-topbar > div[class*="settings"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

/* NUCLEAR: kill ALL top margins in page-content first 2 levels */
.page-content.with-topbar > * > *:first-child {
  margin-top: 0 !important;
}
.page-content.with-topbar > *:first-child {
  margin-top: 0 !important;
}
/* Default h1/h2 have ~0.67em margin-top, kill it everywhere in page-content */
.page-content h1,
.page-content h2 {
  margin-top: 0 !important;
}

/* Override compiled padding-top: 90px explicitly */
.page-content.with-topbar {
  padding-top: 24px !important;
}

/* TEST: make it obvious */
main.page-content.with-topbar {
  padding-top: 24px !important;
}