/* ===============================
   HEADER LAYOUT & GENERAL STYLES
   =============================== */

/* Remove unwanted bottom spacing */
header {
  margin-bottom: 0;
  margin: 0;
  padding: 0;
  position: relative !important;
  /* prevent overlap */
  will-change: auto !important;
  /* prevent flickering */
  transform: translateZ(0) !important;
  /* hardware acceleration */
  backface-visibility: hidden !important;
  /* prevent flicker */
}

/* Ensure header grid remains fixed height */
.header-grid {
  width: 100% !important;
  max-width: 100% !important;
}

/* ===============================
   PAGE CONTAINER & BODY FIXES
   =============================== */
html,
body {
  margin: 0;
  padding: 0;
  height: auto !important;
  min-height: 100%;
  overflow-y: scroll !important;
  /* always show vertical scroll */
}

.page-container {
  display: block !important;
  min-height: auto !important;
  margin: 0;
  padding: 0;
}

/* ===============================
   HEADER CELL ALIGNMENT
   =============================== */
.cell.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* REDUCED: 20px → 10px to save 20px total height (116px → 96px) */
  padding: 10px 20px;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  gap: 15px;
}

.cell.center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px !important;
  /* Tight spacing between nav buttons */
  position: relative;
}

.cell.right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex: 0 0 auto;
  /* prevents stretching */
}

/* ===============================
   NAVIGATION DROPDOWN GRID
   =============================== */
.nav-item.position-relative,
.nav-item {
  position: relative !important;
  /* Anchor for absolute dropdown */
  margin: 0 !important;
  /* No margin - tight spacing */
  padding: 0 !important;
  /* No padding */
  display: flex !important;
  /* Flex item in flex container */
  flex-direction: row !important;
  /* Horizontal */
  align-items: center !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Hidden dropdown container - FIXED POSITIONING - COMPLETELY REMOVED FROM DOCUMENT FLOW */
.nav-item-grid {
  display: none !important;
  position: fixed !important;
  /* FIXED - Completely removed from document flow, overlays everything */
  top: -9999px !important;
  /* Hide off-screen when not active */
  left: -9999px !important;
  /* Hide off-screen when not active */
  width: 420px !important;
  /* HARD FIXED WIDTH - NO EXPANSION */
  min-width: 420px !important;
  max-width: 420px !important;
  /* HARD MAX - prevents any expansion */
  background: #fff !important;
  padding: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  z-index: 100000 !important;
  /* Very high - floats above content */
  margin: 0 !important;
  /* NO MARGIN - prevents pushing content */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  will-change: auto !important;
  /* NO WILL-CHANGE - prevents flickering */
  transform: none !important;
  /* NO TRANSFORM - prevents flickering */
  backface-visibility: visible !important;
  /* Prevent flickering */
  transition: none !important;
  /* NO TRANSITIONS - prevents flickering */
  pointer-events: none !important;
  /* CRITICAL - Disable when hidden, don't block clicks */
  overflow: hidden !important;
  /* HARD - Prevent expansion */
  overflow-x: hidden !important;
  /* HARD - Prevent horizontal scroll */
  overflow-y: auto !important;
  /* Allow vertical scroll if needed */
  max-height: 80vh !important;
  /* Prevent vertical expansion */
  box-sizing: border-box !important;
  /* Include padding in width */
  contain: strict !important;
  /* STRICT CONTAINMENT - Isolate from document flow */
  resize: none !important;
  /* Prevent resizing */
  /* CRITICAL: Ensure it doesn't affect layout at all */
  float: none !important;
  clear: none !important;
  isolation: isolate !important;
  /* Create new stacking context */
}

/* CRITICAL OVERRIDE: Force fixed positioning - NEVER allow absolute */
.nav-item:hover .nav-item-grid,
.nav-item-grid:hover,
.nav-item-grid.active {
  position: fixed !important;
  /* ALWAYS FIXED - NEVER ABSOLUTE */
  pointer-events: auto !important;
  /* Only when visible */
}

/* Show dropdown on hover - DISABLED - JavaScript handles with FIXED positioning */
/* CRITICAL: This was causing buttons to move - completely disabled */
/* .nav-btn:not(.home-btn):hover .nav-item-grid,
.nav-item:hover .nav-item-grid {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  margin: 0 !important;
  margin-top: 0 !important;
  top: 100% !important;
  left: 0 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
} */

/* CRITICAL OVERRIDE: Force fixed positioning - NEVER allow absolute */
.nav-item:hover .nav-item-grid,
.nav-item-grid,
.nav-item-grid:hover,
.nav-btn:hover .nav-item-grid {
  position: fixed !important;
  /* ALWAYS FIXED - NEVER ABSOLUTE */
}

/* Prevent flickering on navigation buttons */
.nav-btn {
  will-change: auto !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  transition: none !important;
  /* remove transitions that cause flicker */
  margin: 0 !important;
  /* Tight spacing */
  padding: 6px 12px !important;
  /* Tighter padding for compact header */
  padding: 4px 8px !important;
  /* Inline flex for horizontal layout */
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  /* Tight gap inside button */
  white-space: nowrap !important;
  /* Don't wrap text */
  width: auto !important;
  /* Auto width */
  height: auto !important;
  /* Auto height */
  min-width: auto !important;
  min-height: auto !important;
  line-height: normal !important;
  /* Normal line height */
  text-decoration: none !important;
  color: inherit !important;
  visibility: visible !important;
  /* Ensure visibility */
  opacity: 1 !important;
  /* Ensure opacity */
}

/* Ensure nav items don't have extra spacing and don't expand - CONSOLIDATED */
.nav-item {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  /* For positioning reference */
  display: flex !important;
  /* Flex item in flex container */
  flex-direction: row !important;
  /* Horizontal */
  align-items: center !important;
  height: auto !important;
  /* Natural height - don't expand for mega menu */
  min-height: auto !important;
  max-height: none !important;
  width: auto !important;
  /* Auto width */
  overflow: visible !important;
  /* Allow mega menu to overflow */
  z-index: auto !important;
  contain: layout style paint !important;
  /* CRITICAL - Prevent layout changes from mega menu */
  flex-shrink: 0 !important;
  /* Don't shrink in flex container - FIXED POSITION */
  flex-grow: 0 !important;
  /* Don't grow in flex container - FIXED POSITION */
  flex-basis: auto !important;
  /* Natural size */
  align-self: center !important;
  /* Center align in flex container */
  visibility: visible !important;
  /* Ensure visibility */
  opacity: 1 !important;
  /* Ensure opacity */
  top: 0 !important;
  /* Don't move down */
  left: auto !important;
  /* Natural position */
  float: none !important;
  /* No float */
  clear: none !important;
  /* No clear */
}

/* Individual grid items */
.nav-item-grid .grid-item {
  text-align: center;
  font-size: 12px;
}

/* Grid images */
.nav-item-grid .grid-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 5px;
}

