ul { list-style: none; }
a { text-decoration: none; color: black;}
body {
   font-family: 'Dosis', sans-serif;
   background: #FF5722;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Menu Container */
#menu-container-left,
#menu-container-right {
  width: 300px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  overflow: visible;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Hamburger Menu */
#hamburger-menu {
  width: 30px;
  height: 25px;
  position: relative;
  margin: 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#hamburger-menu span {
  background: #fff;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  transition: all 0.3s ease;
}

#hamburger-menu span:nth-child(1) {
  top: 0;
}

#hamburger-menu span:nth-child(2) {
  top: 11px;
}

#hamburger-menu span:nth-child(3) {
  top: 22px;
}

#hamburger-menu.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 11px;
}

#hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

#hamburger-menu.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 11px;
}

/* Menu List */
.menu-list {
  list-style: none;
}

.menu-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease;
}

.menu-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Icons */
.icon-plus {
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.rotate-45 {
  transform: rotate(225deg);
}

/* Submenu */
.menu-submenu {
  max-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  transition: max-height 0.3s ease;
}

.menu-submenu li a {
  padding: 10px 40px;
  display: block;
  color: #ddd;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.menu-submenu li a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Active States */
.accordion-toggle.active + .menu-submenu {
  max-height: 500px; /* Arbitrary max height for transition */
}

.accordion-toggle.active .icon-plus {
  transform: rotate(225deg);
}

/* Fancy Animations */
.menu-link {
  position: relative;
}

.menu-link::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background: #fff;
  left: 50%;
  bottom: 10px;
  transition: width 0.3s ease, left 0.3s ease;
  z-index: 2;
}

.menu-link:hover::after {
  width: 100%;
  left: 0;
}

/* Layout styles */
.main-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
}

.menu-container {
  margin: 20px;
  flex: 0 0 300px;
}

.menu-container-left {
  order: 1;
}

.menu-container-right {
  order: 3;
}

.menu-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-title {
  padding: 20px;
}

.menu-list {
  padding: 10px;
}

.content-area {
  flex: 1;
  margin: 0;
  padding: 0;
  order: 2;
}

/* Logo styles */
.logo {
  position: fixed;
  top: 50%;
  left: max(320px, 25vw);
  transform: translateY(-50%);
  max-width: calc(100vw - max(320px, 25vw) - max(320px, 25vw));
  height: auto;
  mix-blend-mode: multiply;
  z-index: -1;
  opacity: 0.8;
}

/* Menu link styles */
.menu-link {
  padding: 15px;
  color: white;
  border-radius: 8px;
  display: block;
  margin: 10px 0;
  text-decoration: none;
}

