/* Base Layout Styles */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  font-weight: 200 !important; /* Default font-weight for the site */
}

/* Ensure standard bold tags remain bold */
strong, b {
  font-weight: bold; /* Or you can use a numeric value like 700 */
}


/* Define primary colors in variables */
:root {
  --primary: hsl(93, 100%, 34%); /* Base green color for buttons */
  --primary-hover: hsl(93, 100%, 39%); /* Slightly lighter for hover states */
  --edit-button-color: #c0c0c0;
  --delete-button-color: #929292;
  --drag-handle-bg: #9b9b9ba9;
  --drag-handle-color: rgba(255, 255, 255, 0.5);
  --element-border: 2px solid #dddddd37;
  
  --menu-font-family: Arial, sans-serif;
  --menu-font-size: 16px;
  --menu-color: #333;
  --menu-active-color: #4682B4;
  --menu-hover-color: #3a6d96;
  --menu-vertical-spacing: 2px;
  --menu-background-color: #fafafa;
  --site-background-color: #ffffff;
  --sidebar-width: 15vw; /* Default sidebar width */
  --sidebar-edit-width: 44vw; /* Default sidebar width in edit mode */
  --font-weight: 200;
  
  /* Sidebar padding variables (instead of margins) */
  --sidebar-padding-top: 0px;
  --sidebar-padding-right: 0px;
  --sidebar-padding-bottom: 0px;
  --sidebar-padding-left: 0px;

  --menu-layout: sidebar;
  --mobile-header-height: 80px;
}

/* Add these rules near the TOP of your menu-styles.css file */

/* Hide edit UI elements by default until JS initializes */
body:not(.hydra-initialized) .edit-controls,
body:not(.hydra-initialized) .sidebar .element-controls,
body:not(.hydra-initialized) .sidebar .edit-btn,
body:not(.hydra-initialized) .sidebar .delete-btn,
body:not(.hydra-initialized) .sidebar .visibility-toggle,
body:not(.hydra-initialized) .sidebar .drag-handle,
body:not(.hydra-initialized) #editButton,
body:not(.hydra-initialized) #logoutButton {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Even in edit mode, don't show these until fully initialized */
body:not(.hydra-initialized) .sidebar.editing .controls,
body:not(.hydra-initialized) .sidebar.editing .edit-btn,
body:not(.hydra-initialized) .sidebar.editing .delete-btn,
body:not(.hydra-initialized) .sidebar.editing .element-controls,
body:not(.hydra-initialized) .edit-mode-active .edit-controls {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Base visibility rules - only show in edit mode after initialization */
.edit-btn,
.delete-btn,
.edit-controls,
.element-controls {
  display: none !important; 
}

/* Only show login button by default */
#loginBtn {
  display: block !important;
}

/* Hide logout and edit buttons by default */
#logoutButton,
#editButton {
  display: none !important;
}

/* Clean initial state for menu items */
.sidebar:not(.editing) .gallery-item-content {
  border: none !important;
  background: transparent !important;
}


/* Fix for the container layout with fixed sidebar width */
.container {
  display: flex;
  height: 100vh;
  overflow: hidden; /* Prevent outer scrolling */
  position: relative; /* For proper positioning */
}

body .container,
html body .container,
.sidebar + .container,
.sidebar ~ .container {
  max-width: 100vw !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Force all media queries to respect this override */
@media (min-width: 576px), (min-width: 768px), (min-width: 992px), (min-width: 1200px) {
  body .container,
  html body .container,
  .sidebar + .container,
  .sidebar ~ .container {
    max-width: 100vw !important;
    width: 100% !important;
  }
  
}

#loginBtn {
  display: none !important;
}

/* Set fixed sidebar width and prevent squashing */
.sidebar {
  width: var(--sidebar-width, 15vw); /* Use CSS variable for easy customization */
  min-width: 200px; /* Minimum width to prevent excessive squashing */
  max-width: 350px; /* Maximum width for large screens */
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0; /* Prevent shrinking */
  position: relative; /* For proper positioning */
  z-index: 10; /* Ensure sidebar is above other elements */
  transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease; /* Smooth transition */
}

.sidebar:not(.editing) {
  background-color: var(--menu-background-color, #fafafa);
}

.container {
  background-color: var(--site-background-color, #ffffff);
}

/* Gallery container with proper vertical scrolling */
.gallery-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto; /* Enable vertical scrolling */
  position: relative; /* For proper positioning */
}

.gallery-iframe {
  flex-grow: 1;
  border: none !important;
  width: 100%;
  height: auto; /* Allow height to adjust to content */
  min-height: 100%; /* At least take full height */
}

/* Custom scrollbar styling */
.sidebar::-webkit-scrollbar {
  width: 0px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.03);
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.15);
  border-radius: 0px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,0.25);
}

/* Text Block Element Styles */
.sidebar-text-container {
  padding: 5px 0;
  margin: 5px 0;
  width: 100%;
}

.sidebar-text {
  padding: 10px;
  background-color: transparent;
  border-radius: 0px;
  font-size: 0.95em;
  color: #333; /* Consider using var(--menu-color) if that's the intended color */
  white-space: pre-wrap;
  word-break: break-word;
  /* Apply menu font family */
  font-family: var(--menu-font-family, inherit) !important;
  margin-bottom: 0.25em; /* Example: Tighter spacing */
  margin-top: 0;
}

/* Add this new rule */
.sidebar-text p {
  margin-bottom: 0.25em; /* Example: Tighter spacing */
  margin-top: 0;
}


.sidebar:not(.editing) .sidebar-text {
  background-color: transparent;
}

.edit-text-btn {
  margin-top: 8px;
  margin-bottom: 5px;
  padding: 5px 10px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  font-size: 14px;
}

.edit-text-btn:hover {
  background-color: var(--primary-hover);
}

