/* Modern Menu Styles - Shared across all dashboards */

/* ===== FLYOUT CONTAINERS ===== */
.flyout { 
  position: fixed; 
  background: #ffffff; 
  border: 1px solid rgba(0,0,0,0.08); 
  border-radius: 16px; 
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 25px rgba(0,0,0,0.1); 
  padding: 12px; 
  max-width: min(92vw, 360px); 
  max-height: 360px; 
  overflow: hidden; 
  z-index: 2147483002; 
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0; 
  transform: translateY(-8px) scale(0.95); 
  pointer-events: none; 
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
  isolation: isolate; 
}

.flyout.drop-left { 
  left: auto; 
  right: calc(100% + 10px); 
}

.flyout.hidden { 
  display: none; 
}

.flyout:not(.hidden) { 
  opacity: 1 !important; 
  transform: translateY(0) scale(1) !important; 
  pointer-events: auto !important; 
}

/* Force visibility for specific panels */
#adAccColsPanel:not(.hidden), 
#adAccOrderPanel:not(.hidden),
#accColsPanel:not(.hidden),
#chartColsPanel:not(.hidden),
#comboPanel:not(.hidden) { 
  opacity: 1 !important; 
  transform: translateY(0) scale(1) !important; 
  pointer-events: auto !important; 
  display: block !important; 
}

/* Global scroll lock while a menu is open */
body.menu-open { 
  overflow: hidden; 
  touch-action: none; 
}

/* ===== MENU LISTS ===== */
.menu-list { 
  display: block; 
  padding: 4px 0; 
  max-height: 320px; 
  overflow-y: auto; 
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}

.menu-list::-webkit-scrollbar { 
  display: none; 
}

.menu-list.columns-2 { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 8px 16px; 
  padding: 4px 4px; 
}

/* ===== MENU ITEMS ===== */
.menu-check { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding: 10px 12px; 
  border-radius: 12px; 
  cursor: pointer; 
  transition: all 0.2s ease; 
  margin: 2px 0;
  position: relative;
}

.menu-check:hover { 
  background: rgba(255,184,0,0.12); 
  transform: translateX(2px);
}

.menu-check input { 
  width: 16px; 
  height: 16px; 
  border-radius: 4px; 
  border: 2px solid #d1d5db; 
  background: #ffffff;
  accent-color: var(--color-primary);
  transition: all 0.2s ease;
  appearance: auto; /* ensure the native checkmark is visible */
}
.menu-check input:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.menu-check span { 
  font-weight: 500; 
  color: #374151; 
  line-height: 1.2; 
  font-size: 14px;
  flex: 1;
}

/* ===== MENU SEPARATORS ===== */
.menu-sep { 
  height: 1px; 
  background: rgba(0,0,0,0.08); 
  margin: 12px 0; 
  border-radius: 1px;
}

/* ===== MENU BUTTONS ===== */
.flyout .btn-link { 
  background: transparent; 
  border: none; 
  color: #374151; 
  padding: 12px 16px; 
  font-weight: 500; 
  cursor: pointer; 
  border-radius: 12px; 
  display: block; 
  width: 100%; 
  text-align: left; 
  font-size: 14px;
  transition: all 0.2s ease;
  margin: 2px 0;
}

.flyout .btn-link:hover { 
  color: #1f2937; 
  background: rgba(255,184,0,0.12); 
  text-decoration: none; 
  transform: translateX(2px);
}

.flyout .btn-link[aria-current="true"] { 
  background: rgba(255,184,0,.16); 
  color: #1f2937; 
}

/* ===== SCOPE BADGE SPECIFIC ===== */
.scope-flyout { 
  position: fixed; 
  background: #ffffff; 
  border: 1px solid rgba(0,0,0,0.08); 
  border-radius: 16px; 
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 25px rgba(0,0,0,0.1); 
  padding: 8px; 
  max-width: 240px; 
  min-width: 200px; 
  z-index: 2147483001; 
  opacity: 0; 
  transform: translateY(-8px) scale(0.95); 
  pointer-events: none; 
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
  mix-blend-mode: normal; 
  visibility: hidden; 
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

.scope-flyout.open { 
  opacity: 1; 
  transform: translateY(0) scale(1); 
  pointer-events: auto; 
  visibility: visible; 
}

.scope-flyout .btn-link { 
  background: transparent; 
  border: none; 
  color: #374151; 
  display: block; 
  width: 100%; 
  text-align: left; 
  padding: 12px 16px; 
  font-weight: 500; 
  border-radius: 12px; 
  font-size: 14px;
  transition: all 0.2s ease;
  position: relative;
  margin: 2px 0;
}

.scope-flyout .btn-link:hover { 
  background: rgba(255,184,0,0.12); 
  color: #1f2937; 
  transform: translateX(2px);
}

.scope-flyout .btn-link[aria-current="true"] { 
  background: linear-gradient(135deg, rgba(255,184,0,0.15), rgba(255,184,0,0.08)); 
  color: #1f2937; 
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255,184,0,0.2);
}

.scope-flyout .btn-link[aria-current="true"]:hover {
  background: linear-gradient(135deg, rgba(255,184,0,0.2), rgba(255,184,0,0.12));
  transform: translateX(2px);
}

/* ===== UTILITY CLASSES ===== */
.columns-flyout { 
  position: relative; 
  display: inline-block; 
}

/* ===== DRAG AND DROP STYLES ===== */
.menu-check[draggable="true"] {
  cursor: move !important;
  user-select: none;
  transition: all 0.2s ease;
}

.menu-check[draggable="true"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.menu-check[draggable="true"]:active {
  transform: translateY(0);
}

/* Drag preview styling */
.menu-check.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}

/* Drop zone styling */
.menu-check.drag-over {
  background: #e3f2fd !important;
  border-color: #2196f3 !important;
  transform: scale(1.02);
}

/* Ensure flyouts render with normal blending */
.flyout { 
  mix-blend-mode: normal; 
  background: #ffffff; 
}

/* Force solid backgrounds for flyouts and all their children */
.flyout, 
.flyout .menu-list, 
.flyout .btn-link, 
.flyout .menu-check { 
  background: #ffffff !important; 
}

.flyout .btn-link[aria-current="true"] { 
  background: #fff8e0 !important; 
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .flyout {
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 100px);
  }
  
  .scope-flyout {
    max-width: calc(100vw - 20px);
  }
}