/* Navigator grid general visibility control - ABSOLUTE - NO DOCUMENT FLOW */
.navigator-grid {
  display: none !important;
  position: absolute !important;
  /* CRITICAL: Remove from document flow */
  z-index: 1000 !important;
  margin: 0 !important;
  /* No margin */
  margin-top: 0 !important;
  top: 100% !important;
  left: 0 !important;
}

/* Mega menu grid - also absolute */
.mega-menu-grid {
  position: relative !important;
  /* Relative to nav-item-grid */
  margin: 0 !important;
  padding: 0 !important;
}

/* ===============================
   FOOTER BEHAVIOR
   =============================== */
footer {
  margin-top: auto;
  /* keeps footer pushed down */
}

/* ===============================
   PREVENT CONTENT SHIFT FROM MEGA MENU
   =============================== */
/* Ensure mega menu dropdowns don't affect page layout - CRITICAL FIX */
.nav-item-grid,
.navigator-grid {
  position: absolute !important;
  /* CRITICAL: Remove from document flow */
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  top: 100% !important;
  /* Position below nav button */
  left: 0 !important;
}

/* Mega menu grid is relative to nav-item-grid, not document - HARD FIXED WIDTH */
.mega-menu-grid {
  position: relative !important;
  /* Relative to nav-item-grid */
  display: grid !important;
  /* CRITICAL: Grid layout for mega menu */
  grid-template-columns: repeat(2, 1fr) !important;
  /* 2 columns */
  gap: 8px 16px !important;
  /* Row and column gaps */
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  /* Full width of nav-item-grid */
  max-width: 100% !important;
  /* HARD - Don't exceed parent */
  min-width: 0 !important;
  /* Allow grid to shrink */
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* HARD - Prevent expansion */
  overflow-x: hidden !important;
  /* HARD - Prevent horizontal scroll */
  word-wrap: break-word !important;
  /* Break long words */
  word-break: break-word !important;
  /* Break words if needed */
  contain: layout style paint !important;
  /* Strict containment */
}

/* Ensure grid items don't expand beyond container */
.mega-menu-grid>* {
  min-width: 0 !important;
  /* Allow grid items to shrink */
  max-width: 100% !important;
  /* HARD - Don't exceed grid cell */
  overflow: hidden !important;
  /* Prevent content overflow */
  word-wrap: break-word !important;
  /* Break long words */
  word-break: break-word !important;
  /* Break words if needed */
  box-sizing: border-box !important;
}

/* Mega menu links - prevent expansion */
.mega-menu-grid a {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  /* Prevent text wrapping that could expand */
  box-sizing: border-box !important;
}

/* Ensure header doesn't grow when mega menu appears - FIXED HEIGHT */
header,
.header-container {
  position: relative !important;
  overflow: visible !important;
  /* Allow mega menu to overflow */
  z-index: 10000 !important;
  /* Header above sidebar */
}

.header-second-row {
  position: relative !important;
  display: flex !important;
  /* Ensure flex layout */
  flex-direction: row !important;
  /* Horizontal */
  align-items: center !important;
  /* Center items vertically */
  justify-content: center !important;
  /* Center items horizontally */
  height: auto !important;
  min-height: 50px !important;
  /* Minimum height for visibility */
  max-height: none !important;
  overflow: visible !important;
  /* Allow mega menu to overflow */
  contain: none !important;
  /* Remove containment to allow proper flex layout */
}

.header-center {
  position: relative !important;
  display: flex !important;
  /* CRITICAL: Horizontal layout */
  flex-direction: row !important;
  /* Horizontal direction */
  flex-wrap: nowrap !important;
  /* Don't wrap to new line */
  align-items: center !important;
  /* Center vertically */
  justify-content: center !important;
  /* Center horizontally */
  gap: 8px !important;
  /* Tighter spacing for compact header */
  gap: 4px !important;
  min-height: 40px !important;
  /* Minimum height for visibility */
  max-height: none !important;
  width: auto !important;
  overflow: visible !important;
  /* Allow mega menu to overflow */
  contain: none !important;
  /* Remove containment to allow proper flex layout */
}

/* REMOVED: Duplicate .nav-item rule - using consolidated version above */

/* Main content should not be affected by mega menu */
.main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
  clear: both !important;
  top: 0 !important;
  /* Start at top, not pushed down */
}

/* CRITICAL: Ensure mega menu never affects document flow - FINAL FIX */
/* UFO Panel styles removed - now handled in ufo_control_panel.php */