/* ======================================== */
/* MENU STYLES CSS - VERSION 250814-047 */
/* ======================================== */
/* Date: 2025-08-14 at 17:27:50 */
/* Description: y */
/* ======================================== */
/* Version Log: */
/* - Version bump for deployment */
/* - y */
/* ======================================== */
/* ===================================================
   CSS VERSION TEST - Version 250814-005
   ===================================================
   This is a test indicator to confirm the latest CSS is loaded.
   If you see this comment in the browser dev tools, the new CSS is active.
   =================================================== */

/* CSS VERSION 250814-005 - TEST MARKER */
/* 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: 1200px;
  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: 4px; /* Reduced from 8px to 4px */
  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: none !important; /* Remove border in edit mode */
}

.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: none !important; /* Remove border in edit mode */
  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: none !important; /* Remove border on hover */
}

/* 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: 85vw !important; /* Force mobile menu width - override CSS variable */
    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-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: -85vw; /* Off-screen by default - using vw for responsive width */
    width: 85vw !important; /* Force mobile menu width - override CSS variable */
    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;
    width: 85vw !important; /* Force mobile menu width for sidebar layout */
  }
  
  .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: 85vw; /* Use vw for consistency with larger mobile screens */
  }
  
  /* 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: #c0c0c0;
  color: #333;
}

.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: #c0c0c0 !important;
  color: #333 !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;
  stroke: #333 !important;
}

/* Fix any conflicting button styles */
.sidebar-header button.btn,
.sidebar-header button.btn-primary {
  background-color: #c0c0c0 !important;
  border-color: #c0c0c0 !important;
  color: #333 !important;
}

/* Fix hover states */
.sidebar-header #logoutButton:hover,
.sidebar-header #editButton:hover {
  background-color: #a0a0a0 !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;
}

/* Hide element controls (except drag handle) by default, show on hover */
body.hydra-admin.edit-mode-active .sidebar.editing .element-header .element-controls .edit-btn,
body.hydra-admin.edit-mode-active .sidebar.editing .element-header .element-controls .delete-btn,
body.hydra-admin.edit-mode-active .sidebar.editing .element-header .element-controls .visibility-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  display: flex !important; /* Keep display flex but hide with opacity/visibility */
}

/* Show controls on hover */
body.hydra-admin.edit-mode-active .sidebar.editing .element-header:hover .element-controls .edit-btn,
body.hydra-admin.edit-mode-active .sidebar.editing .element-header:hover .element-controls .delete-btn,
body.hydra-admin.edit-mode-active .sidebar.editing .element-header:hover .element-controls .visibility-toggle {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep drag handle always visible */
body.hydra-admin.edit-mode-active .sidebar.editing .element-header .element-controls .drag-handle {
  opacity: 1 !important;
  visibility: visible !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;
  gap: 2px !important;
}

/* Hide gallery item controls (except drag handle) by default, show on hover */
.sidebar.editing .gallery-item-content .controls .edit-btn,
.sidebar.editing .gallery-item-content .controls .delete-btn,
.sidebar.editing .gallery-item-content .controls .visibility-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* Show controls on hover */
.sidebar.editing .gallery-item-content:hover .controls .edit-btn,
.sidebar.editing .gallery-item-content:hover .controls .delete-btn,
.sidebar.editing .gallery-item-content:hover .controls .visibility-toggle {
  opacity: 1 !important;
  visibility: visible !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: 4px; /* Reduced from 10px to 4px */
}

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

/* Style all buttons in edit controls to have consistent grey background */
.edit-controls .btn-icon.btn-primary,
.edit-controls button.btn-icon,
.edit-controls button.btn-primary,
.edit-controls .btn-icon {
  background-color: #c0c0c0 !important;
  color: #333 !important;
  border: none !important;
  border-radius: 0px !important;
  width: 36px !important;
  height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.edit-controls .btn-icon.btn-primary:hover,
.edit-controls button.btn-icon:hover,
.edit-controls button.btn-primary:hover,
.edit-controls .btn-icon:hover {
  background-color: #a0a0a0 !important;
  color: #333 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ensure all SVGs in edit-controls buttons have consistent styling */
.edit-controls .btn-icon svg,
.edit-controls button.btn-icon svg,
.edit-controls button.btn-primary svg,
.edit-controls .btn-icon.btn-primary svg {
  stroke: white !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  color: white !important;
}

/* Style the logout button in edit controls - ensure it matches other buttons exactly */
.edit-controls #logoutButton,
.edit-controls #logoutButton.btn-icon,
.edit-controls #logoutButton.btn-primary {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #888888e5 !important; /* Match other edit control buttons */
  color: #333 !important;
  border: none !important;
  border-radius: 0px !important;
  width: 36px !important;
  height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.edit-controls #logoutButton:hover,
.edit-controls #logoutButton.btn-icon:hover,
.edit-controls #logoutButton.btn-primary:hover {
  background-color: #707070e5 !important; /* Darker on hover to match other buttons */
  color: #333 !important;
  border: none !important;
  box-shadow: none !important;
}

.edit-controls #logoutButton svg,
.edit-controls #logoutButton.btn-icon svg,
.edit-controls #logoutButton.btn-primary svg {
  stroke: white !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  color: white !important;
}

/* 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;
}

/* Override sidebar width for mobile devices */
@media (max-width: 768px) {
  .sidebar {
    width: 85vw !important; /* Force mobile menu width - override CSS variable */
  }
  
  /* Specific override for sidebar layout mobile menu */
  body.menu-layout-sidebar .sidebar {
    width: 85vw !important; /* Force mobile menu width for sidebar layout */
  }
  
  /* Specific override for sidebar layout mobile menu when open */
  body.menu-layout-sidebar .sidebar.mobile-open {
    width: 85vw !important; /* Force mobile menu width for sidebar layout when open */
  }
}
@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: -85vw; /* Off-screen by default - using vw for responsive width */
    width: 85vw; /* Responsive width for mobile menu - wider than before */
    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;
    width: 85vw !important; /* Force mobile menu width for sidebar layout */
  }
  
  .gallery-container {
    width: 100%;
    margin-top: var(--mobile-header-height);
  }
}