.menu-link.featured {
  background: linear-gradient(135deg, #ff6b6b, #6b5bff);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.menu-link.featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.menu-link.email {
  background: linear-gradient(135deg, #ff6b9d, #ff4d94) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.menu-link.email:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


.menu-link.email-campaigns {
  background: linear-gradient(135deg, #ff6b9d, #ff4d94) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.menu-link.email-campaigns::before {
  content: '@';
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  font-size: 48px;
  opacity: 0.8;
  mix-blend-mode: screen;
  filter: brightness(1.5) contrast(0.8);
  z-index: 0;
  transition: all 0.3s ease;
}

.menu-link.email-campaigns#create-sm-presentations::before {
  content: '\1F5E3'; /* 🗣 speaking head emoji */
  font-size: 32px;
  right: 10px;
}

.menu-link.email-campaigns#cac-channels::before {
  content: '\1F441'; /* 👁 single eye emoji */
  font-size: 48px;
  right: 10px;
  top: 45%;
}

.menu-link.email-campaigns[href*='gamma.app']::before {
  content: '\1F4CA'; /* 📊 bar chart emoji */
}

.menu-link.email-campaigns:hover::before {
  transform: translateY(-50%) scale(1.2);
  opacity: 1;
}

.menu-link.email-campaigns:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.menu-link.content-schedule {
  background: linear-gradient(135deg, #ff6b9d, #ff4d94) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.menu-link.content-schedule::before {
  content: '';
  position: absolute;
  top: 0%;
  right: 20px;
  width: 60px;
  height: 60px;
  background: url('Logo_green_no_text.png') no-repeat center center;
  background-size: contain;
  opacity: 0.8;
  mix-blend-mode: screen;
  filter: brightness(1.5) contrast(0.8);
  z-index: 0;
  transform-origin: center center;
  transition: all 0.3s ease;
  transform: scale(2);
  animation: logo-roll-hover 6s linear infinite;
  animation-play-state: paused;
}

.menu-link.content-schedule:hover::before {
  animation-play-state: running;
}



@keyframes logo-roll-hover {
  0% {
    transform: rotate(0deg) scale(2);
  }
  100% {
    transform: rotate(360deg) scale(2);
  }
}

@keyframes logo-roll {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.menu-link.content-schedule:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.menu-link.work-schedule {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.menu-link.work-schedule::before {
  content: '';
  position: absolute;
  top: 0%;
  right: 20px;
  width: 60px;
  height: 60px;
  background: url('Logo_green_no_text.png') no-repeat center center;
  background-size: contain;
  opacity: 0.8;
  mix-blend-mode: screen;
  filter: brightness(1.5) contrast(0.8);
  z-index: 0;
  transform-origin: center center;
  transition: all 0.3s ease;
  transform: scale(2);
  animation: logo-roll-hover 6s linear infinite;
  animation-play-state: paused;
}

.menu-link.work-schedule:hover::before {
  animation-play-state: running;
}

.menu-link.work-schedule:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.menu-link.campaigns {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.menu-link.campaigns::before {
  content: '⛃';
  position: absolute;
  top: 40%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 48px;
  opacity: 0.8;
  mix-blend-mode: screen;
  filter: brightness(1.5) contrast(0.8);
  z-index: 0;
  transition: all 0.3s ease;
}

.menu-link.campaigns:hover::before {
  transform: translateY(-50%) scale(1.2);
  opacity: 1;
}

.menu-link.campaigns:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.menu-link.social-media-campaigns {
  background: linear-gradient(135deg, #ff6b9d, #ff4d94) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.menu-link.social-media-campaigns::before {
  content: '⛃';
  position: absolute;
  top: 40%;
  right: 5px;
  transform: translateY(-50%);
  font-size: 48px;
  opacity: 0.8;
  mix-blend-mode: screen;
  filter: brightness(1.5) contrast(0.8);
  z-index: 0;
  transition: all 0.3s ease;
}

.menu-link.social-media-campaigns:hover::before {
  transform: translateY(-50%) scale(1.2);
  opacity: 1;
}

.menu-link.social-media-campaigns:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.menu-link.placeholder {
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transition: none !important;
  min-height: 20px;
  pointer-events: none !important;
}

.menu-link.business-tips {
  background: transparent !important;
  color: white !important;
  box-shadow: none;
  text-shadow: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 7.5px 15px;
  margin: 5px 0;
  text-decoration: none;
  text-align: center;
}

.menu-link.business-tips::before {
  content: '💡';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 24px;
  opacity: 0;
  z-index: 0;
  transition: all 0.3s ease;
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
  color: transparent;
}

.menu-link.business-tips:hover::before {
  transform: translateY(-50%) scale(1.2);
  opacity: 0.8;
}

.menu-link.business-tips:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  text-decoration: none;
}

.menu-link.business-tips:hover::after {
  display: none;
}

.menu-link.writing-tips {
  background: transparent !important;
  color: white !important;
  box-shadow: none;
  text-shadow: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 7.5px 15px;
  margin: 5px 0;
  text-decoration: none;
  text-align: center;
}

.menu-link.writing-tips::before {
  content: '✍️';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 24px;
  opacity: 0;
  z-index: 0;
  transition: all 0.3s ease;
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
  color: transparent;
}

.menu-link.writing-tips:hover::before {
  transform: translateY(-50%) scale(1.2);
  opacity: 0.8;
}

.menu-link.writing-tips:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  text-decoration: none;
}

.menu-link.writing-tips:hover::after {
  display: none;
}

.menu-link.social-media-tips {
  background: transparent !important;
  color: white !important;
  box-shadow: none;
  text-shadow: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 7.5px 15px;
  margin: 5px 0;
  text-decoration: none;
  text-align: center;
}

.menu-link.social-media-tips::before {
  content: '📱';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 24px;
  opacity: 0;
  z-index: 0;
  transition: all 0.3s ease;
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
  color: transparent;
}

.menu-link.social-media-tips:hover::before {
  transform: translateY(-50%) scale(1.2);
  opacity: 0.8;
}

.menu-link.social-media-tips:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  text-decoration: none;
}

.menu-link.social-media-tips:hover::after {
  display: none;
}

.menu-link.green {
  background: linear-gradient(135deg, #4CAF50, #388E3C);
  transition: all 0.3s ease;
}

.menu-link.green:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.menu-link.default {
  background: transparent;
  color: white;
  transition: all 0.3s ease;
}

.menu-link.default:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.menu-link.rose-bg {
  background: linear-gradient(135deg, #ff5e62, #ff9966) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.menu-link.rose-bg:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* Section heading styles */
.section-heading {
  margin: 20px 0 10px 0;
  text-align: center;
}

.section-title {
  display: block;
  padding: 15px 20px;
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  margin: 0 10px;
}

.section-title.assets-title {
  padding: 7.5px 20px;
  background: transparent !important;
  color: black !important;
}

.section-heading:hover {
  opacity: 1;
}

/* Drag and drop styles */
.sortable li {
  cursor: move;
}

.sortable li:hover {
  /* opacity: 0.8; - removed to prevent tooltip transparency */
}

.section-heading {
  cursor: move;
}

/* Personal Notion styling - keep at end to ensure precedence */
.menu-link.notion {
  background: linear-gradient(135deg, #e8f0ff, #f0f8ff) !important;
  color: #2c3e50 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #b8d4ff !important;
  transition: all 0.3s ease;
}

.menu-link.notion:hover {
  background: linear-gradient(135deg, #dce7ff, #e8f0ff) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

/* Tooltip styles */
.tooltip-container {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: visible;
}

.tooltip {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%) translateX(-20px);
  background: #000000 !important;
  color: white;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-left: 10px;
}

/* Tooltips in right panel should appear on the left */
.menu-container-right .tooltip {
  left: auto;
  right: 100%;
  transform: translateY(-50%) translateX(20px);
  margin-left: 0;
  margin-right: 10px;
}

.tooltip::before {
  display: none; /* Removed black triangle */
}

.tooltip-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  opacity: 1;
}

.tooltip-button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.3s ease;
  opacity: 1;
}

.tooltip-button:hover {
  background: #45a049;
}

.tooltip-button.staging {
  background: #FF9800;
}

.tooltip-button.staging:hover {
  background: #F57C00;
}

.tooltip-button.develop {
  background: #4CAF50;
}

.tooltip-button.develop:hover {
  background: #45a049;
}

.tooltip-button.production {
  background: #2196F3;
}

.tooltip-button.production:hover {
  background: #1976D2;
}

.tooltip-button.spec {
  background: #ffffff;
  color: #000000;
}

.tooltip-button.spec:hover {
  background: #f0f0f0;
}

.tooltip-button.ph {
  background: #ff3d00;
  color: #ffffff;
}

.tooltip-button.ph:hover {
  background: #dd2c00;
}

.tooltip-button.admin {
  background: #ffc107;
  color: #000000;
}

.tooltip-button.admin:hover {
  background: #ff8f00;
}

.tooltip-button.development {
  background: #4CAF50;
}

.tooltip-button.development:hover {
  background: #45a049;
}

.tooltip-separator {
  width: 1px;
  background: #666666;
  margin: 0 4px;
  align-self: stretch;
  opacity: 1;
}

.tooltip-text {
  color: white;
  font-size: 14px;
  padding: 5px 0;
}

/* Nested tooltips (inside tooltip-buttons) should be smaller and allow text wrapping */
.tooltip-buttons .tooltip {
  min-width: auto;
  max-width: 200px;
  white-space: normal;
  padding: 8px;
  font-size: 12px;
  top: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(-100%) translateY(-20px);
}

.tooltip-buttons .tooltip-text {
  font-size: 12px;
  padding: 2px 0;
  line-height: 1.3;
}

/* Nested tooltips in right panel need special positioning */
.menu-container-right .tooltip-buttons .tooltip {
  top: 0% !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-100%) translateY(-20px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  white-space: normal !important;
  max-width: 200px !important;
  min-width: auto !important;
  padding: 8px !important;
  font-size: 12px !important;
}

.menu-container-right .tooltip-buttons .tooltip.show {
  transform: translateX(-50%) translateY(-100%) translateY(-10px) !important;
}

.tooltip.show {
  opacity: 1 !important;
  visibility: visible;
  transform: translateY(-50%) translateX(0px);
}

/* Right panel tooltips should show with correct transform */
.menu-container-right .tooltip.show {
  transform: translateY(-50%) translateX(0px);
}

.tooltip.show .tooltip-buttons,
.tooltip.show .tooltip-button,
.tooltip.show .tooltip-separator {
  opacity: 1 !important;
}

/* Override any inherited opacity from parent elements */
.tooltip-container .tooltip,
.tooltip-container .tooltip * {
  opacity: 1 !important;
}

.tooltip-container:hover .tooltip,
.tooltip-container:hover .tooltip * {
  opacity: 1 !important;
}

/* Override the sortable li:hover opacity for tooltip containers */
.sortable li:hover .tooltip-container,
.sortable li:hover .tooltip-container * {
  opacity: 1 !important;
}

/* Ensure tooltip containers never inherit opacity from parent li */
.tooltip-container {
  opacity: 1 !important;
}

/* n8n Galaxy Space Background */
.menu-link.n8n-galaxy {
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f1419 100%) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.menu-link.n8n-galaxy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 160px 30px, #ddd, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  opacity: 0.6;
  animation: twinkle 4s ease-in-out infinite alternate;
  z-index: -1;
}

.menu-link.n8n-galaxy::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(255,255,255,0.1) 50%, 
    transparent 70%);
  background-size: 20px 20px;
  animation: shimmer 3s linear infinite;
  z-index: -1;
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { opacity: 0.3; }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.menu-link.n8n-galaxy:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
  background: radial-gradient(ellipse at center, #2a2a4e 0%, #26215e 50%, #1f2449 100%) !important;
}

.menu-link.n8n-galaxy:hover::before {
  opacity: 1;
  animation-duration: 2s;
}