/**
 * Custom AdminJS styles
 * This file contains custom CSS overrides for AdminJS interface
 */

/*
 * Hide specific labels based on styled-components classes
 * The class "feyqOk" represents labels that should be hidden (form field labels)
 * The class "cViEyp" represents labels that should remain visible (display labels)
 */

/* Target labels with the feyqOk styled-components hash - these are form field labels */
label.adminjs_Label.feyqOk,
label.feyqOk.adminjs_Label {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Alternative approach using attribute selector if class order varies */
label.adminjs_Label[class*="feyqOk"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure labels with cViEyp remain visible (override if needed) */
label.adminjs_Label.cViEyp,
label.cViEyp.adminjs_Label {
  display: block !important;
  visibility: visible !important;
}

/**
 * Hide default AdminJS sidebar elements when using custom navigation
 * This prevents the default sidebar from showing alongside our custom sidebar
 */

/* Make our custom sidebar fill the entire aside container */
aside {
  padding: 0 !important;
  background: white !important;
}

/* Hide aside completely when user is not authenticated (no sidebar classes on body) */
body:not(.sidebar-collapsed):not(.sidebar-expanded) aside {
  display: none !important;
}

/* Hide all default AdminJS sidebar children except our custom one */
aside > div:not([data-custom-sidebar]),
aside > section:not([data-custom-sidebar]),
aside > nav:not([data-custom-sidebar]) {
  display: none !important;
}

/* Ensure our custom sidebar takes full height and width */
aside > div[data-custom-sidebar] {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Additional specificity: hide AdminJS default navigation components */
aside nav,
aside section[class*="SidebarBranding"],
aside div[class*="SidebarBranding"] {
  display: none !important;
}

/**
 * Adjust main content layout based on sidebar state
 * Use margin-left and width calculations to prevent horizontal scrolling
 * IMPORTANT: Avoid position: fixed to prevent z-index issues with charts and modals
 * IMPORTANT: Exclude modals, portals, popovers, and color pickers from width constraints
 */

/* Target ALL direct children of body except aside (sidebar) and overlay elements */
body.sidebar-expanded > *:not(aside):not([role="dialog"]):not([role="presentation"]):not([data-global-color-picker]):not(.react-colorful):not([class*="Portal"]):not([class*="Modal"]):not([class*="Popover"]):not([class*="Overlay"]):not([class*="Picker"]) {
  margin-left: 280px !important;
  width: calc(100vw - 280px) !important;
  max-width: calc(100vw - 280px) !important;
  transition: margin-left 300ms ease-in-out, width 300ms ease-in-out, max-width 300ms ease-in-out !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.sidebar-collapsed > *:not(aside):not([role="dialog"]):not([role="presentation"]):not([data-global-color-picker]):not(.react-colorful):not([class*="Portal"]):not([class*="Modal"]):not([class*="Popover"]):not([class*="Overlay"]):not([class*="Picker"]) {
  margin-left: 64px !important;
  width: calc(100vw - 64px) !important;
  max-width: calc(100vw - 64px) !important;
  transition: margin-left 300ms ease-in-out, width 300ms ease-in-out, max-width 300ms ease-in-out !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Default fallback for initial load (expanded) */
body:not(.sidebar-collapsed):not(.sidebar-expanded) > *:not(aside):not([role="dialog"]):not([role="presentation"]):not([data-global-color-picker]):not(.react-colorful):not([class*="Portal"]):not([class*="Modal"]):not([class*="Popover"]):not([class*="Overlay"]):not([class*="Picker"]) {
  margin-left: 280px !important;
  width: calc(100vw - 280px) !important;
  max-width: calc(100vw - 280px) !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Ensure body doesn't have horizontal scroll */
body {
  overflow-x: hidden !important;
}

/* Hide the recharts measurement span that appears at top */
#recharts_measurement_span {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure all child elements respect the width constraint */
body.sidebar-expanded > *:not(aside) > *,
body.sidebar-collapsed > *:not(aside) > * {
  max-width: 100% !important;
}

/* Mobile: no margin, full width */
@media (max-width: 767px) {
  body > *:not(aside) {
    margin-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}