/* For smaller screens */
@media (max-width: 480px) {
  .sidebar {
    width: 85vw !important; /* Force mobile menu width - override CSS variable */
    
    /* 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: -85vw !important; /* Hidden by default - using vw for responsive width */
  width: 85vw !important; /* Responsive width for mobile menu - wider than before */
  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;
  /* Position at very top left corner with no spacing */
  top: 0 !important; /* Flush with top of screen */
  left: 0 !important; /* Flush with left edge of screen */
  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: 0 !important; /* No gap since there's only one button now */
  background-color: transparent !important; /* Remove background since it's just one button */
  padding: 0 !important; /* No padding */
  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 at very top left corner */
body.hydra-admin.menu-layout-sidebar .global-header-controls {
  top: 0 !important;
  left: 0 !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) + 0px) !important;
    left: 0 !important;
  }
}

/* For Top/Hidden Layout: Position at very top left corner */
body.hydra-admin.menu-layout-top .global-header-controls {
  top: 0 !important;
  left: 0 !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) + 0px) !important;
    left: 0 !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) + 0px) !important;
  left: 0 !important;
}


/* Ensure buttons inside are styled correctly and visible */
body.hydra-admin .global-header-controls #editButton {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  background-color: #c0c0c0 !important; /* Match edit controls grey background */
  padding: 8px !important; /* Reduced padding to match edit controls */
  border: none !important;
  outline: none !important; /* Remove focus outline */
  cursor: pointer;
  width: 36px !important; /* Match edit controls button size */
  height: 36px !important; /* Match edit controls button size */
  align-items: center;
  justify-content: center;
  border-radius: 0px !important; /* Square corners */
  transition: background-color 0.2s ease;
  box-shadow: none !important; /* Remove any box shadow */
}

body.hydra-admin .global-header-controls #editButton:hover {
  background-color: #a0a0a0 !important; /* Match edit controls hover state */
}

body.hydra-admin .global-header-controls #editButton:focus,
body.hydra-admin .global-header-controls #editButton:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background-color: #a0a0a0 !important;
}

body.hydra-admin .global-header-controls #editButton svg {
  stroke: white !important; /* White stroke for contrast on grey background */
  width: 20px !important; /* Match edit controls smaller icon size */
  height: 20px !important; /* Match edit controls smaller icon size */
  display: block !important;
}