.text-editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-editor {
  background-color: white;
  border-radius: 0px;
  padding: 20px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.text-editor textarea {
  width: 100%;
  min-height: 200px;
  padding: 10px;
  border-radius: 0px;
  border: 1px solid #ddd;
  font-family: inherit;
  font-size: inherit;
  resize: vertical;
  margin-bottom: 15px;
}

.edit-text-content {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border-radius: 0px;
  border: 1px solid #ddd;
  font-family: inherit;
  font-size: inherit;
  resize: vertical;
  margin-bottom: 10px;
}

/* Import Classic Form Styles */
.import-classic-form,
#importClassicForm,
body .sidebar .import-classic-form {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  display: none !important; /* Use !important to override any conflicting styles */
  transition: all 0.3s ease;
  background-color: #f9f9f9;
}

.import-classic-form.visible,
#importClassicForm.visible,
body .sidebar .import-classic-form.visible {
  padding: 15px;
  max-height: 600px;
  display: block !important; /* Use !important to ensure it shows when visible class is applied */
}

.import-classic-form h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.import-classic-form p {
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.import-classic-form input[type="text"],
.import-classic-form select {
  width: 100%;
  padding: 8px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0.746);
}

.import-classic-form small {
  display: block;
  color: #666;
  font-size: 12px;
  margin-bottom: 10px;
}

.form-group {
  margin-bottom: 15px;
}

.import-status {
  margin: 15px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 0px;
  border: 1px solid #ddd;
}

.import-progress {
  height: 10px;
  background-color: #eee;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-bar {
  height: 100%;
  width: 0;
  background-color: #4682B4;
  transition: width 0.3s ease;
}

.status-message {
  font-size: 14px;
  color: #666;
  text-align: center;
}

/* Style checkbox */
.import-classic-form input[type="checkbox"] {
  margin-right: 5px;
  vertical-align: middle;
}

/* Form actions */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

/* Animation for progress bar */
@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.importing .progress-bar {
  animation: pulse 1.5s infinite;
}

/* Header and Controls */
.sidebar-header {
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 10px;
  gap: 8px;
  border-bottom: none !important;
  background-color: var(--menu-background-color, #fafafa);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Add a subtle separator between top sections */
.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: transparent;
}


/* Make each section handle its own scrolling */
.sidebar-header, 
.edit-controls {
  flex-shrink: 0; /* Prevent these from shrinking */
}

.sidebar-header:not(.editing) {
  background-color: var(--menu-background-color, #fafafa);
  border: none !important;
}


/* CONSISTENT TEXT COLOR between view and edit mode */
body .sidebar.editing .menu-item {
  font-family: var(--menu-font-family) !important;
  font-size: var(--menu-font-size) !important;
  color: var(--menu-color) !important;
}

body .sidebar.editing .menu-item:hover {
  color: var(--menu-hover-color) !important;
}

body .sidebar.editing li.active > .gallery-item-content .menu-item {
  color: var(--menu-active-color) !important;
}

/* Ensure menu item controls are visible in edit mode */
.sidebar.editing .controls .btn,
.sidebar.editing .visibility-toggle,
.sidebar.editing .edit-btn,
.sidebar.editing .delete-btn {
  display: flex !important;
  opacity: 1;
}

/* Make sure the controls container itself is visible */
.sidebar.editing .controls {
  display: flex !important;
  opacity: 1;
}

/* Reposition edit controls directly below header */
.edit-controls {
  display: flex;
  flex-wrap: nowrap;
  justify-content: right;
  align-items: center;
  padding: 10px;
gap: 8px;
  background-color: var(--menu-background-color, #fafafa);
  position: sticky;
  top: 50px;
  z-index: 19;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  overflow-x: auto; /* Allow scrolling if needed on small screens */
}

.tree-container {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Add Form Styles */
.add-form {
  padding: 0 15px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
  width: 100%;
  box-sizing: border-box;
}

.add-form.visible {
  padding: 15px;
  max-height: 400px;
}

.add-form input[type="text"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 0px;
}

/* Button Styles */
.btn {
  border-radius: 2px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #d4d4d4;
  transition: background-color 0.2s;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.btn:hover {
  background-color: #e5e5e5;
}

.btn-primary {
  background-color: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

.btn-primary:hover {
  background-color: var(--primary-hover) !important;
}

.icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

ol.nested-sortable {
  height: auto !important; 
  max-height: none !important;
  overflow: visible !important;
  background-color: transparent !important;
}

ol.nested-sortable ol.nested-sortable {
  padding-left: 20px; /* Indentation for nested items */
  margin: 0;
}

.nested-sortable li {
  position: relative;
  margin: 3px 0;
  list-style: none;
  transition: transform 0.15s ease-out;
}

/* SortableJS Visual Styles */
.nested-sortable li.ghost {
  position: relative !important;
  opacity: 0.7 !important;
  background-color: rgba(70, 130, 180, 0.1) !important;
  border: 2px dashed rgba(55, 184, 108, 0.5) !important;
  margin: 4px 0 !important;
  height: auto !important;
  min-height: 30px !important;
  z-index: 1000 !important; /* Make sure ghost appears above other items */
  box-shadow: 0 0 4px rgba(70, 130, 180, 0.2) !important;
}

.nested-sortable li.chosen {
  background-color: transparent !important;
  opacity: 0.8;
  z-index: 1001; /* Higher than ghost */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.nested-sortable li.drag {
  opacity: 0.8;
  z-index: 1001;
}

/* Prevent text selection during dragging */
body.menu-item-dragging * {
  user-select: none !important;
}

/* Ensure hover styles don't interfere with drag */
body.menu-item-dragging .nested-sortable li:hover {
  background-color: transparent !important;
}

.highlight-dropzone {
  background-color: rgba(70, 130, 180, 0.05);
}

ol.nested-sortable:empty {
  border: 1px dashed rgba(0, 0, 0, 0.2);
  min-height: 15px;
  margin: 5px 0;
  border-radius: 0px;
}

/* Gallery Item Styling */
.gallery-item-content {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0px 0px;
  border: 1px solid #eee;
  border-radius: 0px;
  margin: 3px 0;
  background-color: #fafafa;
}

/* Prevent text selection during drag operations */
.nested-sortable-handle,
.drag-handle,
.sortable-ghost,
.sortable-chosen,
.sortable-drag,
body.sidebar-element-dragging .sidebar,
body.menu-item-dragging .sidebar,
body.sidebar-element-dragging .sidebar *,
body.menu-item-dragging .sidebar * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

.nested-sortable.highlight-dropzone {
  background-color: rgba(70, 130, 180, 0.05);
  border-radius: 0px;
  min-height: 10px;
}

.nested-sortable-handle {
  cursor: move;
  cursor: grab;
}

.nested-sortable-handle:active {
  cursor: grabbing;
}

.has-children > .gallery-item-content {
  font-weight: 200;
  background-color: rgba(0, 0, 0, 0.02);
}

/* Menu Item Styling */
.menu-item {
  flex-grow: 1;
  padding-left: 4px;
  cursor: pointer;
  order: 1 !important; 
  margin-right:4px;
  font-weight: 200 !important;
}

/* Active and Hover States */
li.active > .gallery-item-content {
  background-color: rgba(147, 147, 147, 0);
  border-color: rgba(190, 190, 190, 0);
}

li:not(.active) > .gallery-item-content:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Controls Container */
.controls {
  display: flex;
  opacity: 0.7;
  order: 3 !important; /* Keep controls at the very end */
}

.controls:hover {
  opacity: 1;
}

/* Submenu Toggle Styles */
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: right;
  width: 24px;
  height: 24px;
  margin-right: 0 !important;  /* Remove right margin */
  margin-left: 4px !important; /* Add left margin instead */
  order: 2 !important; 
  cursor: pointer;
  transition: transform 0.2s ease;
}


/* Collapsed/Expanded States */
li:not(.expanded) > ol.nested-sortable {
  display: none;
}

/* Indentation Levels */
.indent-level-1 {
  padding-left: 20px;
}

.indent-level-2 {
  padding-left: 40px;
}

.indent-level-3 {
  padding-left: 60px;
}

/* Edit Form Styling */
.edit-form {
  padding: 15px;
  background-color: transparent;
  border-radius: 0px;
  margin: 5px 0;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 200;
}

.parent-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 0px;
  background-color: white;
  margin-bottom: 10px;
}

#galleryParentContainer {
  margin-top: 10px;
}

#galleryParent {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 0px;
  background-color: white;
}

/* Visibility Toggle Styles */
.visibility-toggle {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.visibility-toggle:hover {
  opacity: 1;
}

.visibility-toggle.hidden {
  opacity: 0.3;
}

/* Hidden Gallery Styles */
li.hidden-gallery {
  opacity: 0.6;
}

/* Radio Button Styles */
.radio-group {
  margin: 10px 0;
}

.radio-group label {
  margin-right: 10px;
  display: inline-block;
}

/* URL Input Container */
#urlInputContainer {
  transition: all 0.3s ease;
}

/* Tree Structure Styling */
.tree {
  padding: 0;
  margin: 0;
}

/* Error Notification */
.drag-error-notification {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: #f8d7da;
  color: #721c24;
  padding: 10px 15px;
  border-radius: 0px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Enhanced Drag Styles */
.nested-sortable li.ghost {
  position: relative;
  opacity: 0.6;
  background-color: rgba(70, 130, 180, 0.3);
  border: 2px dashed rgba(70, 180, 99, 0.7);
  box-shadow: 0 0 8px rgba(70, 130, 180, 0.4);
}

.nested-sortable li.invalid-target {
  background-color: rgba(220, 53, 69, 0.1);
  border: 2px dashed rgba(220, 53, 69, 0.5);
}

/* Empty list highlighting for drop targets */
.nested-sortable:empty.highlight-dropzone {
  border: 2px dashed rgba(70, 130, 180, 0.3);
  min-height: 30px;
  margin: 5px 0;
  border-radius: 0px;
}

/* -------------------------------
   VIEW MODE SPECIFIC STYLES
------------------------------- */
.sidebar:not(.editing) {
  background-color: #fafafa;
}

/* Clean text-only menu in View mode */
.sidebar:not(.editing) .gallery-item-content {
  border: none;
  background: transparent;
  padding: 0px 0px;
  margin: 2px 0;
}

.sidebar:not(.editing) .menu-item {
  font-family: var(--menu-font-family, Arial, sans-serif);
  font-size: var(--menu-font-size, 16px);
  color: var(--menu-color, #333);
  transition: color 0.2s;
  font-weight: 200;
}

.sidebar:not(.editing) .menu-item:hover {
  color: var(--menu-hover-color, #4682B4);
}

/* Active item in View mode */
.sidebar:not(.editing) li.active > .gallery-item-content .menu-item {
  color: var(--menu-active-color, #4682B4);
  font-weight: 200;
}

/* Hide edit controls in view mode */
.sidebar:not(.editing) .controls .btn {
  display: none;
}

/* Submenu toggle in View mode */
.sidebar:not(.editing) .submenu-toggle {
  opacity: 0.5;
}

.sidebar:not(.editing) .submenu-toggle:hover {
  opacity: 1;
}

/* Force hide element headers in view mode with maximum specificity */
.sidebar:not(.editing) .element-header,
body .sidebar:not(.editing) .element-header,
html body .sidebar:not(.editing) .element-header,
.sidebar:not(.editing) .sidebar-element .element-header,
.sidebar:not(.editing) .menu-element .element-header,
.sidebar:not(.editing) .text-element .element-header,
.sidebar:not(.editing) .image-element .element-header {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

/* Hide hidden elements in view mode */
.sidebar:not(.editing) .sidebar-element[data-visible="false"],
.sidebar:not(.editing) li.hidden-gallery,
.sidebar:not(.editing) li[data-visible="false"],
.sidebar:not(.editing) .gallery-item-content[data-visible="false"] {
  display: none !important;
}

/* -------------------------------
   EDIT MODE SPECIFIC STYLES
------------------------------- */
.sidebar.editing {
  width: var(--sidebar-edit-width, 44vw); /* Use CSS variable with fallback */
  min-width: 300px; /* Larger minimum width in edit mode */
  max-width: 44vw; /* Larger maximum width in edit mode */
  background-color: #f0f0f0;
}

/* More prominent editing indicators */
.sidebar.editing .gallery-item-content {
  background-color: transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: var(--element-border) !important;
}

.sidebar.editing .nested-sortable-handle {
  background-color: rgba(70, 130, 180, 0.05);
  border-radius: 0px;
}

/* Elements in edit mode - transparent backgrounds */
.sidebar.editing .sidebar-element,
.sidebar.editing .menu-element,
.sidebar.editing .image-element,
.sidebar.editing .text-element {
  background-color: transparent !important;
  border: var(--element-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 10px;
  border-radius: 0px;
}

/* Hover effects for elements */
.sidebar.editing .sidebar-element:hover,
.sidebar.editing .menu-element:hover,
.sidebar.editing .image-element:hover,
.sidebar.editing .text-element:hover,
.sidebar.editing .gallery-item-content:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border-color: #4682B4 !important;
}

/* Text content transparency */
.sidebar-text {
  background-color: transparent !important;
}


/* Element headers - make transparent like page UI */
.sidebar.editing .element-header {
  background-color: transparent !important;
  padding: 8px 2px !important;
}

/* Control buttons - match page UI styling */
.sidebar.editing .btn.edit-btn svg,
.btn.edit-btn svg,
.edit-btn svg {
  color: var(--edit-button-color) !important;
  stroke: var(--edit-button-color) !important;
}

.sidebar.editing .btn.delete-btn svg,
.btn.delete-btn svg,
.delete-btn svg {
  color: var(--delete-button-color) !important;
  stroke: var(--delete-button-color) !important;
}

/* Drag handle styling to match page UI */
.sidebar.editing .drag-handle {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: grab !important;
  background-color: var(--drag-handle-bg) !important;
  color: var(--drag-handle-color) !important;
  padding: 4px !important;
  border-radius: 0px !important;
  margin-left: 8px !important;
  width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.sidebar.editing .drag-handle svg {
  color: var(--drag-handle-color) !important;
  stroke: var(--drag-handle-color) !important;
  fill: none !important;
}

/* Ensure content areas are transparent */
.sidebar-element .element-content,
.text-element .sidebar-text-container,
.image-element .sidebar-image-container {
  background-color: transparent !important;
}

/* Make sure the tree container is transparent */
.tree-container,
#galleryTree {
  background-color: transparent !important;
}

/* Ensure hidden galleries remain visible in edit mode */
.sidebar.editing li.hidden-gallery,
.sidebar.editing .gallery-item-content[data-visible="false"],
.sidebar.editing .sidebar-element[data-visible="false"],
.sidebar.editing li[data-visible="false"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 0.6 !important; /* Dimmed to indicate hidden status */
  pointer-events: auto !important;
  position: relative !important;
}


/* Corrected gallery-item-content styling for hidden items */
.sidebar.editing .gallery-item-content[data-visible="false"] {
  display: flex !important;
  opacity: 0.6;
}

/* Fix for hidden list items to display properly */
.sidebar.editing li.hidden-gallery > .gallery-item-content {
  display: flex !important;
}

/* -------------------------------
   STYLE EDITOR IMPROVEMENTS
------------------------------- */
/* Style Editor Positioning and Visibility */
#menuStyleEditor {
  background-color: transparent !important;
  margin-bottom: 15px;
  max-height: none;
  z-index: 100;
  box-sizing: border-box;
  overflow-y: visible;
  border-radius: 0px;
  transition: all 0.2s ease;
  padding: 0;
  margin: 0 0 20px 0;
}

.style-editor-wrapper {
  background-color: transparent !important;
  border-radius: 0px;
  width: 100%;
  overflow: visible;
  backdrop-filter: blur(2px);
  border: 1px solid transparent !important;
}

.style-editor-panel {
  box-sizing: border-box;
  width: 100%;
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

.style-editor-panel h3 {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 8px;
  color: rgba(0, 0, 0, 0.8); /* Slightly darkened text */
  font-weight: 500;
}

.style-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.style-form .form-group {
  width: 100%;
  box-sizing: border-box;
}

/* Make form group headings more visible */
.style-form .form-group label {
  color: rgba(0, 0, 0, 0.8); /* Slightly darkened text */
  font-weight: 500;
}

/* Ensure color pickers + text fields fit properly */
.form-group:has(input[type="color"]) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

.form-group:has(input[type="color"]) label {
  grid-column: 1 / 3;
}

/* Make text inputs display properly */
.style-form input[type="text"],
.style-form input[type="color"] {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0.745); /* More solid background */
  border: 1px solid rgba(200, 200, 200, 0.8);
}



/* Sidebar image container */
.sidebar-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  background-color: transparent;
}

/* Sidebar image */
.sidebar-image {
  max-width: 100%;
  height: auto;
  background-color: transparent !important;
}

/* Image placeholder for edit mode */
.sidebar.editing .image-placeholder {
  background-color: rgba(245, 245, 245, 0.7) !important;
  border: 1px dashed rgba(221, 221, 221, 0.8) !important;
}

/* Upload image button */
.upload-image-btn {
  margin-top: 10px;
  padding: 6px 12px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  font-size: 14px;
}

.upload-image-btn:hover {
  background-color: var(--primary-hover);
}

/* Edit form for elements */
.element-edit-form {
  padding: 15px;
  background-color: transparent;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.element-edit-form label {
  font-weight: 500;
  margin-bottom: 3px;
  display: block;
}

.element-edit-form input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 0px;
}

.edit-form-buttons {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

/* Image preview in edit form */
.image-preview-container {
  margin: 10px 0;
}

.image-preview {
  max-width: 100%;
  margin-top: 5px;
  border: 0px solid transparent !important;
  box-shadow: none !important;
}

/* Image uploader overlay */
.image-uploader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Drop zone for image uploader */
.drop-zone {
  border: 2px dashed #ccc;
  border-radius: 0px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  background-color: #fafafa;
  transition: all 0.3s ease;
}

.drop-zone:hover {
  background-color: #f0f0f0;
  border-color: #aaa;
}

/* Sidebar element form */
.sidebar-element-form {
  padding: 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 0px;
  margin: 10px 0;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  display: none;
}

.sidebar-element-form.visible {
  max-height: 400px;
  padding: 15px;
  display: block;
}

.sidebar-element-form h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
}

.sidebar-element-form p {
  margin-bottom: 15px;
  font-size: 14px;
}

.sidebar-element-form .radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.sidebar-element-form .form-actions {
  display: flex;
  gap: 10px;
}

/* Sortable styles for sidebar elements */
.sidebar-elements-container .sortable-ghost {
  opacity: 0.4;
  background-color: rgba(70, 130, 180, 0.1);
  border: 2px dashed rgba(70, 130, 180, 0.5);
}

.sidebar-elements-container .sortable-chosen {
  z-index: 10;
  background-color: transparent !important;
}

.sidebar-elements-container .sortable-drag {
  border: 1px dashed #21f3aa;
  background-color: rgba(227, 242, 253, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Edit mode specific styles for sidebar elements */
.sidebar.editing .sidebar-element {
  border: 1px solid #eee;
  background-color: transparent;
  margin-left: 10px;
  margin-right: 10px;
  padding-right: 5px;
}

/* Image uploader modal */
.image-uploader-modal {
  background-color: white;
  border-radius: 0px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.image-uploader-modal h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

.image-uploader-modal .uploader-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.image-uploader-modal .close-btn {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Size slider in image uploader */
.size-container {
  margin: 15px 0;
}

.size-container label {
  display: block;
  margin-bottom: 5px;
}

.size-container input[type="range"] {
  width: 100%;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    width:100vw;
  }
  
  .sidebar {
    width: 100%;
    max-height: 100vh;
  }
  
  .gallery-container {
    height: auto;
  }
}


#galleryTree {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.sidebar:after {
  content: '';
  display: block;
  height: 50px;
  width: 100%;
}

/* -------------------------------------
   MOBILE HEADER AND RESPONSIVE STYLES
-------------------------------------- */

/* Mobile Header Styles */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: var(--menu-background-color, #fafafa);
  z-index: 100;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 2px rgba(0,0,0,0.05);
}

.mobile-header-image {
  max-height: 40px;
  max-width: 70%;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Mobile header content container */
.mobile-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1;
  overflow: hidden;
  padding: 0 10px;
}

/* Text styling for different content types */
.mobile-header-text, 
.mobile-header-menu-title, 
.mobile-header-title {
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 200;
  color: var(--menu-color, #333);
}


.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: 20px;
  z-index: 101;
}

.hamburger-icon {
  width: 24px;
  height: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--menu-color, #333);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile backdrop */
.mobile-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 98;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-backdrop.active {
  opacity: 1;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .mobile-header {
    display: flex;
  }
  
  .mobile-backdrop.mobile-open {
    display: block;
  }
  
  .container {
    flex-direction: column;
    padding-top: 60px; /* Space for fixed header */
  }
  
  .sidebar {
    position: fixed;
    top: 60px;
    right: -300px; /* Off-screen by default */
    width: 300px;
    height: calc(100vh - 60px);
    z-index: 99;
    transition: right 0.3s ease;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto;
  }
  
  .sidebar.mobile-open {
    right: 0;
  }
  
  .gallery-container {
    width: 100%;
  }
  
  /* Adjust edit controls for mobile */
  .edit-controls {
    flex-wrap: wrap;
  }
  
  .edit-controls .btn {
    padding: 6px 8px;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    margin: 0 2px;
  }
  
  /* Hide login/logout buttons on mobile header */
  .mobile-header #loginBtn,
  .mobile-header #logoutBtn {
    display: none !important;
  }
}

/* For smaller screens */
@media (max-width: 480px) {
  .sidebar {
    width: 85%;
  }
  
  /* Make gallery items more tappable on small screens */
  .sidebar:not(.editing) .gallery-item-content {
    padding: 5px 0;
  }
  
  .sidebar:not(.editing) .menu-item {
    padding: 8px 0;
    display: block;
  }
}

/* Direct Gallery Container styles */
.direct-gallery-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

/* Gallery loading indicator */
.gallery-loading {
  padding: 40px;
  text-align: center;
  color: #66666665;
  position: relative;
  opacity: 0 !important;
}

.gallery-loading:after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  border: 2px solid #ccc;
  border-radius: 50%;
  border-top-color: #34db9b;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  opacity: 0 !important;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Make sure to hide the iframe when using direct loading */
.gallery-iframe.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

/* Gallery Visibility Overrides */
.gallery-iframe, 
#galleryFrame,
iframe#galleryFrame,
.gallery-container iframe {
  /* Default to block display */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Only hide the iframe when viewing a page */
body:has(.page-container[style*="display: block"]) .gallery-iframe,
body:has(.page-container:not([style*="display: none"])) #galleryFrame {
  display: none !important;
  visibility: hidden !important;
}

/* Special helper class */
.gallery-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.gallery-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Ensure page containers are completely hidden when not active */
.page-container[style*="display: none"] {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ---------------------------------
   RICH TEXT EDITOR CSS FIXES
---------------------------------- */

/* Style for rendered rich text content (with alignment fixes) */
.sidebar-text .ql-align-center, 
.sidebar-text *[class*="ql-align-center"] {
  text-align: center !important;
  display: block !important;
}

.sidebar-text .ql-align-right, 
.sidebar-text *[class*="ql-align-right"] {
  text-align: right !important;
  display: block !important;
}

.sidebar-text .ql-align-justify, 
.sidebar-text *[class*="ql-align-justify"] {
  text-align: justify !important;
  display: block !important;
}

/* Apply menu font to all sidebar text content */
.sidebar-text, 
.sidebar-text p, 
.sidebar-text div, 
.sidebar-text h1, 
.sidebar-text h2, 
.sidebar-text h3, 
.sidebar-text h4, 
.sidebar-text h5, 
.sidebar-text h6,
.sidebar-text li,
.sidebar-text blockquote {
  font-family: var(--menu-font-family, inherit) !important;
}

/* Quill Editor improvements */
.ql-editor {
  font-family: var(--menu-font-family, inherit) !important;
}

/* ---------------------------------
   PICO CSS INTEGRATION
---------------------------------- */

/* Style Pico-enhanced elements in edit mode */
[data-theme="pico"] .sidebar.editing button,
[data-theme="pico"] .edit-controls button,
[data-theme="pico"] .element-edit-form button,
body.edit-mode-active .sidebar button,
body.edit-mode-active .edit-controls button {
  /* Pico Button styles + Custom styling */
  border-radius: 0px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  /* Keep original dimensions, just enhance appearance */
  padding: 6px 12px;
  margin: 2px;
  transition: all 0.2s ease;
}

/* Preserve specific button styling */
[data-theme="pico"] .btn-primary,
body.edit-mode-active .btn-primary {
  background-color: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

[data-theme="pico"] .btn-primary:hover,
body.edit-mode-active .btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary) !important;
}

/* Make edit form inputs look nicer with Pico */
[data-theme="pico"] .add-form input,
[data-theme="pico"] .add-form select,
[data-theme="pico"] .element-edit-form input,
[data-theme="pico"] .element-edit-form select,
body.edit-mode-active .add-form input,
body.edit-mode-active .add-form select,
body.edit-mode-active .element-edit-form input,
body.edit-mode-active .element-edit-form select {
  box-sizing: border-box;
}

/* Ensure labels are visible */
[data-theme="pico"] label,
body.edit-mode-active label {
  display: block;
  margin-bottom: 5px;
  font-weight: 200;
}

/* Style form containers */
[data-theme="pico"] .edit-form,
[data-theme="pico"] .element-edit-form,
[data-theme="pico"] .add-form.visible,
body.edit-mode-active .edit-form,
body.edit-mode-active .element-edit-form,
body.edit-mode-active .add-form.visible {
  background-color: transparent;
  border-radius: 0px;
  padding: 16px;
  margin: 10px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Style radio buttons and checkboxes */
[data-theme="pico"] .radio-group label,
body.edit-mode-active .radio-group label {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

[data-theme="pico"] .radio-group input[type="radio"],
[data-theme="pico"] .radio-group input[type="checkbox"],
body.edit-mode-active .radio-group input[type="radio"],
body.edit-mode-active .radio-group input[type="checkbox"] {
  margin-right: 8px;
}

/* Form group styling */
[data-theme="pico"] .form-group,
body.edit-mode-active .form-group {
  margin-bottom: 16px;
}

/* Ensure controls remain visible */
[data-theme="pico"] .element-controls,
body.edit-mode-active .element-controls {
  display: flex !important;
  gap: 5px;
}

/* Target Pico CSS buttons */
[role=button], 
button, 
input[type=button], 
input[type=reset], 
input[type=submit],
[data-theme="pico"] [role=button],
[data-theme="pico"] button,
[data-theme="pico"] input[type=button],
[data-theme="pico"] input[type=reset],
[data-theme="pico"] input[type=submit] {
  --background-color: var(--primary) !important;
  --border-color: var(--primary) !important;
  --color: white !important;
  --box-shadow: none !important;
}

/* Hover states */
[role=button]:hover, 
button:hover, 
input[type=button]:hover, 
input[type=reset]:hover, 
input[type=submit]:hover,
[data-theme="pico"] [role=button]:hover,
[data-theme="pico"] button:hover,
[data-theme="pico"] input[type=button]:hover,
[data-theme="pico"] input[type=reset]:hover,
[data-theme="pico"] input[type=submit]:hover {
  --background-color: var(--primary-hover) !important;
  --border-color: var(--primary-hover) !important;
}

/* Remove blue outline on buttons when clicked/focused */
.btn:focus,
button:focus,
[role="button"]:focus,
.visibility-toggle:focus,
.edit-btn:focus,
.delete-btn:focus,
.sidebar.editing .btn:focus,
.sidebar.editing .element-controls .btn:focus,
.page-element .btn:focus,
.edit-controls button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: none !important;
  border-color: transparent !important;
}

/* Pico CSS specific focus overrides */
[data-theme="pico"] [role="button"]:focus,
[data-theme="pico"] button:focus,
[data-theme="pico"] input[type="button"]:focus,
[data-theme="pico"] input[type="reset"]:focus,
[data-theme="pico"] input[type="submit"]:focus {
  --box-shadow: 0 0 0 2px rgba(136, 221, 0, 0.3) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(136, 221, 0, 0.3) !important;
}

/* Focus-visible state (keyboard focus) should maintain some indication for accessibility */
.btn:focus-visible,
button:focus-visible {
  box-shadow: 0 0 0 2px rgba(136, 221, 0, 0.5) !important; /* Slightly more visible for keyboard navigation */
}

/* Eliminate all persistent blue outlines, borders, and backgrounds */
.btn,
button,
[role="button"],
.visibility-toggle,
.edit-btn,
.delete-btn,
.sidebar .btn,
.sidebar .element-controls .btn,
.page-element .btn,
.edit-controls button,
.controls .btn,
.element-header button {
  /* Remove all border, outline, and shadow properties */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  
  /* Ensure transparent background */
  background-color: rgba(0, 0, 0, 0.05) !important;
  
  /* Clean styling */
  border-radius: 0px !important;
  padding: 4px !important;
  margin: 0 2px !important;
  
  /* Ensure no unwanted color inheritance */
  color: inherit !important;
}

/* Special styling for button hover states */
.btn:hover,
button:hover,
.visibility-toggle:hover,
.edit-btn:hover,
.delete-btn:hover,
.controls .btn:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Override any Pico CSS button styling */
[data-theme="pico"] button,
[data-theme="pico"] .btn,
[data-theme="pico"] [role="button"] {
  --border-width: 0 !important;
  --border-color: transparent !important;
  --box-shadow: none !important;
  --color: inherit !important;
}

/* Ensure SVG icons don't have blue strokes or fills */
.btn svg,
button svg,
.visibility-toggle svg,
.edit-btn svg,
.delete-btn svg,
.controls .btn svg {
  stroke-width: 2px !important;
  fill: none !important;
}

/* Specific color overrides for edit/delete/visibility buttons */
.edit-btn svg {
  stroke: var(--edit-button-color, #87878760) !important;
  color: var(--edit-button-color, #7ba03f90) !important;
}

.delete-btn svg {
  stroke: var(--delete-button-color, #8989897f) !important;
  color: var(--delete-button-color, #85858586) !important;
}

.visibility-toggle svg {
  stroke: #666 !important;
  color: #666 !important;
}

.sidebar .visibility-toggle:not(.hidden) svg {
  color: rgb(141, 141, 141) !important;
  stroke: rgba(255, 255, 255, 0.563) !important;
}

.sidebar .visibility-toggle.hidden svg {
  color: #999 !important;
  stroke: #999 !important;
  opacity: 0.3 !important;
}

/* Remove any blue coloring from drag handles */
.drag-handle,
.nested-sortable-handle {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Make image element backgrounds transparent in edit mode */
.sidebar.editing .sidebar-image-container,
.page-container.editing .page-image-container,
.sidebar.editing .image-element .element-content,
.page-container.editing .image-element .element-content,
.sidebar-elements-container .image-element,
body.edit-mode-active .sidebar-image-container,
body.edit-mode-active .page-image-container {
  background-color: transparent !important;
}

/* Make sure the image placeholders in edit mode remain visible */
.sidebar.editing .image-placeholder,
.page-container.editing .image-placeholder {
  background-color: rgba(245, 245, 245, 0.7) !important;
  border: 1px dashed rgba(221, 221, 221, 0.8) !important;
}

/* Ensure any images have transparent backgrounds */
.sidebar-image,
.page-image {
  background-color: transparent !important;
}


.element-title {
  display: none !important;
}

/* Super-specific overrides for primary buttons */
html body [data-theme="pico"] .btn-primary,
html body [data-theme="pico"] button.btn-primary,
html body.edit-mode-active .btn-primary,
html body.edit-mode-active button.btn-primary,
html body [data-theme="pico"] .edit-controls .btn-primary,
html body.edit-mode-active .edit-controls .btn-primary,
:root [data-theme="pico"] .btn-primary,
:root body.edit-mode-active .btn-primary {
  background-color: #888888e5 !important; /* Use your preferred green */
  color: white !important;
  border-color: #88dd0000 !important;
}

/* Hover states with even higher specificity */
html body [data-theme="pico"] .btn-primary:hover,
html body [data-theme="pico"] button.btn-primary:hover,
html body.edit-mode-active .btn-primary:hover,
html body.edit-mode-active button.btn-primary:hover,
:root [data-theme="pico"] .btn-primary:hover,
:root body.edit-mode-active .btn-primary:hover {
  background-color: #878787ea !important; /* Slightly lighter green for hover */
  border-color: #88dd0000 !important;
}

/* Add these CSS styles to menu-styles.css or your main stylesheet */

/* Sidebar image alignment classes */
.sidebar-image-container.image-align-left {
  text-align: left;
}

.sidebar-image-container.image-align-center {
  text-align: center;
}

.sidebar-image-container.image-align-right {
  text-align: right;
}

/* Sidebar alignment radio group styling */
.sidebar-element .alignment-radio-group {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 20px;
}

.sidebar-element .alignment-radio-group input[type="radio"] {
  margin-right: 5px;
}

.sidebar-element .alignment-radio-group label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 0px;
  transition: background-color 0.2s;
}

.sidebar-element .alignment-radio-group label:hover {
  background-color: rgba(70, 130, 180, 0.1);
}

.sidebar-element .alignment-radio-group input[type="radio"]:checked + label {
  background-color: rgba(70, 130, 180, 0.2);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .sidebar-element .alignment-radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Enhanced styling for the image edit form in sidebar */
.sidebar-element .image-alignment-container {
  margin: 15px 0;
  padding: 10px;
  border-radius: 0px;
}

.sidebar-element .image-preview-container {
  margin: 15px 0;
  padding: 10px;
  border-radius: 0px;
}

.sidebar-element .image-preview-container label {
  display: block;
  margin-bottom: 8px;
  font-weight: 200;
}

.sidebar-element .image-preview-container img {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Ensure sidebar edit form has consistent styling */
.sidebar-element .element-edit-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 200;
}

.sidebar-element .element-edit-form input[type="text"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 0px;
}

/* Style for sidebar image upload button */
.sidebar-element .upload-image-btn {
  display: block;
  width: auto;
  margin: 10px auto;
  padding: 6px 12px;
  background-color: #4682B4;
  color: white;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sidebar-element .upload-image-btn:hover {
  background-color: #3a6d96;
}

/* Add these rules at the END of your menu-styles.css file to ensure they override earlier rules */

/* Direct override of the blue border on hover with ultra-high specificity */
html body .sidebar.editing .sidebar-element:hover,
html body .sidebar.editing .menu-element:hover,
html body .sidebar.editing .image-element:hover,
html body .sidebar.editing .text-element:hover,
html body .sidebar.editing .gallery-item-content:hover,
body .sidebar.editing .sidebar-element:hover,
body .sidebar.editing .menu-element:hover,
body .sidebar.editing .image-element:hover,
body .sidebar.editing .text-element:hover,
body .sidebar.editing .gallery-item-content:hover,
.sidebar.editing .sidebar-element:hover,
.sidebar.editing .menu-element:hover,
.sidebar.editing .image-element:hover,
.sidebar.editing .text-element:hover,
.sidebar.editing .gallery-item-content:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.1) !important; /* Replace blue with subtle gray */
}

/* Override any focus or active states that might show outlines */
html body .sidebar *:focus,
html body .sidebar *:active,
html body .sidebar button:focus,
html body .sidebar .btn:focus,
html body .sidebar a:focus,
html body .sidebar input:focus,
html body .sidebar select:focus,
html body .sidebar textarea:focus,
html body .sidebar [role="button"]:focus,
html body .sidebar .menu-item:focus,
html body .sidebar .gallery-item-content:focus,
html body .sidebar .element-controls *:focus,
html body .sidebar button:focus-visible,
html body .sidebar .btn:focus-visible,
html body .sidebar *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* Ensure active states don't have blue outlines */
.sidebar li.active > .gallery-item-content,
.sidebar:not(.editing) li.active > .gallery-item-content,
.sidebar li.active > .gallery-item-content:hover,
.sidebar:not(.editing) li.active > .gallery-item-content:hover {
  border-color: rgba(190, 190, 190, 0) !important;
  background-color: rgba(147, 147, 147, 0) !important;
  box-shadow: none !important;
}

/* Override Pico CSS focus styles specifically */
[data-theme="pico"] .sidebar [role="button"]:focus,
[data-theme="pico"] .sidebar button:focus,
[data-theme="pico"] .sidebar input[type="button"]:focus,
[data-theme="pico"] .sidebar input[type="reset"]:focus,
[data-theme="pico"] .sidebar input[type="submit"]:focus {
  --box-shadow: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

.sidebar .icon,
.sidebar svg.icon,
.sidebar button svg,
.sidebar .btn svg,
.sidebar .controls svg,
.sidebar .element-controls svg,
.sidebar .visibility-toggle svg,
.sidebar .edit-btn svg,
.sidebar .delete-btn svg,
.sidebar .submenu-toggle svg,
.sidebar .drag-handle svg {
  width: 12px !important; /* Keep the reduced size */
  height: 12px !important; /* Keep the reduced size */
  min-width: 12px !important;
  min-height: 12px !important;
  margin-right: 3px !important;
  stroke-width: 1px !important;
  /* CRITICAL FIXES FOR CROPPING */
  overflow: visible !important; /* Allow SVG to render outside its container */
}

/* Add these rules to your menu-styles.css file */

/* Default state - hide edit UI elements until initialization */
body:not(.hydra-initialized) .edit-controls,
body:not(.hydra-initialized) .sidebar .element-controls,
body:not(.hydra-initialized) .sidebar .edit-btn,
body:not(.hydra-initialized) .sidebar .delete-btn,
body:not(.hydra-initialized) .sidebar .visibility-toggle,
body:not(.hydra-initialized) .sidebar .drag-handle,
body:not(.hydra-initialized) #editButton,
body:not(.hydra-initialized) #logoutButton {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Always keep login button visible by default unless logged in */
#loginBtn {
  display: block !important;
}

/* Hide login button when authenticated */
body.hydra-authenticated #loginBtn {
  display: none !important;
}

/* Show edit and logout buttons when authenticated and admin */
body.hydra-admin #editButton,
body.hydra-admin #logoutButton {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Show edit controls in edit mode */
body.edit-mode-active .edit-controls {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Show control elements in edit mode */
body.edit-mode-active .controls,
body.edit-mode-active .sidebar.editing .controls,
body.edit-mode-active .edit-btn,
body.edit-mode-active .delete-btn,
body.edit-mode-active .visibility-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Override any inline styles from old code */
body.hydra-admin #editButton[style*="display: none"],
body.hydra-admin #logoutButton[style*="display: none"] {
  display: block !important;
}

/* Handle edit mode specifically */
body.edit-mode-active .edit-controls[style*="display: none"] {
  display: flex !important;
}

/* Add these CSS rules to your menu-styles.css file */

/* Hide edit UI elements by default until initialization */
body:not(.hydra-initialized) .edit-controls,
body:not(.hydra-initialized) .sidebar .element-controls,
body:not(.hydra-initialized) .sidebar .edit-btn,
body:not(.hydra-initialized) .sidebar .delete-btn,
body:not(.hydra-initialized) .sidebar .visibility-toggle,
body:not(.hydra-initialized) .sidebar .drag-handle,
body:not(.hydra-initialized) #editButton,
body:not(.hydra-initialized) #logoutButton {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Show edit button when admin, even with inline styles */
body.hydra-admin #editButton,
body.hydra-admin #editButton[style*="display: none"],
#editButton.visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Show logout button when admin, even with inline styles */
body.hydra-admin #logoutButton,
body.hydra-admin #logoutButton[style*="display: none"],
#logoutButton.visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide login button when authenticated */
body.hydra-authenticated #loginBtn,
body.hydra-admin #loginBtn {
  display: none !important;
}

/* Show edit controls when in edit mode */
body.hydra-admin.edit-mode-active .edit-controls,
body.hydra-admin.edit-mode-active .edit-controls[style*="display: none"],
.edit-controls.visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Override inline display styles for controls in edit mode */
body.hydra-admin.edit-mode-active .controls {
  display: flex !important;
}

body.hydra-admin.edit-mode-active .sidebar.editing .controls .btn,
body.hydra-admin.edit-mode-active .sidebar.editing .visibility-toggle,
body.hydra-admin.edit-mode-active .sidebar.editing .edit-btn,
body.hydra-admin.edit-mode-active .sidebar.editing .delete-btn {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Additional safety override for edit controls display */
.edit-controls.visible[style*="display: none"] {
  display: flex !important;
}

/* Default visibility for login button */
#loginBtn {
  display: block;
}

/* Apply mobile header height variables */
@media (max-width: 768px) {
  .mobile-header {
    height: var(--mobile-header-height, 60px) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  }
  
}

/* Ensure sidebar text uses menu color */
.sidebar-text,
.sidebar-text p,
.sidebar-text div,
.sidebar-text h1,
.sidebar-text h2,
.sidebar-text h3,
.sidebar-text h4,
.sidebar-text h5,
.sidebar-text h6,
.sidebar-text li,
.sidebar-text a,
.sidebar-text span,
.sidebar-text blockquote {
  color: var(--menu-color, #333) !important;
  font-family: var(--menu-font-family, inherit) !important;
}
/* Base styling for all social icons */
.social-icon-wrapper svg,
.social-icon-container svg {
  color: var(--menu-color, #333) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  transition: color 0.2s ease !important;
    background: none !important; /* Catch-all for any background properties */
  background-color: transparent !important; /* Specific for background-color */
}

/* Individual icon hover effects */
.social-icon-wrapper:hover svg,
.social-icon-wrapper a:hover svg,
.social-icon-container:hover svg,
.social-icon-container a:hover svg {
  color: var(--menu-hover-color, #4682B4) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
    background: none !important; /* Catch-all for any background properties */
  background-color: transparent !important; /* Specific for background-color */
}

/* Ensure links use the correct color */
.sidebar:not(.editing) .social-icon-wrapper a,
.sidebar:not(.editing) .social-icon-container a {
  color: var(--menu-color, #333) !important;
  transition: color 0.2s ease !important;
    background: none !important; /* Catch-all for any background properties */
  background-color: transparent !important; /* Specific for background-color */
}

/* Handle link hover states */
.sidebar:not(.editing) .social-icon-wrapper a:hover,
.sidebar:not(.editing) .social-icon-container a:hover {
  color: var(--menu-hover-color, #4682B4) !important;
    background: none !important; /* Catch-all for any background properties */
  background-color: transparent !important; /* Specific for background-color */
}

/* Ensure hover only applies to individual icons */
.sidebar-social-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Prevent container hover from affecting all icons */
.sidebar-social-container:hover svg {
  color: var(--menu-color, #333) !important; /* Reset to default */
}



/* sidebar elements margins and padding except .menu-element,*/


.sidebar-element,
.image-element,
.sidebar-image-container
.social-element,
.sidebar-social-container,
.text-element,
.sidebar-text-container {
  margin: 0 10px !important;
  width: calc(100% - 10px) !important;
}

.menu-element {
  margin: 0 10px !important;
  width: calc(100% - 10px) !important;
}

/* Ensure specific containers also have margins */
.sidebar-elements-container .element-content > div,
.sidebar-elements-container .sidebar-social-container,
.sidebar-elements-container .sidebar-image-container,
.sidebar-elements-container .sidebar-text-container {
  margin: 0 15px !important;
  width: calc(100% - 10px) !important;
}

/* Make sure all sidebar elements have padding */
.sidebar-text,
.sidebar-image-container,
.sidebar-social-container,
.social-icons-grid,
.social-icons-live-container {
  padding: 5px 0 !important;
}

/* Clean up nested margins to prevent doubling */
.sidebar-social-container .social-icons-grid,
.sidebar-social-container .social-icons-live-container {
  margin: 0 !important;
  width: 100% !important;
}


/* Fix the tree container position */
.tree-container,
#galleryTree,
.sidebar .tree-container {
  /* Prevent any horizontal movement */
  position: relative !important;
  left: 0 !important;
  width: 100% !important; 
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Target the menu items specifically */
#galleryTree .nested-sortable,
.nested-sortable,
ol.nested-sortable {
  /* Prevent width changes */
  width: 100% !important;
  box-sizing: border-box !important;
  /* Ensure consistent margins */
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Prevent padding shifts */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Target menu items themselves */
#galleryTree li,
.nested-sortable li,
li.gallery-item {
  /* Prevent horizontal shifts */
  position: relative !important;
  left: 0 !important;
  /* Ensure consistent width */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Prevent any transitions on these elements during gallery loads */
.sidebar.loading .tree-container,
.sidebar.loading #galleryTree,
.sidebar.loading .nested-sortable,
.sidebar.loading .nested-sortable li {
  transition: none !important;
}



/* Create a root-level container for tooltips */
#tooltip-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through to elements below */
  z-index: 9999999;     /* Higher than anything else */
}

/* Base tooltip element */
.tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 12px;
  border-radius: 0px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 0.2s, transform 0.2s;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Tooltip arrow */
.tooltip:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.85);
}

/* Tooltip trigger element - any element with data-custom-tooltip */
[data-custom-tooltip] {
  position: relative;
}

/* Optional: Button-specific styles for consistent appearance */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 4px;
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  margin: 0 4px;
  cursor: pointer;
}

.btn-icon.btn-primary {
  background-color: var(--primary, #4682B4);
  color: white;
}

.btn-icon:hover {
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Adjust the SVG size while keeping button dimensions the same */
.btn-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5px;
  color: currentColor;
  fill: none;
  overflow: visible; /* Allow SVG to render outside its container */
}

/* Fix icon centering and color issues for logout and edit buttons */
.sidebar-header #logoutButton,
.sidebar-header #editButton {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--primary, hsl(93, 100%, 34%)) !important;
  color: white !important;
}

/* Ensure .btn-icon properly centers content */
.btn-icon {
  justify-content: center !important;
}

/* Ensure SVGs within these buttons are properly centered */
.sidebar-header #logoutButton svg,
.sidebar-header #editButton svg {
  margin: 0 auto !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

/* Fix any conflicting button styles */
.sidebar-header button.btn,
.sidebar-header button.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Fix hover states */
.sidebar-header #logoutButton:hover,
.sidebar-header #editButton:hover {
  background-color: var(--primary-hover, hsl(93, 100%, 39%)) !important;
}

.sidebar-header {
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 10px;
  gap: 8px;
  background-color: var(--menu-background-color, #fafafa);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Logo container styles */
.sidebar-header .logo-container {
  display: none; /* Hidden by default, shown in edit mode */
}

.sidebar-header.edit-mode-active .logo-container {
  display: block;
}

/* Button container to keep buttons aligned right */
.sidebar-header .button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  gap: 8px;
}

/* Style element header buttons to match header buttons */
.sidebar.editing .element-header .element-controls button,
.sidebar.editing .element-header .btn,
.sidebar.editing .element-header .visibility-toggle,
.sidebar.editing .element-header .edit-btn,
.sidebar.editing .element-header .delete-btn,
.sidebar.editing .element-header .drag-handle {
  width: 36px !important;
  height: 36px !important;
  padding: 4px !important;
  border-radius: 0px !important;
  background-color: #888888e5 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  margin: 0 4px !important;
  cursor: pointer !important;
  color: white !important;
}

/* Set SVG icons to white */
.sidebar.editing .element-header .element-controls button svg,
.sidebar.editing .element-header .btn svg,
.sidebar.editing .element-header .visibility-toggle svg,
.sidebar.editing .element-header .edit-btn svg,
.sidebar.editing .element-header .delete-btn svg,
.sidebar.editing .element-header .drag-handle svg {
  width: 12px !important;
  height: 12px !important;
  fill: none !important;
  stroke: white !important;
  color: white !important;
}

/* Right-align the controls in element headers */
.sidebar.editing .element-header {
  display: flex !important;
  justify-content: right !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

.sidebar.editing .element-header .element-controls {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Style Menu Item Controls to match header buttons but with smaller icons */
.sidebar.editing .gallery-item-content .controls button,
.sidebar.editing .gallery-item-content .btn,
.sidebar.editing .gallery-item-content .visibility-toggle,
.sidebar.editing .gallery-item-content .edit-btn,
.sidebar.editing .gallery-item-content .delete-btn {
  width: 24px !important; /* Smaller size for menu items */
  height: 24px !important;
  padding: 4px !important;
  border-radius: 0px !important;
  background-color: #888888e5 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  margin: 0 2px !important;
  cursor: pointer !important;
  color: white !important;
}

/* Set SVG icons to white and smaller size (12x12) */
.sidebar.editing .gallery-item-content .controls button svg,
.sidebar.editing .gallery-item-content .btn svg,
.sidebar.editing .gallery-item-content .visibility-toggle svg,
.sidebar.editing .gallery-item-content .edit-btn svg,
.sidebar.editing .gallery-item-content .delete-btn svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  fill: none !important;
  stroke: white !important;
  color: white !important;
}

/* Improve hover effect */
.sidebar.editing .gallery-item-content .controls button:hover,
.sidebar.editing .gallery-item-content .btn:hover,
.sidebar.editing .gallery-item-content .visibility-toggle:hover,
.sidebar.editing .gallery-item-content .edit-btn:hover,
.sidebar.editing .gallery-item-content .delete-btn:hover {
  background-color: #707070e5 !important; /* Slightly darker on hover */
}

/* Align controls properly */
.sidebar.editing .gallery-item-content .controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  gap: 2px !important;
}

/* Ensure proper structure for gallery items */
.sidebar.editing .gallery-item-content {
  display: flex !important;
  align-items: center !important;
  justify-content: right !important;
  padding: 4px 6px !important;
}

/* Fix any spacing issues with menu items */
.sidebar.editing .menu-item {
  margin-right: 8px !important;
}

/* Fix submenu toggle to match style */
.sidebar.editing .submenu-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin-right: 4px !important;
  background-color: #888888e5 !important;
  border-radius: 0px !important;
}

.sidebar.editing .submenu-toggle svg {
  width: 12px !important;
  height: 12px !important;
  stroke: white !important;
  color: white !important;
}

/* Hide the entire sidebar header by default */
.sidebar-header {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Only show sidebar header when authenticated */
body.hydra-authenticated .sidebar-header {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide all buttons in the header by default (belt and suspenders) */
.sidebar-header button,
#loginBtn,
#logoutButton,
#editButton,
.sidebar-header .btn-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Show appropriate buttons only when authenticated */
body.hydra-authenticated .sidebar-header #logoutButton,
body.hydra-admin .sidebar-header #editButton {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Additional fix for edit controls - should only be visible when in edit mode */
.edit-controls {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  gap: 10px; /* Keep existing gap */
}

body.edit-mode-active .edit-controls {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  gap: 10px; /* Keep existing gap */
}

/* Fix edge cases where inline styles might override */
.sidebar-header[style*="display: block"],
.sidebar-header[style*="display: flex"] {
  display: none !important;
}

body.hydra-authenticated .sidebar-header[style*="display: none"] {
  display: flex !important;
}

/* Also ensure controls in edit mode are properly visible */
body.edit-mode-active .edit-controls[style*="display: none"] {
  display: flex !important;
}

.add-form.visible {
  max-height: 600px !important; /* Increase from default 400px */
  overflow: visible !important; /* Ensure content is not cut off */
}

/* Fix for URL container in add form */
#urlInputContainer {
  margin-bottom: 15px;
}

/* Ensure submenu title field has proper spacing */
#submenuTitle {
  margin-top: 5px;
}

#metadataEditor {
  padding: 20px !important;
}

/* Add inner shadow to all editor panels */
#metadataEditor,
#menuStyleEditor,
#sidebarElementForm,
#importClassicForm,
.add-form.visible {
  box-shadow: inset 0 2px 30px rgba(0, 0, 0, 0.2) !important;
  border-radius: 0px !important;
  background-color: #f9f9f9 !important;
}

/* Additional padding for sidebar element form */
#sidebarElementForm {
  padding: 20px !important;
}

/* Make sure add form gets inner shadow during animation */
.add-form.visible {
  padding: 20px 15px !important;
}

/* Ensure buttons have consistent styling */
#metadataEditor .btn,
#menuStyleEditor .btn,
#sidebarElementForm .btn,
#importClassicForm .btn,
.add-form .btn {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Ensure form actions have consistent spacing */
.form-actions {
  margin-top: 20px !important;
}

/* Ensure form group has consistent margins */
.form-group {
  margin-bottom: 15px !important;
}

/* Better form field styling */
#metadataEditor input[type="text"],
#metadataEditor textarea,
#metadataEditor select,
#menuStyleEditor input[type="text"],
#menuStyleEditor select,
#sidebarElementForm input[type="text"],
#sidebarElementForm select,
#importClassicForm input[type="text"],
#importClassicForm select,
.add-form input[type="text"],
.add-form select {
  border: 1px solid #ddd !important;
  border-radius: 0px !important;
  padding: 8px !important;
  background-color: white !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Focus state for form fields */
#metadataEditor input[type="text"]:focus,
#metadataEditor textarea:focus,
#metadataEditor select:focus,
#menuStyleEditor input[type="text"]:focus,
#menuStyleEditor select:focus,
#sidebarElementForm input[type="text"]:focus,
#sidebarElementForm select:focus,
#importClassicForm input[type="text"]:focus,
#importClassicForm select:focus,
.add-form input[type="text"]:focus,
.add-form select:focus {
  border-color: #4682B4 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(70, 130, 180, 0.2) !important;
}

/* Section headings */
#metadataEditor h3,
#menuStyleEditor h3,
#sidebarElementForm h3,
#importClassicForm h3 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 18px !important;
  font-weight: 200 !important;
}

.sidebar.editing li.hidden-gallery,
.sidebar.editing li.hidden-gallery .gallery-item-content,
.sidebar.editing .gallery-item-content[data-visible="false"],
.sidebar.editing li[data-visible="false"],
body.edit-mode-active .sidebar li.hidden-gallery,
body.edit-mode-active .sidebar li.hidden-gallery .gallery-item-content,
body.edit-mode-active .sidebar .gallery-item-content[data-visible="false"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding-left: inherit !important;
  padding-right: inherit !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  opacity: 0.6 !important;
  position: relative !important;
}

   /* Base indentation for nested lists */
   ol.nested-sortable ol.nested-sortable {
    padding-left: 15px !important; /* Default indentation for all nested items */
  }
  
  /* Ensure edit mode has proper indentation */
  .sidebar.editing ol.nested-sortable ol.nested-sortable {
    padding-left: 20px !important; /* Slightly more indentation in edit mode */
  }
  
  /* Live mode indentation with multiple levels */
  .sidebar:not(.editing) ol.nested-sortable ol.nested-sortable {
    padding-left: 12px !important;
  }
  
  /* Even deeper nesting */
  .sidebar:not(.editing) ol.nested-sortable ol.nested-sortable ol.nested-sortable {
    padding-left: 15px !important;
  }
  
  
  /* Add visual indicator for submenu items in live mode */
  .sidebar:not(.editing) ol.nested-sortable ol.nested-sortable > li > .gallery-item-content {
    position: relative;
    padding-left: 15px !important;
  }
  
  /* ===================================================
   USING LIVE VIEW STYLING WITH EDIT CONTROLS
   This approach keeps everything exactly like the Live view
   but adds only the necessary edit controls
   =================================================== */

/* 1. RESET EDIT MODE TO MATCH LIVE VIEW */

/* Make Edit mode use the exact same styling as Live view */
.sidebar.editing {
  background-color: var(--menu-background-color, #fafafa) !important;
}

.sidebar.editing .gallery-item-content {
  border: none !important;
  background: transparent !important;
  padding: 0px 0px !important;
  margin: 2px 0 !important;
  box-shadow: none !important;
}

/* Reset font and text styling to match Live view */
.sidebar.editing .menu-item {
  font-family: var(--menu-font-family, Arial, sans-serif) !important;
  font-size: var(--menu-font-size, 16px) !important;
  color: var(--menu-color, #333) !important;
  transition: color 0.2s !important;
  padding: 3px 0 !important;
}

.sidebar.editing .menu-item:hover {
  color: var(--menu-hover-color, #4682B4) !important;
}

/* Active item matching Live view */
.sidebar.editing li.active > .gallery-item-content .menu-item {
  color: var(--menu-active-color, #4682B4) !important;
  font-weight: bold !important;
}

/* Submenu toggle like Live view */
.sidebar.editing .submenu-toggle {
  opacity: 0.5 !important;
}

.sidebar.editing .submenu-toggle:hover {
  opacity: 1 !important;
}

/* Use Live view's indentation */
.sidebar.editing ol.nested-sortable ol.nested-sortable {
  padding-left: 20px !important; /* Default Live view indentation */
}

/* 2. ONLY ADD EDIT CONTROLS VISIBILITY */

/* Make sure controls are visible in Edit mode, but don't change anything else */
.sidebar.editing .controls {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-left: auto !important;
}

/* Make control buttons visible and styled nicely */
.sidebar.editing .controls .btn,
.sidebar.editing .visibility-toggle,
.sidebar.editing .edit-btn,
.sidebar.editing .delete-btn {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 3px !important;
  background-color: transparent !important;
}

/* Style icons in edit controls */
.sidebar.editing .controls .btn svg,
.sidebar.editing .visibility-toggle svg,
.sidebar.editing .edit-btn svg,
.sidebar.editing .delete-btn svg {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.6 !important;
}

/* Style specific button types */
.sidebar.editing .visibility-toggle svg {
  stroke: #666 !important;
  color: #666 !important;
}

.sidebar.editing .edit-btn svg {
  stroke: var(--edit-button-color, #c0c0c0) !important;
  color: var(--edit-button-color, #c0c0c0) !important;
}

.sidebar.editing .delete-btn svg {
  stroke: var(--delete-button-color, #929292) !important;
  color: var(--delete-button-color, #929292) !important;
}

/* Button hover states */
.sidebar.editing .controls .btn:hover svg {
  opacity: 1 !important;
}

/* 3. MINIMAL DRAG STYLING (JUST LIKE LIVE VIEW) */

/* Make dragging work exactly like Live view */
.sidebar.editing .sortable-ghost,
.sidebar.editing li.ghost,
.sidebar.editing .ghost {
  opacity: 0.9 !important;
  background: white !important; 
  border: 1px dashed #ccc !important;
  box-shadow: none !important;
  margin: 2px 0 !important;
}

/* Clean up all other drag styling */
body.menu-item-dragging .sidebar.editing .nested-sortable,
body.menu-item-dragging .sidebar.editing .nested-sortable li:not(.sortable-ghost),
body.menu-item-dragging .sidebar.editing .nested-sortable ol {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Remove all potential distractions during drag */
body.menu-item-dragging * {
  outline: none !important;
}

.sidebar.editing .sortable-chosen,
.sidebar.editing .sortable-drag,
.sidebar.editing li.chosen,
.sidebar.editing li.drag {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 4. ONLY HIDE WHAT NEEDS TO BE HIDDEN IN EDIT MODE */


/* ===================================================
   MATCHING LIVE VIEW + HOVER CONTROLS
   =================================================== */

/* 1. CONSISTENT INDENTATION ACROSS BOTH MODES */

/* Base indentation level for all nested lists */
ol.nested-sortable ol.nested-sortable {
  padding-left: 15px !important; /* Base indentation */
}

/* Live view indentation - matches what's working well */
.sidebar:not(.editing) ol.nested-sortable ol.nested-sortable {
  padding-left: 15px !important;
}

/* Make Edit mode match exactly the same as Live view */
.sidebar.editing ol.nested-sortable ol.nested-sortable {
  padding-left: 15px !important; /* Exact same as Live view */
}

/* Deeper nesting level indentation for both modes */
.sidebar ol.nested-sortable ol.nested-sortable ol.nested-sortable {
  padding-left: 15px !important; /* Keep consistent for all levels */
}

/* Add visual indicator for nested items in both modes */
.sidebar ol.nested-sortable ol.nested-sortable > li > .gallery-item-content {
  position: relative;
  padding-left: 15px !important; /* Consistent indentation */
}

/* 2. HIDE EDIT CONTROLS UNTIL HOVER */

/* Hide edit controls by default */
.sidebar.editing .controls {
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

/* Show controls on hover */
.sidebar.editing .gallery-item-content:hover .controls {
  opacity: 1 !important;
}

/* 3. MAINTAIN REST OF LIVE VIEW STYLING */

/* Make Edit mode use the exact same styling as Live view */
.sidebar.editing {
  background-color: var(--menu-background-color, #fafafa) !important;
}

.sidebar.editing .gallery-item-content {
  border: none !important;
  background: transparent !important;
  padding: 0px 0px !important;
  margin: 2px 0 !important;
  box-shadow: none !important;
}

/* Reset font and text styling to match Live view */
.sidebar.editing .menu-item {
  font-family: var(--menu-font-family, Arial, sans-serif) !important;
  font-size: var(--menu-font-size, 16px) !important;
  color: var(--menu-color, #333) !important;
  transition: color 0.2s !important;
  padding: 3px 0 !important;
}

.sidebar.editing .menu-item:hover {
  color: var(--menu-hover-color, #4682B4) !important;
}

/* Active item matching Live view */
.sidebar.editing li.active > .gallery-item-content .menu-item {
  color: var(--menu-active-color, #4682B4) !important;
  font-weight: bold !important;
}

/* Submenu toggle like Live view */
.sidebar.editing .submenu-toggle {
  opacity: 0.5 !important;
}

.sidebar.editing .submenu-toggle:hover {
  opacity: 1 !important;
}

/* 4. EDIT CONTROLS STYLING */

/* Make sure controls are positioned correctly when visible */
.sidebar.editing .controls {
  display: flex !important;
  visibility: visible !important;
  margin-left: auto !important;
  align-items: center !important;
}

/* Make control buttons visible and styled nicely */
.sidebar.editing .controls .btn,
.sidebar.editing .visibility-toggle,
.sidebar.editing .edit-btn,
.sidebar.editing .delete-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 3px !important;
  background-color: transparent !important;
}

/* Style icons in edit controls */
.sidebar.editing .controls .btn svg,
.sidebar.editing .visibility-toggle svg,
.sidebar.editing .edit-btn svg,
.sidebar.editing .delete-btn svg {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.8 !important;
}

/* Style specific button types */
.sidebar.editing .visibility-toggle svg {
  stroke: #666 !important;
  color: #666 !important;
}

.sidebar.editing .edit-btn svg {
  stroke: var(--edit-button-color, #c0c0c0) !important;
  color: var(--edit-button-color, #c0c0c0) !important;
}

.sidebar.editing .delete-btn svg {
  stroke: var(--delete-button-color, #929292) !important;
  color: var(--delete-button-color, #929292) !important;
}

/* Button hover states */
.sidebar.editing .controls .btn:hover svg {
  opacity: 1 !important;
}

/* 5. MINIMAL DRAG STYLING */

/* Make dragging work exactly like Live view */
.sidebar.editing .sortable-ghost,
.sidebar.editing li.ghost,
.sidebar.editing .ghost {
  opacity: 0.9 !important;
  background: white !important; 
  border: 1px dashed #ccc !important;
  box-shadow: none !important;
  margin: 2px 0 !important;
}

/* Clean up all other drag styling */
body.menu-item-dragging .sidebar.editing .nested-sortable,
body.menu-item-dragging .sidebar.editing .nested-sortable li:not(.sortable-ghost),
body.menu-item-dragging .sidebar.editing .nested-sortable ol {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* ===================================================
   FIXED HOVER CONTROLS - GUARANTEED HIDDEN UNTIL HOVER
   =================================================== */

/* Extra-specific selectors to hide controls by default */
.sidebar.editing .gallery-item-content .controls,
html body .sidebar.editing .gallery-item-content .controls,
body .sidebar.editing li .gallery-item-content .controls,
.sidebar.editing li .controls,
.sidebar.editing .controls {
  opacity: 0 !important;
  visibility: visible !important; /* Keep visible for layout but transparent */
  transition: opacity 0.2s ease !important;
}

/* Show controls only on hover with ultra-specific selector */
.sidebar.editing .gallery-item-content:hover .controls,
html body .sidebar.editing .gallery-item-content:hover .controls,
body .sidebar.editing li .gallery-item-content:hover .controls,
.sidebar.editing li:hover > .gallery-item-content .controls,
.sidebar.editing .gallery-item-content:hover > .controls {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Make sure individual buttons are hidden/shown with parent */
.sidebar.editing .controls .btn,
.sidebar.editing .controls .visibility-toggle,
.sidebar.editing .controls .edit-btn,
.sidebar.editing .controls .delete-btn {
  opacity: inherit !important; /* Inherit opacity from parent controls */
}


.sidebar.editing[style*="display"] .gallery-item-content:hover .controls {
  opacity: 1 !important;
}

/* Ensure menu items have proper padding for controls */
.sidebar.editing .gallery-item-content {
  padding-right: 75px !important; /* Reserve space for controls */
  position: relative !important;
}

/* Position controls absolutely to prevent layout shifts */
.sidebar.editing .gallery-item-content .controls {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ===================================================
   ENHANCED SUBMENU TOGGLE ICON 
   =================================================== */

/* Position fix that worked */
.sidebar .submenu-toggle,
.sidebar.editing .submenu-toggle,
.sidebar:not(.editing) .submenu-toggle {
  margin-right: 22px !important; /* Increase right margin to push it left */
  margin-left: 0 !important; /* Reset any left margin */
  position: relative !important; /* Ensure positioning works */
}

/* Increase stroke width for the toggle icon */
.sidebar .submenu-toggle .toggle-icon,
.sidebar.editing .submenu-toggle .toggle-icon, 
.sidebar:not(.editing) .submenu-toggle .toggle-icon {
  stroke-width: 3px !important; /* Increase from 1px to 2px */
}

/* LIVE VIEW ONLY: Match the toggle color to menu text color */
.sidebar:not(.editing) .submenu-toggle .toggle-icon {
  stroke: var(--menu-color, #333) !important; /* Use menu text color */
  color: var(--menu-color, #333) !important; /* Use menu text color */
}

/* For active items in live view, match active color */
.sidebar:not(.editing) li.active > .gallery-item-content .submenu-toggle .toggle-icon {
  stroke: var(--menu-active-color, #4682B4) !important;
  color: var(--menu-active-color, #4682B4) !important;
}

/* For hover state in live view, match hover color */
.sidebar:not(.editing) .gallery-item-content:hover .submenu-toggle .toggle-icon {
  stroke: var(--menu-hover-color, #3a6d96) !important;
  color: var(--menu-hover-color, #3a6d96) !important;
}



/* ===================================================
   POSITION ARROWS IMMEDIATELY AFTER TEXT
   =================================================== */

/* Use flexbox layout for better positioning */
.sidebar .gallery-item-content,
.sidebar.editing .gallery-item-content,
.sidebar:not(.editing) .gallery-item-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  padding-right: 80px !important; /* Space for controls */
}

/* Completely reposition the submenu toggle to be right after the text */
.sidebar .submenu-toggle,
.sidebar.editing .submenu-toggle,
.sidebar:not(.editing) .submenu-toggle {
  position: static !important; /* Remove absolute positioning */
  order: 2 !important; /* Place after menu item */
  margin: 0 0 0 0px !important; 
  transform: none !important; /* Remove any transform */
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
}

/* Position menu item properly in flexbox */
.sidebar .menu-item,
.sidebar.editing .menu-item,
.sidebar:not(.editing) .menu-item {
  order: 1 !important; /* Place before toggle */
  margin-right: 0 !important; /* Remove right margin */
  padding-left: 5px !important; /* Add consistent left padding */
  flex: 0 1 auto !important; /* Allow text to take needed space but no more */
}

/* Position controls at the end */
.sidebar .controls,
.sidebar.editing .controls,
.sidebar:not(.editing) .controls {
  position: absolute !important;
  right: 5px !important;
  order: 3 !important;
  margin-left: auto !important;
}

/* Make sure toggle icon has proper sizing */
.sidebar .submenu-toggle .toggle-icon,
.sidebar.editing .submenu-toggle .toggle-icon,
.sidebar:not(.editing) .submenu-toggle .toggle-icon {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* Ensure proper spacing in flexbox */
.sidebar .gallery-item-content > *,
.sidebar.editing .gallery-item-content > *,
.sidebar:not(.editing) .gallery-item-content > * {
  flex-shrink: 0 !important; /* Prevent shrinking */
}

/* Fix for text overflow */
.sidebar .menu-item,
.sidebar.editing .menu-item,
.sidebar:not(.editing) .menu-item {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* ===================================================
   CONSISTENT TOGGLE STYLING BETWEEN EDIT AND LIVE
   =================================================== */

/* Make Edit mode toggles match Live view style */
.sidebar.editing .submenu-toggle,
.sidebar.editing .submenu-toggle .toggle-icon {
  /* Match menu text color */
  color: var(--menu-color, #333) !important;
  stroke: var(--menu-color, #333) !important;
  fill: none !important;
  
  /* Remove any background */
  background-color: transparent !important;
  background: none !important;
  
  /* Remove any borders or outlines */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  
  /* Set opacity to match Live view */
  opacity: 0.8 !important;
  transition: opacity 0.2s ease !important;
}

/* Hover state in Edit mode */
.sidebar.editing .gallery-item-content:hover .submenu-toggle,
.sidebar.editing .submenu-toggle:hover {
  opacity: 1 !important;
  background-color: transparent !important;
}

/* Active item state in Edit mode */
.sidebar.editing li.active > .gallery-item-content .submenu-toggle .toggle-icon {
  color: var(--menu-active-color, #4682B4) !important;
  stroke: var(--menu-active-color, #4682B4) !important;
}

/* Hover color in Edit mode */
.sidebar.editing .gallery-item-content:hover .submenu-toggle .toggle-icon,
.sidebar.editing .submenu-toggle:hover .toggle-icon {
  color: var(--menu-hover-color, #3a6d96) !important;
  stroke: var(--menu-hover-color, #3a6d96) !important;
}

/* Ensure consistent sizing in both modes */
.sidebar .submenu-toggle .toggle-icon,
.sidebar.editing .submenu-toggle .toggle-icon,
.sidebar:not(.editing) .submenu-toggle .toggle-icon {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2px !important;
}

/* Remove any special styling that might be applied in Edit mode */
.sidebar.editing .has-children .submenu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
}

/* Override any button-like styling in Edit mode */
.sidebar.editing .submenu-toggle,
.sidebar.editing .has-children .submenu-toggle {
  padding: 0 !important;
  margin-left: 0px !important;
  border-radius: 0 !important;
}

.toggle-icon.rotated {
  transform: rotate(90deg) !important; /* Change from 180deg to 90deg */
}

/* Reset any existing rotation */
.toggle-icon {
  transform: rotate(0deg) !important; /* Ensure it starts in the right position */
  transition: transform 0.2s ease !important; /* Smooth transition for rotation */
}

/* ===================================================
   FIX ACTIVE MENU ITEM STYLING
   =================================================== */

/* Remove bold styling from active menu items */
.sidebar li.active > .gallery-item-content .menu-item,
.sidebar:not(.editing) li.active > .gallery-item-content .menu-item,
.sidebar.editing li.active > .gallery-item-content .menu-item {
  font-weight: 200 !important; /* Remove bold styling */
  color: var(--menu-active-color, #4682B4) !important; /* Keep only the color change */
}

/* Override any other potential sources of bold styling */
.sidebar .menu-item,
.sidebar:not(.editing) .menu-item,
.sidebar.editing .menu-item {
  font-weight: 200 !important; /* Ensure consistent font-weight */
}

/* Make active styles more specific to override conflicting rules */
html body .sidebar li.active > .gallery-item-content .menu-item,
html body .sidebar:not(.editing) li.active > .gallery-item-content .menu-item,
html body .sidebar.editing li.active > .gallery-item-content .menu-item {
  font-weight: 200 !important;
  color: var(--menu-active-color, #4682B4) !important;
}

/* Remove any hover styling on active items to prevent conflicts */
.sidebar li.active > .gallery-item-content:hover .menu-item,
.sidebar:not(.editing) li.active > .gallery-item-content:hover .menu-item,
.sidebar.editing li.active > .gallery-item-content:hover .menu-item {
  color: var(--menu-active-color, #4682B4) !important; /* Keep color consistent */
}

/* Ensure toggle icons for active items get styled correctly */
.sidebar li.active > .gallery-item-content .submenu-toggle .toggle-icon,
.sidebar:not(.editing) li.active > .gallery-item-content .submenu-toggle .toggle-icon,
.sidebar.editing li.active > .gallery-item-content .submenu-toggle .toggle-icon {
  color: var(--menu-active-color, #4682B4) !important;
  stroke: var(--menu-active-color, #4682B4) !important;
}

/* Remove bold styling from active menu items */
.sidebar li.active > .gallery-item-content .menu-item,
.tree li.active > .gallery-item-content .menu-item {
  font-weight: 200 !important;
  color: var(--menu-active-color, #4682B4) !important;
}

/* ===================================================
   SIMPLE FIX FOR EDIT FORM BUTTONS
   =================================================== */

/* Target only the specific problematic buttons */
.edit-form .controls .btn {
  display: inline-block !important;
  padding: 8px 16px !important;
  margin: 5px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  min-width: 80px !important;
  background-color: #f0f0f0 !important;
  color: #333 !important;
  border: 1px solid #ddd !important;
}

/* Primary button styling */
.edit-form .controls .btn[onclick*="saveEdit"],
.edit-form .controls .btn-primary {
  background-color: #888888e5 !important;
  color: white !important;
}

/* Make sure the controls container has proper spacing */
.edit-form .controls {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 15px !important;
  gap: 10px !important;
}

/* Set fixed sidebar width and prevent squashing */
.sidebar {
  width: var(--sidebar-width, 15vw); /* Use CSS variable for easy customization */
  min-width: 200px; /* Minimum width to prevent excessive squashing */
  max-width: 350px; /* Maximum width for large screens */
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0; /* Prevent shrinking */
  position: relative; /* For proper positioning */
  z-index: 10; /* Ensure sidebar is above other elements */
  transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease; /* Smooth transition */
  
  /* Apply padding variables instead of margins */
  padding-top: var(--sidebar-padding-top, 0px);
  padding-right: var(--sidebar-padding-right, 0px);
  padding-bottom: var(--sidebar-padding-bottom, 0px);
  padding-left: var(--sidebar-padding-left, 0px);
  
  /* Make sure box-sizing is border-box so padding is included in width */
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .mobile-header {
    display: flex;
  }
  
  .mobile-backdrop.mobile-open {
    display: block;
  }
  
  .container {
    flex-direction: column;
    padding-top: 60px; /* Space for fixed header */
  }
  
  .sidebar {
    position: fixed;
    top: 60px;
    right: -300px; /* Off-screen by default */
    width: 300px;
    height: calc(100vh - 60px);
    z-index: 99;
    transition: right 0.3s ease;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto;
    
    /* Adjust padding for mobile view */
    /* Keep horizontal padding (left/right) but limit or remove vertical padding (top/bottom) */
    padding-top: min(var(--sidebar-padding-top, 0px), 10px);
    padding-bottom: min(var(--sidebar-padding-bottom, 0px), 10px);
    
    /* Preserve left/right padding but apply max constraints to prevent overflow */
    padding-left: var(--sidebar-padding-left, 0px);
    padding-right: var(--sidebar-padding-right, 0px);
  }
  
  .sidebar.mobile-open {
    right: 0;
  }
  
  .gallery-container {
    width: 100%;
    margin-top: var(--mobile-header-height);
  }
}

/* For smaller screens */
@media (max-width: 480px) {
  .sidebar {
    width: 85%;
    
    /* For very small screens, limit horizontal padding to ensure 
       content doesn't get too cramped */
    padding-left: min(var(--sidebar-padding-left, 0px), 15px);
    padding-right: min(var(--sidebar-padding-right, 0px), 15px);
  }
  .gallery-container {
    width: 100%;
    margin-top: var(--mobile-header-height);
  }
}




/* Spacer item styling - Enhanced for both view and edit modes */
.spacer-item {
  margin: 5px 0 !important;
  position: relative !important;
  height: 12px !important;
  min-height: 12px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Use ::before to create a visible spacer that has guaranteed size */
.spacer-item .menu-item.spacer {
  position: relative !important;
  display: block !important;
  height: 12px !important;
  min-height: 12px !important;
  width: 100% !important;
  cursor: default;
  pointer-events: none;
}



/* Ensure the spacer's parent container has proper display */
.spacer-item .gallery-item-content {
  display: block !important;
  min-height: 12px !important;
  position: relative !important;
}

/* Only show spacer editing controls in edit mode */
:not(.edit-mode-active) .spacer-item.active {
  background-color: transparent !important;
}

:not(.edit-mode-active) .spacer-item .controls {
  display: none !important;
}

/* External link styling */
.menu-item.external-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.menu-item.external-link::after {
  display: inline-block;
  margin-left: 0px;
  font-size: 0.8em;
  vertical-align: super;
}

.menu-item.folder {
  background-color: transparent !important; /* Removes the grey background */
  border: none !important; /* Removes any button-like border */
  color: var(--menu-color, #333) !important;
  margin-left: 0px;
}

.sidebar.editing {
  width: 26vw !important; /* Use CSS variable with fallback */
  min-width: 300px; /* Larger minimum width in edit mode */
}

.home-toggle {
  color: #999;
  transition: color 0.2s ease;
}
.home-toggle.active {
  color: #4682B4 !important;
}
.home-toggle.active svg {
  fill: rgba(70, 130, 180, 0.1);
}
.home-toggle:hover {
  color: #3a6d96;
}

.page-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: transparent;
  margin: 0px !important;
  padding: 0px !important;
}

/* Page Elements Container */
.page-elements-container {
  width: 100%;
  max-width: 100%;
  margin: 0px !important;
  padding: 0px !important;
}


/* Horizontal Menu Layout Styles */

/* Hide sidebar when horizontal layout is active, but show it in edit mode */
body.menu-layout-horizontal .sidebar {
  display: none;
}

/* Keep sidebar visible in edit mode with horizontal layout */
body.menu-layout-horizontal.edit-mode-active .sidebar {
  display: block;
  position: fixed;
  z-index: 1100;
}

/* Ensure mobile header is always visible in horizontal layout */
body.menu-layout-horizontal .mobile-header {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background-color: var(--menu-background-color, #fafafa);
}

/* Position content below fixed header */
body.menu-layout-horizontal .container {
  padding-top: var(--mobile-header-height, 60px);
  margin-left: 0 !important;
  width: 100% !important;
}

/* Horizontal menu container */
.horizontal-menu-container {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  white-space: nowrap;
  align-items: center;
  padding: 0 10px;
  background-color: var(--menu-background-color, #fafafa);
}

/* Mobile header content styling for horizontal layout */
body.menu-layout-horizontal .mobile-header-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

/* Container for Edit and Logout buttons in horizontal layout */
.horizontal-header-controls {
  display: flex;
  align-items: center;
  margin-right: 15px;
  z-index: 1101; /* Ensure buttons appear above other elements */
}

/* Style for buttons in horizontal header */
.horizontal-header-controls button {
  background: transparent;
  border: none;
  color: var(--menu-color, #333);
  padding: 8px;
  margin-right: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background-color 0.2s;
  border-radius: 4px;
}

.horizontal-header-controls button:hover {
  color: var(--menu-hover-color, #3a6d96);
  background-color: rgba(0,0,0,0.05);
}

.horizontal-header-controls button:active {
  background-color: rgba(0,0,0,0.1);
}

/* Ensure the buttons are always visible */
.horizontal-header-controls button.horizontal-edit-btn,
.horizontal-header-controls button.horizontal-logout-btn,
.horizontal-header-controls button.horizontal-login-btn {
  display: flex !important;
}

/* Ensure hamburger button appears on the right in mobile view */
body.menu-layout-horizontal .hamburger-btn {
  margin-left: auto;
}

/* Horizontal menu item */
.horizontal-menu-item {
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  margin-right: 0.5rem;
  font-size: var(--menu-font-size, 16px);
  font-family: var(--menu-font-family, Arial, sans-serif);
  color: var(--menu-color, #333);
  opacity: 0.9;
  transition: opacity 0.3s, color 0.3s;
  background-color: transparent;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.horizontal-menu-item:hover {
  color: var(--menu-hover-color, #3a6d96);
  opacity: 1;
}

.horizontal-menu-item.active {
  color: var(--menu-active-color, #4682B4);
  opacity: 1;
  font-weight: 200;
}

/* Dropdown arrow */
.horizontal-dropdown-arrow {
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
  display: inline-block;
}

/* Rotate arrow when dropdown is open */
.horizontal-menu-item.open .horizontal-dropdown-arrow {
  transform: rotate(180deg);
}

/* Dropdown container */
.horizontal-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1001;
  min-width: 200px;
  padding: 0.5rem 0;
  margin-top: 0.25rem;
  background-color: var(--menu-background-color, #fafafa);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border-radius: 4px;
  animation: fadeInDropdown 0.2s ease-in-out;
}

/* Animation for dropdown appearance */
@keyframes fadeInDropdown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Show dropdown when open */
.horizontal-dropdown.open {
  display: block;
}

/* Dropdown list */
.horizontal-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.horizontal-dropdown-list li {
  padding: 0.75rem 1rem;
  cursor: pointer;
  color: var(--menu-color, #333);
  transition: background-color 0.2s, color 0.2s;
  font-size: calc(var(--menu-font-size, 16px) * 0.95);
}

.horizontal-dropdown-list li:hover {
  background-color: rgba(0,0,0,0.05);
  color: var(--menu-hover-color, #3a6d96);
}

.horizontal-dropdown-list li.active {
  color: var(--menu-active-color, #4682B4);
  font-weight: 200;
}

/* Ensure dropdowns don't go off-screen */
.horizontal-menu-item:nth-last-child(-n+2) .horizontal-dropdown {
  right: 0;
  left: auto;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .horizontal-menu-container {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  
  .horizontal-menu-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }
  
  .horizontal-dropdown {
    position: fixed;
    left: 0;
    width: 100%;
    border-radius: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }
  
  /* Adjust hamburger position for horizontal layout */
  body.menu-layout-horizontal .hamburger-btn {
    z-index: 1002;
  }
  .gallery-container {
    width: 100%;
    margin-top: var(--mobile-header-height);
  }
}

/* Adjust layout when editing is active */
body.edit-mode-active.menu-layout-horizontal .mobile-header {
  z-index: 999;
}

body.edit-mode-active.menu-layout-horizontal .edit-controls {
  z-index: 1000;
  position: fixed;
  top: calc(var(--mobile-header-height, 60px));
  gap: 10px; /* Keep existing gap */
}

/* Position header controls at right side */
body.menu-layout-horizontal .mobile-header {
  display: flex !important;
  justify-content: space-between;
  padding: 0 10px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background-color: var(--menu-background-color, #fafafa);
}

/* Position content correctly */
body.menu-layout-horizontal .mobile-header-content {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
}

/* Move controls to the right */
.horizontal-header-controls {
  display: flex;
  align-items: center;
  margin-left: auto; /* Push to right */
  z-index: 1101;
  order: 999; /* Ensure it's last */
}

/* Adjust the horizontal menu container */
.horizontal-menu-container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-right: 10px;
  max-width: calc(100% - 120px); /* Leave space for buttons */
}

/* Style for buttons in horizontal header */
.horizontal-header-controls button {
  background: transparent;
  border: none;
  color: var(--menu-color, #333);
  padding: 8px;
  margin-left: 5px;
  cursor: pointer;
  display: flex !important; /* Always display */
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background-color 0.2s;
  border-radius: 4px;
  opacity: 0.9;
  width: 36px;
  height: 36px;
}

.horizontal-header-controls button:hover {
  color: var(--menu-hover-color, #3a6d96);
  background-color: rgba(0,0,0,0.05);
  opacity: 1;
}

.horizontal-header-controls button:active {
  background-color: rgba(0,0,0,0.1);
}

/* Make sure the horizontal menu doesn't overflow the header */
body.menu-layout-horizontal .horizontal-menu-container {
  flex: 1;
  padding-right: 20px;
}

/* Adjust hamburger position */
body.menu-layout-horizontal .hamburger-btn {
  display: none !important; /* Hide hamburger in horizontal layout */
}

/* Top Layout Styles - Make mobile menu visible at all breakpoints */
body.menu-layout-top .mobile-header {
  display: flex !important; /* Force display regardless of media query */
}

/* Ensure mobile backdrop works for all screen sizes in top layout */
body.menu-layout-top .mobile-backdrop.mobile-open {
  display: block !important;
}

/* For top layout, make sure sidebar behaves like mobile sidebar */
body.menu-layout-top .sidebar {
  position: fixed !important;
  top: var(--mobile-header-height, 60px) !important;
  right: -300px !important; /* Hidden by default */
  width: 300px !important; /* Override variable-based width */
  height: calc(100vh - var(--mobile-header-height, 60px)) !important;
  max-height: calc(100vh - var(--mobile-header-height, 60px)) !important;
  z-index: 999999 !important;
  transition: right 0.3s ease !important;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1) !important;
  overflow-y: auto !important;
}


/* Show sidebar when mobile-open class is applied */
body.menu-layout-top .sidebar.mobile-open {
  right: 0 !important;
}



/* Ensure container has proper top padding in top layout */
body.menu-layout-top .container {
  display: block !important; /* Override flex display */
}


/* =================================================== */
/* CSS Fixes for Menu Item Wrapping and Width */
/* =================================================== */

/* Parent Flex Container: div.gallery-item-content */
/* Ensures the container uses flex and takes full width */
.sidebar .gallery-item-content,
.sidebar.editing .gallery-item-content,
.sidebar:not(.editing) .gallery-item-content {
  display: flex !important;
  align-items: center !important; 
  width: 100% !important; 
  box-sizing: border-box !important; 
  position: relative !important; /* Needed for absolute positioning of controls */
  padding-left: 0px !important; /* Basic left padding */
  /* Minimal right padding, controls are positioned absolutely */
  padding-right: 5px !important; 
  overflow: visible !important; /* Allow content (like wrapped text) to be fully visible */
  margin: 2px 0 !important; /* Maintain vertical spacing */
}

/* Menu Item Text: span.menu-item */
/* Allows text to grow, shrink, and wrap */
.sidebar .menu-item,
.sidebar.editing .menu-item,
.sidebar:not(.editing) .menu-item {
  /* Keep original flex order */
  order: 1 !important; 
  
  /* Flex properties: Allow grow(1), shrink(1), default basis(auto) */
  flex-grow: 1; 
  flex-shrink: 1; 
  flex-basis: auto; 
  /* CRUCIAL: Allow shrinking below natural content size for wrapping */
  min-width: 0; 

  /* --- Wrapping rules --- */
  white-space: normal !important; /* Allow wrapping */
  word-break: break-word !important; /* Break words */
  overflow-wrap: break-word !important; /* Alternate word break */
  overflow: visible !important; /* Ensure text isn't clipped */
  
  /* --- Styling & Spacing --- */
  margin-right: 4px !important; /* Space between text and arrow */
  padding-left: 0px !important; /* Original padding */
  font-weight: 200 !important; /* Original font weight */
  cursor: pointer;
  max-width: 100%; /* Can use up to 100% of calculated flex space */
  /* display: block; */ /* Removed explicit display override */
}

/* Submenu Toggle Arrow: span.submenu-toggle */
/* Positions arrow directly after text */
.sidebar .submenu-toggle,
.sidebar.editing .submenu-toggle,
.sidebar:not(.editing) .submenu-toggle {
  position: static !important; /* Position in normal flex flow */
  order: 2 !important; /* Ensure it comes after the menu-item (order: 1) */
  margin: 0 4px 0 0 !important; /* Space around the arrow */
  flex-shrink: 0; /* Prevent arrow from shrinking */
  display: inline-flex !important; /* Display correctly */
  align-items: center; /* Vertical alignment */
  cursor: pointer;
  /* Reset size overrides */
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

/* Edit Controls Container: div.controls */
/* Positions controls absolutely on the far right */
.sidebar .controls,
.sidebar.editing .controls {
  position: absolute !important; 
  right: 5px !important; /* Position from right edge */
  top: 50% !important; 
  transform: translateY(-50%) !important; /* Center vertically */
  order: 3 !important; /* Ensure it's logically last */
  
  /* Styling for when visible */
  display: flex !important; 
  align-items: center !important;
  gap: 2px;
}

/* Hide Controls in View Mode */
/* Ensures controls take up zero space and have no layout impact */
.sidebar:not(.editing) .controls {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important; /* Reinforce out of flow */
    width: 0 !important;          /* Zero width */
    height: 0 !important;         /* Zero height */
    padding: 0 !important;        /* No padding */
    margin: 0 !important;         /* No margin */
    overflow: hidden !important;  /* Hide overflow */
}

/* Nested List Indentation */
/* Keep indentation ONLY on the <ol> element */
ol.nested-sortable ol.nested-sortable {
  padding-left: 10px !important; /* Adjust indentation level if needed */
  width: 100% !important; /* Ensure nested list takes full width */
  box-sizing: border-box !important;
}

/* =================================================== */
/* CSS Fixes for Nested Menu Indentation (Padding on LI) */
/* =================================================== */

/* --- Reset Padding --- */
/* Remove default padding from ALL nested lists */
ol.nested-sortable ol.nested-sortable {
  padding-left: 0 !important; 
  margin-left: 0 !important;
  list-style: none;
}
/* Reset padding/margin on list items */
.nested-sortable li {
    margin: 2px 0 !important; 
    padding: 0 !important; /* Reset padding on li */
    list-style: none;
    /* Ensure LI takes full width relative to its parent OL */
    width: 100% !important; 
    box-sizing: border-box !important;
}

/* --- Apply Indentation via Padding on LI element --- */
/* Apply increasing padding-left to the LI based on its data-level */

/* Level 0 (Top level items) - No indent needed */
li[data-nesting-level="0"] {
  padding-left: 0px !important; 
}

/* Level 1 (Sub-items) */
li[data-nesting-level="1"] {
  padding-left: 10px !important; /* Adjust indent amount as needed */
}

/* Level 2 (Sub-sub-items) */
li[data-nesting-level="2"] {
  padding-left: 20px !important; /* Adjust indent amount as needed */
}

/* Level 3 (Sub-sub-sub-items) */
li[data-nesting-level="3"] {
  padding-left: 30px !important; /* Adjust indent amount as needed */
}

/* Level 4 (Optional) */
li[data-nesting-level="4"] {
  padding-left: 40px !important; /* Adjust indent amount as needed */
}

/* --- Ensure Content Div Styles --- */
/* Ensure the inner div takes full width and has minimal internal padding */
.sidebar .gallery-item-content {
    padding-left: 0px !important; /* Keep minimal INTERNAL padding */
    padding-right: 5px !important; /* Keep minimal INTERNAL padding */
    width: 100% !important; /* Take 100% width of the (now padded) parent LI */
    box-sizing: border-box !important; /* Padding included in width */
}


/* Force font-weight 200 for menu items in VIEW mode, overriding Pico */
body .sidebar:not(.editing) .menu-item {
  font-weight: 200 !important;
}

/* Force font-weight 200 for menu items in EDIT mode, overriding Pico */
body .sidebar.editing .menu-item {
  font-weight: 200 !important; /* Ensures consistency in edit mode too */
}

/* Optional: A slightly less specific rule as a fallback, though likely redundant */
.menu-item {
 font-weight: 200 !important;
}

/* --- Mobile Header Text Paragraph Override (Targeting Pico) --- */


  /* Use a highly specific selector to override the generic 'p' rule */
  body .mobile-header .mobile-header-content .mobile-header-text p {
    /* Apply YOUR Menu Styles */
    font-family: var(--menu-font-family, inherit) !important;
    color: var(--menu-color, #333) !important; /* Override Pico's --color */
    font-size: var(--menu-font-size, 16px) !important; /* Override Pico's --font-size */
    font-weight: 200 !important; /* Override Pico's --font-weight */
    font-style: normal !important; /* Override Pico's font-style */
    line-height: 1.3 !important; /* Adjust line-height for better vertical centering */

    /* Explicitly Reset Pico's Margins */
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* Override Pico's --typography-spacing-vertical */

    /* Reset any potential padding */
    padding: 0 !important;

    /* Ensure text alignment */
    text-align: center !important;

    /* Help vertical alignment */
    display: inline !important; /* Treat as inline text within the centered container */
    vertical-align: middle;
  }

  /* Reconfirm vertical centering for the container */
  .mobile-header-content {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center */
    height: 100%;
  }
/* ============================================= */
/* === Horizontal Menu Layout Styles === */
/* ============================================= */

/* Body class to indicate horizontal layout */
body.menu-layout-horizontal .sidebar {
  display: none !important; /* Hide the standard sidebar in horizontal view mode */
}

body.menu-layout-horizontal.edit-mode-active .sidebar {
  display: block !important; /* Show the sidebar when in edit mode for horizontal layout */
  position: fixed !important;
  left: 0;
  top: var(--mobile-header-height, 60px); /* Position below the fixed header */
  bottom: 0;
  width: var(--sidebar-edit-width, 26vw); /* Use your edit mode sidebar width */
  z-index: 1100; 
  background-color: var(--menu-background-color, #f0f0f0);
  overflow-y: auto;
  padding-top: var(--sidebar-padding-top, 0px);
  padding-right: var(--sidebar-padding-right, 0px);
  padding-bottom: var(--sidebar-padding-bottom, 0px);
  padding-left: var(--sidebar-padding-left, 0px);
  box-sizing: border-box;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1); 
}

body.menu-layout-horizontal.edit-mode-active .container {
  margin-left: 0; 
}

/* Adjustments for the .mobile-header when horizontal menu is active */
body.menu-layout-horizontal .mobile-header {
display: flex !important;
position: fixed !important; 
top: 0;
left: 0;
right: 0; 
height: var(--mobile-header-height, 60px); /* Controlled by Style Customizer */
z-index: 1000; 
background-color: var(--menu-background-color, #f8f9fa); 
box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
padding: 0 10px; 
align-items: center; 
}

/* The .mobile-header-content should house the logo and the horizontal menu */
body.menu-layout-horizontal .mobile-header-content {
flex-grow: 1; 
display: flex;
align-items: center;
justify-content: flex-start; 
overflow: hidden; 
height: 100%;
}

/* Styling for a dedicated logo/site title area */
.horizontal-header-logo {
margin-right: 15px; 
flex-shrink: 0; 
display: flex;
align-items: center;
height: 100%;
order: 0; 
}
.horizontal-header-logo img {
max-height: calc(var(--mobile-header-height, 60px) - 20px); /* Scaled down */
width: auto; /* Maintain aspect ratio */
display: block;
object-fit: contain; /* Ensures image fits without cropping, maintaining aspect ratio */
}
.horizontal-header-logo .site-title-text {
color: var(--menu-color, #333);
font-family: var(--menu-font-family, Arial, sans-serif);
font-size: 1.2em; 
font-weight: bold;
white-space: nowrap;
}

/* Styling for the main horizontal menu container */
.horizontal-menu-container {
display: flex; 
align-items: center; 
flex-grow: 1; 
height: 100%; 
overflow-x: hidden; /* Hide horizontal scrollbar, rely on wrapping */
overflow-y: hidden; /* Hide vertical scrollbar if wrapping creates too much height */
flex-wrap: wrap; /* Allow items to wrap */
background-color: transparent; 
padding: 0; 
order: 1; 
justify-content: flex-start; 
max-height: var(--mobile-header-height, 60px); /* Limit height to header height */
}

/* Individual top-level horizontal menu items */
.horizontal-menu-item {
padding: 0 10px !important;
cursor: pointer;
color: var(--menu-color, #333);
font-family: var(--menu-font-family, Arial, sans-serif);
font-size: var(--menu-font-size, 16px);
text-decoration: none;
position: relative; 
display: inline-flex; 
align-items: center;
transition: color 0.2s ease, background-color 0.2s ease;
white-space: nowrap; 
/* Adjust line-height to be less than or equal to the header height minus any padding */
line-height: calc(var(--mobile-header-height, 60px) - 10px); /* Example: 10px total vertical padding */
height: calc(var(--mobile-header-height, 60px) - 10px); /* Ensure items don't exceed header height */
margin: 2px 0; 
}

.horizontal-menu-item:hover {
color: var(--menu-hover-color, #007bff);
background-color: rgba(0,0,0,0.05); 
}

.horizontal-menu-item.active {
color: var(--menu-active-color, #0056b3);
font-weight: bold; 
}

.horizontal-menu-item.has-children::after {
content: '▼'; 
font-size: 0.7em;
margin-left: 6px;
transition: transform 0.2s ease-in-out;
display: inline-block;
}

.horizontal-menu-item.has-children.expanded::after {
transform: rotate(180deg); 
}

/* Horizontal Submenu Styling - Crucial for dropdown behavior */
.horizontal-submenu {
display: none; /* Hidden by default */
position: absolute;
top: 100%; /* Position below the parent item */
left: 0;
background-color: var(--menu-background-color, #f8f9fa);
border: 1px solid #ddd;
z-index: 1050; 
min-width: 180px; 
max-width: 280px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
/*padding: 0.5rem 0; */
list-style: none; 
/* margin: 2px 0 0; /* Small gap from parent, adjusted from 0.125rem */
white-space: normal; 
/* border-radius: 0 0 4px 4px; */
opacity: 0;
transform: translateY(0px); /* Start at parent bottom, not -10px */
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, visibility 0.15s step-end;
visibility: hidden; /* Use visibility for better accessibility and transition control */
}

.horizontal-menu-item.align-submenu-right > .horizontal-submenu {
  left: auto;
  right: 0;
}

.horizontal-menu-item.expanded > .horizontal-submenu {
display: block; /* Or flex if items need flex properties */
opacity: 1;
transform: translateY(0);
visibility: visible;
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, visibility 0s step-start;
}

.horizontal-submenu-item {
padding: 0.75rem 1rem; 
display: block; 
color: var(--menu-color, #333);
text-decoration: none;
font-family: var(--menu-font-family, Arial, sans-serif);
font-size: calc(var(--menu-font-size, 16px) * 0.90); 
transition: color 0.2s ease, background-color 0.2s ease;
line-height: 1.4;
white-space: normal; 
}

.horizontal-submenu-item:hover {
background-color: rgba(0,0,0,0.05);
color: var(--menu-hover-color, #007bff);
}

.horizontal-submenu-item.active {
color: var(--menu-active-color, #0056b3);
background-color: rgba(0,0,0,0.03); 
font-weight: bold;
}

/* Ensure the main content area is pushed down */
body.menu-layout-horizontal .container {
padding-top: var(--mobile-header-height, 60px) !important;
margin-left: 0 !important;
width: 100% !important;
max-width: 100vw !important; 
box-sizing: border-box; 
}


/* Hamburger button in horizontal layout */
body.menu-layout-horizontal .hamburger-btn {
display: none; 
margin-left: 5px; 
order: 3; 
z-index: 1001; 
flex-shrink: 0; 
}

body.menu-layout-horizontal.edit-mode-active .hamburger-btn {
  display: flex !important; 
}

@media (max-width: 768px) {
body.menu-layout-horizontal .hamburger-btn {
  display: flex !important; 
}
body.menu-layout-horizontal .horizontal-menu-container {
    flex-shrink: 1;
    padding-right: 5px; 
    max-width: calc(100% - 80px); 
}
}



body.edit-mode-active.menu-layout-horizontal .sidebar .edit-controls {
position: sticky !important; 
top: 0 !important; 
background-color: var(--menu-background-color, #f0f0f0) !important; 
z-index: 25 !important; 
gap: 10px; /* Keep existing gap */
}

body.edit-mode-active.menu-layout-horizontal .sidebar .tree-container {
  flex-grow: 1;
  overflow-y: auto;
}

body.menu-layout-horizontal .mobile-header .horizontal-header-logo {
  flex-shrink: 0;
}
body.menu-layout-horizontal .mobile-header .horizontal-menu-container {
  flex-grow: 1; 
  flex-shrink: 1; /* Allow shrinking */
  min-width: 0; /* Important for flex-shrink to work properly with wrapping content */
}
body.menu-layout-horizontal .mobile-header .horizontal-header-controls {
  flex-shrink: 0;
}

.horizontal-menu-item {
  max-width: 100%; 
}

.horizontal-submenu {
  box-sizing: border-box; 
}

body.hydra-admin .global-header-controls {
  position: fixed !important;
  /* Default top position - will be overridden */
  top: 8px !important; /* Default for layouts where mobile-header is hidden on desktop */
  left: 8px !important; /* Offset from the left edge */
  width: auto !important; /* Let content determine width */
  height: auto !important; /* Let content determine height */
  z-index: 1200 !important; /* High z-index to be on top */
  display: flex !important; /* Use flex for internal alignment of buttons */
  gap: 12px !important;
  background-color: #888888e5 !important;
  padding: 8px !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  border: none !important;
}

/* Conditional top positioning for .global-header-controls based on menu layout */

/* For Sidebar Layout: Position near top of viewport as mobile-header is hidden on desktop */
body.hydra-admin.menu-layout-sidebar .global-header-controls {
  top: 8px !important;
}
/* On mobile for Sidebar Layout, if mobile-header appears, position below it */
@media (max-width: 768px) {
  body.hydra-admin.menu-layout-sidebar .global-header-controls {
    top: calc(var(--mobile-header-height, 60px) + 8px) !important;
  }
}

/* For Top/Hidden Layout: Position near top of viewport as mobile-header is hidden on desktop */
body.hydra-admin.menu-layout-top .global-header-controls {
  top: 8px !important;
}
/* On mobile for Top/Hidden Layout, if mobile-header appears, position below it */
@media (max-width: 768px) {
  body.hydra-admin.menu-layout-top .global-header-controls {
    top: calc(var(--mobile-header-height, 60px) + 8px) !important;
  }
}

/* For Horizontal Layout: Always position below the mobile-header (horizontal bar) */
body.hydra-admin.menu-layout-horizontal .global-header-controls {
  top: calc(var(--mobile-header-height, 60px) + 8px) !important;
}


/* Ensure buttons inside are styled correctly and visible */
body.hydra-admin .global-header-controls #editButton,
body.hydra-admin .global-header-controls #logoutButton {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  gap: 12px !important;
  background-color: transparent !important; /* Buttons are transparent */
  padding: 0 !important; /* Remove padding from button, SVG size controls it */
  border: none !important;
  cursor: pointer;
  width: 16px !important;
  height: 16px !important;
  align-items: center;
  justify-content: center;
}

body.hydra-admin .global-header-controls #editButton svg,
body.hydra-admin .global-header-controls #logoutButton svg {
  stroke: #000 !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

body.hydra-admin .global-header-controls #editButton:hover,
body.hydra-admin .global-header-controls #logoutButton:hover {
  background-color: rgba(0,0,0,0.1) !important; /* Subtle hover for the button area */
}

body.hydra-admin .global-header-controls #editButton:hover svg,
body.hydra-admin .global-header-controls #logoutButton:hover svg {
  stroke: #000 !important; /* Stroke remains black on hover */
}


/*
  Main .container styling:
  Ensure its top position is ONLY dictated by the .mobile-header's height (when mobile header is visible).
*/
body > .container {
  display: flex !important;
  flex-direction: row !important;
  height: 100vh !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  /* padding-top will be dynamically adjusted by layout-specific rules below */
  /* border: 2px solid limegreen !important; */ /* DIAGNOSTIC BORDER for .container */
}

/*
  .mobile-header styling:
  - Fixed at the top.
  - Z-index to be above content but below global-header-controls.
  - Visibility is handled by layout-specific rules and media queries.
*/
.mobile-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--mobile-header-height, 60px) !important;
  background-color: var(--menu-background-color, #fafafa) !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  display: flex !important; /* Base display, will be overridden by layout/media queries */
  align-items: center !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  /* border: 2px dashed blue !important; */ /* DIAGNOSTIC BORDER for .mobile-header */
}

/* === Layout-Specific Visibility for .mobile-header and .container padding === */

/* 1. Sidebar Layout (menu-layout-sidebar) */
body.menu-layout-sidebar .mobile-header {
  display: none !important; /* Hide mobile header on desktop by default */
}
body.menu-layout-sidebar .container {
  padding-top: 0 !important; /* No top padding needed if mobile header is hidden */
}
@media (max-width: 768px) {
  body.menu-layout-sidebar .mobile-header {
    display: flex !important; /* Show mobile header on small screens */
  }
  body.menu-layout-sidebar .container {
    padding-top: var(--mobile-header-height, 60px) !important; /* Add padding for mobile header */
  }
}

/* 2. Top/Hidden Layout (menu-layout-top) */
body.menu-layout-top .mobile-header {
  display: none !important; /* Hide mobile header on desktop by default */
}
body.menu-layout-top .container {
  padding-top: 0 !important; /* No top padding needed */
}
@media (max-width: 768px) {
  body.menu-layout-top .mobile-header {
    display: flex !important; /* Show mobile header on small screens */
  }
  body.menu-layout-top .container {
    padding-top: var(--mobile-header-height, 60px) !important; /* Add padding for mobile header */
  }
}

/* 3. Horizontal Layout (menu-layout-horizontal) */
body.menu-layout-horizontal .mobile-header {
  display: flex !important; /* Always show mobile header as it's the main nav bar */
}
body.menu-layout-horizontal .container {
  padding-top: var(--mobile-header-height, 60px) !important; /* Always pad for the horizontal bar */
}

/* Hamburger button visibility */
.hamburger-btn {
  display: none !important; /* Hidden by default on desktop */
  /* Other hamburger styles remain the same */
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto; /* Push to right if in flex container */
  z-index: 1001;
}

/* Show hamburger only on mobile for Sidebar and Top layouts */
@media (max-width: 768px) {
  body.menu-layout-sidebar .hamburger-btn,
  body.menu-layout-top .hamburger-btn {
    display: flex !important;
  }
}

/* For Horizontal layout, hamburger is only shown if edit mode is active AND on mobile */
body.menu-layout-horizontal .hamburger-btn {
    display: none !important; /* Hidden by default for horizontal desktop */
}
@media (max-width: 768px) {
    body.menu-layout-horizontal .hamburger-btn { /* Show on mobile for horizontal */
        display: flex !important;
    }
    body.menu-layout-horizontal.edit-mode-active .hamburger-btn { /* Also show if edit mode + mobile */
        display: flex !important;
    }
}


/* Sidebar .edit-controls positioning */
.sidebar .edit-controls {
  position: sticky !important;
  top: 0 !important; /* Stick to the top of the sidebar scrolling container */
  background-color: var(--menu-background-color, #f0f0f0) !important;
  z-index: 25 !important; /* Ensure it's above sidebar content */
  padding: 10px; /* Keep existing padding */
  gap: 10px; /* Keep existing gap */
  display: flex; /* Ensure it's flex for button alignment */
  flex-wrap: nowrap;
  justify-content: flex-end; /* Align buttons to the right */
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  /* Initially hidden, JS will show if in edit mode and admin */
  /* display: none; This is handled by body.edit-mode-active .edit-controls */
}
/* ==========================================================================
   Horizontal Edit Mode - Sidebar Push Content Override
   ========================================================================== */

/*
  When the body has 'menu-layout-horizontal' and 'edit-mode-active' classes:
  The .sidebar (which contains edit controls) should push the .gallery-container.
  The .container div is the flex parent for both .sidebar and .gallery-container.
  The .mobile-header is position:fixed, and .container has padding-top to account for it.
*/

/* Override sidebar positioning and dimensions for horizontal edit mode */
body.menu-layout-horizontal.edit-mode-active .sidebar {
  /* Core change: Make sidebar part of the flex flow instead of fixed */
  position: relative !important; /* Overrides 'position: fixed' from JS/CSS */
  
  /* Dimensions and Flex behavior */
  width: var(--sidebar-edit-width, 26vw) !important; /* Maintain defined edit mode width */
  min-width: 300px !important; /* Consistent minimum width */
  max-width: 26vw !important;
  height: 100% !important; /* Occupy full height of the .container's content area */
  flex-shrink: 0 !important; /* Prevent the sidebar from shrinking */
  
  /* Visuals and Scrolling */
  background-color: var(--menu-background-color, #f0f0f0) !important; /* Ensure background is consistent */
  box-shadow: 2px 0 5px rgba(0,0,0,0.1) !important; /* Maintain shadow for separation */
  overflow-y: auto !important; /* Allow internal scrolling if content exceeds height */
  z-index: 10 !important; /* Adjust z-index as it's now in normal flow */

  /* Reset inline styles that were intended for 'position: fixed' */
  top: auto !important;
  left: auto !important;
  bottom: auto !important;

  /* Ensure padding and box-sizing are correctly applied */
  padding-top: var(--sidebar-padding-top, 0px) !important;
  padding-right: var(--sidebar-padding-right, 0px) !important;
  padding-bottom: var(--sidebar-padding-bottom, 0px) !important;
  padding-left: var(--sidebar-padding-left, 0px) !important;
  box-sizing: border-box !important;
}

/* Ensure the gallery container (main content) correctly fills the remaining space */
body.menu-layout-horizontal.edit-mode-active .gallery-container {
  flex-grow: 1 !important; /* Allows it to take up remaining horizontal space */
  height: 100% !important; /* Occupy full height of the .container's content area */
  margin-left: 0 !important; /* Crucial: Remove any left margin set by JS for other modes */
  overflow-y: auto !important; /* Allow internal scrolling */
}

/*
  The .container element should already be display:flex and have padding-top
  to account for the .mobile-header. These rules ensure that when the .sidebar's
  position is no longer fixed, it correctly participates in this flex layout.
*/

/* ==========================================================================
   Horizontal Menu Enhancements
   ========================================================================== */

/* Allow mobile header to adjust height if menu items wrap */
body.menu-layout-horizontal .mobile-header {
  height: auto !important; /* Allow height to grow based on content */
  min-height: var(--mobile-header-height, 60px) !important; /* Maintain minimum height */
  /* MODIFICATION: Ensure vertical alignment starts at the top if content wraps */
  align-items: flex-start !important; 
  padding-top: 5px !important; /* Add some top padding */
  padding-bottom: 5px !important; /* Add some bottom padding for wrapped items */
}

/* Modify mobile-header-content to allow dropdowns to overflow */
body.menu-layout-horizontal .mobile-header-content {
  overflow: visible !important; /* CRITICAL for dropdown visibility */
  /* MODIFICATION: Align items to the start of the cross axis (top) */
  align-items: flex-start !important; 
  width: 100%; /* Ensure it takes full width to allow wrapping within */
}

/* Horizontal menu container: Allow wrapping and ensure visibility */
body.menu-layout-horizontal .horizontal-menu-container {
  flex-wrap: wrap !important; /* Allow items to wrap to the next line */
  overflow: visible !important; /* Changed from overflow-x and overflow-y to just overflow */
  white-space: normal !important; /* Allow normal white space handling for wrapped items */
  justify-content: flex-start !important; /* Align items to the start when wrapping */
  /* MODIFICATION: Remove bottom padding, spacing will be handled by item margins */
  padding-bottom: 0 !important; 
  align-items: center !important; /* Vertically align items within a line */
  width: 100%; /* Ensure it can use the full width of mobile-header-content */
}

/* Horizontal menu item: Add bottom margin for wrapped items */
body.menu-layout-horizontal .horizontal-menu-item {
  /* MODIFICATION: Reduce bottom margin for tighter vertical spacing */
  margin-bottom: 2px !important; 
  margin-top: 2px !important; /* Add a little top margin for symmetry */
  position: relative !important; /* Needed for absolute positioning of dropdowns */
  line-height: calc(var(--menu-font-size, 16px) + 8px) !important; /* Adjust line height for items */
  height: auto !important; /* Allow item height to adjust to content */
}

/* Styling for the SVG toggle icon in horizontal menu */
body.menu-layout-horizontal .horizontal-menu-item .icon.toggle-icon {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important; /* Inherit color from parent */
  fill: none !important;
  stroke-width: 2px !important;
  margin-left: 6px !important;
  transition: transform 0.2s ease-in-out !important;
  vertical-align: middle; /* Align with text */
}

body.menu-layout-horizontal .horizontal-menu-item.expanded .icon.toggle-icon {
  transform: rotate(90deg) !important; /* Correct rotation for polyline arrow */
}

/* Remove old ::after arrow */
body.menu-layout-horizontal .horizontal-menu-item.has-children::after {
  content: none !important;
}

/* Dropdown list (submenu) positioning and appearance */
.horizontal-dropdown { /* Ensure this class is used for the dropdown container */
  display: none; /* Handled by JS/ .expanded class */
  position: absolute !important;
  top: 100% !important; /* Position below the parent item */
  left: 0 !important;
  min-width: 200px !important; /* Ensure dropdown has a decent width */
  background-color: var(--menu-background-color, #fafafa) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; /* More pronounced shadow */
  border: 1px solid rgba(0,0,0,0.1) !important; /* Subtle border */
  z-index: 1250 !important; /* Higher than .global-header-controls (1200) */
  padding: 0.5rem 0 !important;
  margin-top: 0px !important; /* Was 2px, now 0px */
  border-radius: 0px !important; /* Consistent with other elements */
  opacity: 0;
  transform: translateY(5px); /* Start slightly lower for entry animation */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
  visibility: hidden;
}

.horizontal-menu-item.expanded > .horizontal-dropdown {
  display: block !important; /* Or flex if needed */
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

/* MODIFICATION: Remove hover background from top-level horizontal menu items */
body.menu-layout-horizontal .horizontal-menu-item:hover {
  color: var(--menu-hover-color, #007bff); /* Keep text color change */
  background-color: transparent !important; /* Remove background color on hover */
  opacity: 1;
}

/* MODIFICATION: Keep hover background for dropdown items */
.horizontal-dropdown-list li:hover,
.horizontal-submenu-item:hover { /* Support both class names if used interchangeably */
  background-color: rgba(0,0,0,0.05) !important; /* Keep background color for dropdown items */
  color: var(--menu-hover-color, #007bff) !important;
}


/* Ensure dropdown items are styled correctly */
.horizontal-dropdown-list li,
.horizontal-submenu-item { /* Support both class names if used interchangeably */
  padding: 0.75rem 1.25rem !important; /* More padding */
  font-size: calc(var(--menu-font-size, 16px) * 0.92) !important; /* Slightly adjust size */
  white-space: normal !important; /* Allow text in dropdown to wrap */
  /* Ensure other styles like color and font-family are inherited or set */
  color: var(--menu-color, #333);
  font-family: var(--menu-font-family, Arial, sans-serif);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.horizontal-dropdown-list li.active,
.horizontal-submenu-item.active {
  color: var(--menu-active-color, #0056b3);
  background-color: rgba(0,0,0,0.03); 
  font-weight: bold;
}


/* === Global Header Controls (Edit/Logout Buttons) === */

/* Parent container - this should already have 'display: flex' and 'gap' */
body.hydra-admin .global-header-controls {
  position: fixed !important;
  top: 8px !important; 
  left: 8px !important; 
  width: auto !important; 
  height: auto !important; 
  z-index: 1200 !important; 
  display: flex !important; 
  gap: 8px !important; /* This creates the space BETWEEN the button blocks */
  background-color: rgba(0,0,0,0) !important; 
  padding: 6px !important; 
  border: none !important;
}

/* Individual Edit/Logout button styling - THIS IS THE KEY PART FOR VISUAL SEPARATION */
body.hydra-admin .global-header-controls #editButton,
body.hydra-admin .global-header-controls #logoutButton {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  
  /* Give buttons their own distinct background */
  background-color: rgba(0, 0, 0, 0.1) !important; 
  
  /* Add padding to make the button area larger than just the icon */
  padding: 6px !important; 
  
  
  cursor: pointer;
  width: auto !important; /* Allow width to be set by content + padding */
  height: auto !important; /* Allow height to be set by content + padding */
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  
  /* Remove any margin on the buttons themselves, rely on parent's 'gap' */
  margin: 0 !important; 
}

/* Styling for the SVG icons within the buttons */
body.hydra-admin .global-header-controls #editButton svg,
body.hydra-admin .global-header-controls #logoutButton svg {
  stroke: #ffffff !important; /* White stroke for contrast */
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* Hover state for the buttons */
body.hydra-admin .global-header-controls #editButton:hover,
body.hydra-admin .global-header-controls #logoutButton:hover {
  background-color: rgba(0, 0, 0, 0.2) !important; /* Darker background on hover */
}

/* Conditional top positioning for .global-header-controls based on menu layout */
body.hydra-admin.menu-layout-sidebar .global-header-controls {
  top: 8px !important;
}
@media (max-width: 768px) {
  body.hydra-admin.menu-layout-sidebar .global-header-controls {
    top: calc(var(--mobile-header-height, 60px) + 8px) !important;
  }
}
body.hydra-admin.menu-layout-top .global-header-controls {
  top: 8px !important;
}
@media (max-width: 768px) {
  body.hydra-admin.menu-layout-top .global-header-controls {
    top: calc(var(--mobile-header-height, 60px) + 8px) !important;
  }
}
body.hydra-admin.menu-layout-horizontal .global-header-controls {
  top: calc(var(--mobile-header-height, 60px) + 8px) !important;
}

/* ==========================================================================
   Horizontal Menu Enhancements & Mobile View Adjustments
   ========================================================================== */

/* MODIFICATION: For horizontal layout, ensure .mobile-header centers its content vertically */
body.menu-layout-horizontal .mobile-header {
  height: auto !important; 
  min-height: var(--mobile-header-height, 60px) !important; 
  align-items: center !important; /* Changed from flex-start to center */
  padding-top: 5px !important; 
  padding-bottom: 5px !important; 
}

/* MODIFICATION: For horizontal layout, ensure .mobile-header-content also centers its content vertically */
body.menu-layout-horizontal .mobile-header-content {
  overflow: visible !important; 
  align-items: center !important; /* Changed from flex-start to center */
  width: 100%; 
}

/* Horizontal menu container: Allow wrapping and ensure visibility */
body.menu-layout-horizontal .horizontal-menu-container {
  flex-wrap: wrap !important; 
  overflow: visible !important; 
  white-space: normal !important; 
  justify-content: flex-start !important; 
  padding-bottom: 0 !important; 
  align-items: center !important; /* This centers lines of items within this container */
  width: 100%; 
}

/* Horizontal menu item: Add bottom margin for wrapped items */
body.menu-layout-horizontal .horizontal-menu-item {
  margin-bottom: 2px !important; 
  margin-top: 2px !important; 
  position: relative !important; 
  line-height: calc(var(--menu-font-size, 16px) + 8px) !important; 
  height: auto !important; 
  display: inline-flex !important; 
  align-items: center !important; 
}

/* Styling for the SVG toggle icon in horizontal menu */
body.menu-layout-horizontal .horizontal-menu-item .icon.toggle-icon {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important; 
  fill: none !important;
  stroke-width: 2px !important;
  margin-left: 6px !important;
  transition: transform 0.2s ease-in-out !important;
  vertical-align: middle; 
}

body.menu-layout-horizontal .horizontal-menu-item.expanded .icon.toggle-icon {
  transform: rotate(90deg) !important; 
}

body.menu-layout-horizontal .horizontal-menu-item.has-children::after {
  content: none !important;
}

.horizontal-dropdown { 
  display: none; 
  position: absolute !important;
  top: 100% !important; 
  left: 0 !important;
  min-width: 200px !important; 
  background-color: var(--menu-background-color, #fafafa) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; 
  border: 1px solid rgba(0,0,0,0.1) !important; 
  z-index: 1250 !important; 
  padding: 0.5rem 0 !important;
  margin-top: 0px !important; 
  border-radius: 0px !important; 
  opacity: 0;
  transform: translateY(5px); 
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
  visibility: hidden;
}

.horizontal-menu-item.expanded > .horizontal-dropdown {
  display: block !important; 
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

body.menu-layout-horizontal .horizontal-menu-item:hover {
  color: var(--menu-hover-color, #007bff); 
  background-color: transparent !important; 
  opacity: 1;
}

.horizontal-dropdown-list li:hover,
.horizontal-submenu-item:hover { 
  background-color: rgba(0,0,0,0.05) !important; 
  color: var(--menu-hover-color, #007bff) !important;
}

.horizontal-dropdown-list li,
.horizontal-submenu-item { 
  padding: 0.75rem 1.25rem !important; 
  font-size: calc(var(--menu-font-size, 16px) * 0.92) !important; 
  white-space: normal !important; 
  color: var(--menu-color, #333);
  font-family: var(--menu-font-family, Arial, sans-serif);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.horizontal-dropdown-list li.active,
.horizontal-submenu-item.active {
  color: var(--menu-active-color, #0056b3);
  background-color: rgba(0,0,0,0.03); 
  font-weight: bold;
}


/* --- Mobile View Specific Adjustments --- */
@media (max-width: 768px) {
  /* General Mobile Header Styling */
  .mobile-header {
    display: flex !important;
    align-items: center !important; 
    position: relative !important; 
    width: 100% !important; 
  }

  .mobile-header-content { 
    flex-grow: 1 !important; 
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important; 
    text-align: center !important; 
    height: 100%;
    padding: 0 45px !important; 
    box-sizing: border-box;
  }

  .hamburger-btn {
    display: flex !important; 
    position: absolute !important;
    right: 10px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important; 
    z-index: 1001 !important; 
  }

  /* Sidebar and Top/Hidden Layouts: Center the .mobile-header-content block */
  body.menu-layout-sidebar .mobile-header,
  body.menu-layout-top .mobile-header {
    justify-content: center !important; 
  }
  
  body.menu-layout-sidebar .mobile-header-content .horizontal-header-logo,
  body.menu-layout-sidebar .mobile-header-content .horizontal-menu-container,
  body.menu-layout-top .mobile-header-content .horizontal-header-logo,
  body.menu-layout-top .mobile-header-content .horizontal-menu-container {
    display: none !important;
  }

  /* Horizontal Layout on Mobile: Center the logo/title */
  body.menu-layout-horizontal .mobile-header {
    justify-content: center !important; 
  }

  body.menu-layout-horizontal .horizontal-menu-container,
  body.menu-layout-horizontal .horizontal-header-logo {
    display: none !important; 
  }
}

/* Hamburger Button Visibility Rules (General) */
.hamburger-btn {
  display: none !important; 
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1001; 
}

@media (max-width: 768px) {
  .hamburger-btn {
    display: flex !important; 
    position: absolute !important; 
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

body.menu-layout-horizontal.edit-mode-active .hamburger-btn {
  display: none !important;
}

/* ==========================================================================
   Tooltip Styling Adjustments
   ========================================================================== */

/* Base tooltip element */
.tooltip {
  position: absolute; /* Will be positioned by JS relative to #tooltip-container */
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 12px;
  border-radius: 3px; /* Slightly rounded corners for a softer look */
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out; /* Only transition opacity */
  opacity: 0;
  pointer-events: none; /* Should be on #tooltip-container, but also safe here */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10000; /* Ensure it's above most other elements */
}

/* MODIFICATION: Remove the tooltip arrow */
.tooltip::after,
.tooltip.tooltip-bottom::after {
  content: none !important; /* Removes the pseudo-element that creates the arrow */
  display: none !important;
}

/* Container for all tooltips - ensures they are in the correct stacking context */
#tooltip-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 0; /* Takes no space itself */
  height: 0; /* Takes no space itself */
  pointer-events: none; /* Allows clicks to pass through to elements below */
  z-index: 999999; /* Extremely high z-index */
}


/*
  MOBILE HEADER AND RESPONSIVE LAYOUT CORRECTIONS
  (Focus on ensuring correct behavior for all menu layouts on mobile)
*/
@media (max-width: 768px) {

  /* Ensure body takes full width and doesn't have unexpected horizontal scroll */
  body {
    width: 100%;
    overflow-x: hidden !important; /* Prevent horizontal scroll */
  }

  /*
    MOBILE HEADER:
    - Fixed to the top of the viewport.
    - Spans the full width of the viewport.
    - Contains the centered logo/title and the hamburger menu on the right.
  */
  .mobile-header {
    display: flex !important; /* Use flex for internal alignment */
    align-items: center !important; /* Vertically center items in header */
    justify-content: space-between !important; /* Pushes logo area and hamburger to ends */
    
    position: fixed !important; /* CRITICAL: Fixed to viewport */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important; /* Ensures full width with left: 0 */
    width: 100% !important; /* Full viewport width */
    height: var(--mobile-header-height, 60px) !important; /* Use CSS variable */
    
    background-color: var(--menu-background-color, #fafafa) !important;
    z-index: 1000 !important; /* High z-index to be on top */
    padding: 0 15px !important; /* Standard padding */
    box-sizing: border-box !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Consistent shadow */
  }

  /*
    MOBILE HEADER CONTENT (Logo/Title Area):
    - Occupies the space between the (optional) left-aligned element and the hamburger.
    - Centers its actual content (the logo image or text).
  */
  .mobile-header-content {
    flex-grow: 1; /* Allows it to take available space */
    display: flex;
    justify-content: center; /* Horizontally center the logo/title within this flex item */
    align-items: center; /* Vertically center the logo/title */
    height: 100%;
    overflow: hidden; /* Prevent content from breaking layout */
    /* Remove padding here if the child elements handle their own spacing or if text-align: center is used */
  }

  /* Styling for the actual logo/title elements within .mobile-header-content */
  .mobile-header-text,
  .mobile-header-image,
  .mobile-header-menu-title,
  .mobile-header-title {
    margin: 0; /* Reset margin if flex centering is used on parent */
    text-align: center; /* Ensure text is centered if it's a block */
    max-width: 100%; /* Prevent overflow */
    /* Specific styling for image if needed */
  }
  .mobile-header-image {
    max-height: calc(var(--mobile-header-height, 60px) - 20px); /* Example max height */
    display: block; /* Helps with margin auto if not flex centered by parent */
  }


  /* HAMBURGER BUTTON: Ensure it doesn't shrink and stays on the right */
  .hamburger-btn {
    flex-shrink: 0;
    /* Other existing hamburger styles are generally fine */
  }

  /*
    MAIN CONTAINER (.container):
    - Stacks content vertically on mobile.
    - Has padding at the top to avoid being obscured by the fixed .mobile-header.
    - Takes full viewport width.
  */
  .container {
    display: block !important; /* Simplest way to ensure children stack and take full width */
    width: 100% !important;
    padding-top: var(--mobile-header-height, 60px) !important;
    height: calc(100vh - var(--mobile-header-height, 60px)) !important; /* Full remaining viewport height */
    overflow-y: auto; /* Allow vertical scrolling for content within .container */
    box-sizing: border-box !important;
    margin-left: 0 !important; /* Reset any desktop margins */
  }

  /*
    SIDEBAR (for slide-out menu on mobile):
    - Positioned fixed, typically off-screen and slides in.
    - Positioned below the mobile header.
  */
  .sidebar {
    position: fixed !important;
    top: var(--mobile-header-height, 60px) !important;
    right: -300px; /* Example: Off-screen to the right */
    width: 300px;  /* Example: Fixed width for mobile menu */
    height: calc(100vh - var(--mobile-header-height, 60px)) !important;
    background-color: var(--menu-background-color, #fafafa);
    z-index: 999; /* Below header, above backdrop */
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    /* Padding should be handled by --sidebar-padding variables if needed */
    padding-top: var(--sidebar-padding-top, 0px);
    padding-right: var(--sidebar-padding-right, 0px);
    padding-bottom: var(--sidebar-padding-bottom, 0px);
    padding-left: var(--sidebar-padding-left, 0px);
    box-sizing: border-box;
  }

  .sidebar.mobile-open {
    right: 0; /* Slides into view */
  }

  /*
    GALLERY CONTAINER (Main Content Area):
    - Takes full width of its parent (.container).
    - Takes full available height within the scrollable .container.
  */
  .gallery-container {
    width: 100% !important;
    height: 100% !important; /* Fill the scrollable area of .container */
    margin-top: 0 !important; /* Reset margin if .container has padding-top */
    box-sizing: border-box !important;
    overflow-y: auto; /* Allow gallery content to scroll if it's taller than the container */
  }

  /*
    Hide elements specific to desktop horizontal layout when on mobile
    and in sidebar or top layout mode.
  */
  body.menu-layout-sidebar .mobile-header-content .horizontal-header-logo,
  body.menu-layout-sidebar .mobile-header-content .horizontal-menu-container,
  body.menu-layout-top .mobile-header-content .horizontal-header-logo,
  body.menu-layout-top .mobile-header-content .horizontal-menu-container {
      display: none !important;
  }
  

  body.menu-layout-horizontal .mobile-header-content .horizontal-menu-container {
      display: none !important; /* Hide desktop horizontal menu items */
  }
  body.menu-layout-horizontal .mobile-header-content .horizontal-header-logo {

      display: flex !important;
      justify-content: center;
      flex-grow: 1; /* Allow it to center if it's the main content of .mobile-header-content */
  }
}

/* Styles for when the menu should be hidden on a specific page (VIEW MODE) */
body.menu-hidden-on-page:not(.edit-mode-active) .sidebar {
  display: none !important;
}

body.menu-hidden-on-page:not(.edit-mode-active) .mobile-header {
  display: none !important;
}

body.menu-hidden-on-page:not(.edit-mode-active) .gallery-container {
  margin-left: 0 !important; /* Reset any margin from sidebar */
  padding-top: 0 !important; /* Reset any padding from mobile-header */
  width: 100vw !important;   /* Take full viewport width */
  height: 100vh !important;  /* Take full viewport height */
  max-width: 100vw !important; /* Ensure it doesn't exceed viewport */
  flex-grow: 1 !important; /* Ensure it takes all space if it's in a flex container like .container */
}



/* Ensure Pico styles don't interfere with the checkbox label layout */
.edit-form .form-group label[style*="display: flex"] {
  display: flex !important; /* Override Pico if it changes display */
  align-items: center !important;
  gap: 8px !important;
}

.edit-form .form-group label[style*="display: flex"] input[type="checkbox"] {
  width: auto !important; /* Override Pico if it sets width to 100% */
  margin-bottom: 0 !important; /* Override Pico if it adds margin */
}

@media (max-width: 768px) {
  /* On mobile, sidebar should always be available for navigation */
  body.menu-layout-horizontal .sidebar {
      display: block !important;
      /* FIXED: Position it off-screen on the RIGHT initially */
      transform: translateX(100%) !important;
      transition: transform 0.3s ease !important;
      position: fixed !important;
      top: 0 !important;
      right: 0 !important; /* CHANGED: from left to right */
      left: unset !important; /* ADDED: ensure left is not set */
      width: 280px !important;
      height: 100vh !important;
      z-index: 1000 !important;
      background: var(--sidebar-background-color, #ffffff) !important;
      box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important; /* CHANGED: negative shadow for right side */
  }
  
  /* When mobile menu is open, slide in the sidebar from the right */
  body.menu-layout-horizontal .sidebar.mobile-open {
      transform: translateX(0) !important;
  }
  
  /* Ensure sidebar content is visible on mobile */
  body.menu-layout-horizontal .sidebar .tree-container,
  body.menu-layout-horizontal .sidebar .sidebar-elements-container {
      display: block !important;
  }
  
  /* Mobile backdrop for horizontal layout */
  body.menu-layout-horizontal .mobile-backdrop {
      display: block !important;
  }
  
  body.menu-layout-horizontal .mobile-backdrop.mobile-open {
      display: block !important;
      opacity: 1 !important;
  }

  body.menu-layout-horizontal .mobile-header-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 60px 0 20px !important; /* Leave space for hamburger button on right */
}

body.menu-layout-horizontal .mobile-header-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* CRITICAL: Completely remove horizontal containers from layout flow */
body.menu-layout-horizontal .horizontal-header-logo,
body.menu-layout-horizontal .horizontal-menu-container {
  display: none !important;
  position: absolute !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Center the mobile logo image with flexbox */
body.menu-layout-horizontal .mobile-header-image {
  display: block !important;
  flex: none !important;
  margin: 0 !important;
  max-height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Center the mobile logo text with flexbox */
body.menu-layout-horizontal .mobile-header-text,
body.menu-layout-horizontal .mobile-header-title,
body.menu-layout-horizontal .mobile-header-menu-title {
  display: block !important;
  flex: none !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Ensure hamburger button stays positioned correctly */
body.menu-layout-horizontal .hamburger-btn {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1001 !important;
  display: block !important;
}

/* Override any conflicting margin rules */
body.menu-layout-horizontal .mobile-header-text, 
body.menu-layout-horizontal .mobile-header-image, 
body.menu-layout-horizontal .mobile-header-menu-title, 
body.menu-layout-horizontal .mobile-header-title {
  margin: 0 !important;
}
}


.mobile-header .mobile-header-content .mobile-header-text h1 {
  margin-top: 0;    /* Remove default top margin */
  margin-bottom: 0; /* Remove default bottom margin */
  padding-top: 0;   /* Remove any default top padding */
  padding-bottom: 0;/* Remove any default bottom padding */
  
}


.mobile-header .mobile-header-content .mobile-header-text h1 span {
  display: inline-block;
  vertical-align: baseline;
}


/*
  CSS for the .horizontal-header-logo container.
  This makes it a flex container that will vertically center its direct children.
*/
.horizontal-header-logo {
  display: flex !important; /* Use flexbox for alignment */
  align-items: center !important; /* Vertically center children */
  justify-content: flex-start; /* Or 'center' if you want the logo itself centered in its allocated space */
  height: 100%; /* Take full height of its parent (e.g., the mobile-header) */
  padding: 0 10px; /* Add some horizontal padding if desired */
  margin: 0; /* Reset any default margins on the container itself */
  /* background-color: rgba(255, 0, 0, 0.1); /* Optional: for debugging layout */
}

/*
  CSS to reset vertical margins on common block-level elements
  when they are direct children of .horizontal-header-logo.
  This allows the parent's flex 'align-items: center' to work correctly.
*/
.horizontal-header-logo > h1,
.horizontal-header-logo > h2,
.horizontal-header-logo > h3,
.horizontal-header-logo > h4,
.horizontal-header-logo > h5,
.horizontal-header-logo > h6,
.horizontal-header-logo > p,
.horizontal-header-logo > div { /* If the text content is wrapped in a div */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal; 
}