/*
  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;
}

/* CRITICAL FIX: Ensure dropdown shows when parent is expanded */
.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;
  max-height: 400px !important; /* Limit height for scrollability */
  overflow-y: auto !important; /* Make scrollable when too long */
  overflow-x: hidden !important; /* Hide horizontal scroll */
}

/* ADDITIONAL FIX: Ensure dropdown items are properly styled */
.horizontal-dropdown li {
  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 */
  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;
  list-style: none !important;
}

.horizontal-dropdown li:hover {
  background-color: rgba(0,0,0,0.05) !important; /* Keep background color for dropdown items */
  color: var(--menu-hover-color, #007bff) !important;
}

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

/* ==========================================================================
   Nested Dropdown Styling (Sub-sub items)
   ========================================================================== */

/* Style for submenu items that have children */
.horizontal-submenu-item.has-children {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Arrow indicator for nested items (same as top-level menu) */
.horizontal-submenu-item .submenu-arrow {
  margin-left: 8px;
  display: flex;
  align-items: center;
}

.horizontal-submenu-item .submenu-arrow .icon.toggle-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2px;
  transition: transform 0.2s ease-in-out;
  vertical-align: middle;
}

.horizontal-submenu-item.expanded .submenu-arrow .icon.toggle-icon {
  transform: rotate(90deg);
}

/* Nested dropdown container - independent flyout to the right */
.horizontal-nested-dropdown {
  display: none !important; /* Force hidden by default */
  position: fixed !important; /* Use fixed positioning for independent flyout */
  min-width: 200px;
  background-color: var(--menu-background-color, #fafafa);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.1);
  z-index: 1251 !important; /* Higher than parent dropdown */
  padding: 0.5rem 0;
  border-radius: 0px;
  opacity: 0;
  transform: translateX(5px); /* Start slightly to the right for entry animation */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  visibility: hidden;
}

/* Show nested dropdown when parent is expanded */
.horizontal-submenu-item.expanded > .horizontal-nested-dropdown,
.horizontal-nested-dropdown[style*="display: block"] {
  display: block !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

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

/* Style nested dropdown items */
.horizontal-nested-dropdown .horizontal-submenu-item {
  padding: 0.75rem 1.25rem;
  font-size: calc(var(--menu-font-size, 16px) * 0.92);
  white-space: normal;
  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;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

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

/* Off-screen positioning is now handled dynamically in JavaScript */

/* 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 li:hover {
  background-color: rgba(0,0,0,0.05) !important; /* Keep background color for dropdown items */
  color: var(--menu-hover-color, #007bff) !important;
}


/* === 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: 0 !important; /* Flush with top of screen */
  left: 0 !important; /* Flush with left edge of screen */
  width: auto !important; 
  height: auto !important; 
  z-index: 1200 !important; 
  display: flex !important; 
  gap: 0 !important; /* No gap since there's only one button now */
  background-color: transparent !important; /* Remove background since it's just one button */
  padding: 0 !important; /* No padding */
  border: none !important;
}

/* Individual Edit/Logout button styling - THIS IS THE KEY PART FOR VISUAL SEPARATION */
body.hydra-admin .global-header-controls #editButton {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  
  /* Give buttons their own distinct background */
  background-color: #c0c0c0 !important; /* Match edit controls grey background */
  
  /* Add padding to make the button area larger than just the icon */
  padding: 8px !important; /* Reduced padding to match edit controls */
  
  cursor: pointer;
  width: 36px !important; /* Match edit controls button size */
  height: 36px !important; /* Match edit controls button size */
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  border-radius: 0px !important; /* Square corners */
  outline: none !important; /* Remove focus outline */
  box-shadow: none !important; /* Remove any box shadow */
  
  /* 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 {
  stroke: white !important; /* White stroke for contrast on grey background */
  width: 20px !important; /* Match edit controls smaller icon size */
  height: 20px !important; /* Match edit controls smaller icon size */
  display: block !important;
}

/* Hover state for the buttons */
body.hydra-admin .global-header-controls #editButton:hover {
  background-color: #a0a0a0 !important; /* Match edit controls hover state */
}

body.hydra-admin .global-header-controls #editButton:focus,
body.hydra-admin .global-header-controls #editButton:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background-color: #a0a0a0 !important;
}

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

/* Dropdown styling is now handled by the unified .horizontal-dropdown li rules above */


/* --- 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: -85vw; /* Off-screen to the right - using vw for responsive width */
    width: 85vw;  /* Responsive width for mobile menu - wider than before */
    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 */
    width: 85vw !important; /* Force mobile menu width for sidebar layout */
  }

  /*
    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: 85vw !important; /* Responsive width for mobile menu - wider than before */
      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 - completely hide when menu is closed */
  body.menu-layout-horizontal .mobile-backdrop {
      display: none !important;
      pointer-events: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      position: absolute !important;
      z-index: -1 !important;
      width: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
  }
  
  body.menu-layout-horizontal .mobile-backdrop.mobile-open {
      display: block !important;
      pointer-events: auto !important;
      opacity: 1 !important;
      visibility: visible !important;
      position: fixed !important;
      z-index: 98 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: visible !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 on mobile only */
@media (max-width: 768px) {
  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;
  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; 
}

/* --- Mobile Horizontal Layout Close Button Fix --- */
@media (max-width: 768px) {
  /*
    This rule specifically targets the hamburger button ONLY on mobile screens
    when the horizontal layout is active. It overrides the desktop rule
    that hides it, ensuring the button is visible so the slide-out menu
    can be opened and closed.
  */
  body.menu-layout-horizontal .hamburger-btn {
    display: flex !important;
  }

  /*
    This ensures that when the sidebar is open, the hamburger
    button (which is now the 'X') has a high z-index so it appears
    on top of the sidebar and can be tapped to close it.
  */
  body.menu-layout-horizontal .sidebar.mobile-open + .hamburger-btn,
  body.menu-layout-horizontal .hamburger-btn.active {
    z-index: 1002 !important;
  }

  /*
    This rule positions the slide-out menu correctly below the header
    for the horizontal layout on mobile, so it doesn't cover the close button.
  */
  body.menu-layout-horizontal .sidebar {
    top: var(--mobile-header-height, 60px) !important;
    height: calc(100vh - var(--mobile-header-height, 60px)) !important;
  }
}

/* Hide social icon edit controls unless in editing mode */
.sidebar .edit-social-icon,
.sidebar .delete-social-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.sidebar.editing .edit-social-icon,
.sidebar.editing .delete-social-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Remove background from social icon items and containers unless editing */
.sidebar .social-icon-item,
.sidebar .social-icon-container {
  background: none !important;
  background-color: transparent !important;
}

.sidebar.editing .social-icon-item,
.sidebar.editing .social-icon-container {
  background: #f5f5f5 !important;
}

/* ==========================================================================
   Horizontal Menu Social Icons Styling
   ========================================================================== */

/* Horizontal social icons container */
.horizontal-social-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  margin-left: auto !important;
  padding: 0 10px !important;
  order: 999 !important; /* Ensure it appears after other elements */
}

/* Horizontal social icon links */
.horizontal-social-container .horizontal-social-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  color: var(--menu-color, #333) !important;
  text-decoration: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: color 0.2s ease !important;
}

.horizontal-social-container .horizontal-social-link:hover {
  color: var(--menu-hover-color, #4682B4) !important;
}

/* Horizontal social icon wrappers */
.horizontal-social-container .social-icon-wrapper {
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Horizontal social icon SVGs */
.horizontal-social-container svg {
  width: 20px !important;
  height: 20px !important;
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  transition: color 0.2s ease !important;
}

/* Ensure social icons don't wrap in horizontal menu */
body.menu-layout-horizontal .horizontal-social-container {
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

/* Ensure mobile header content properly handles social icons */
body.menu-layout-horizontal .mobile-header-content .horizontal-social-container {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  order: 999 !important;
}

/* Mobile adjustments for horizontal social icons */
@media (max-width: 768px) {
  .horizontal-social-container {
    gap: 5px !important;
    padding: 0 5px !important;
  }
  
  .horizontal-social-container .horizontal-social-link {
    width: 28px !important;
    height: 28px !important;
  }
  
  .horizontal-social-container .social-icon-wrapper {
    width: 28px !important;
    height: 28px !important;
  }
  
  .horizontal-social-container svg {
    width: 18px !important;
    height: 18px !important;
  }
}