/* Fix icon positioning - ensure icons sit directly in front of Budjeezie */
.budjeezie-sync-icon {
  display: inline !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Remove separator bar from add entry dialog on desktop */
@media(min-width:768px) {
  #dayDialog .entry-mode-switch {
    border-top: none !important;
    border-bottom: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  #dayDialog .entry-edit {
    border-top: none !important;
    border-bottom: none !important;
  }
}

/* Fix holiday period date picker positioning */
/* Ensure dialog has high z-index to appear above other elements */
#holidayPeriodDialog[open] {
  z-index: 10000 !important;
}

/* Ensure dialog backdrop doesn't interfere */
#holidayPeriodDialog::backdrop {
  z-index: 9999 !important;
}

/* For mobile browsers where calendar appears in separate overlay */
/* Ensure the dialog itself doesn't clip the calendar */
/* Override the overflow: hidden from components.css */
#holidayPeriodDialog[open] {
  overflow: visible !important;
  contain: layout style !important; /* Remove 'paint' to allow calendar to escape */
}

/* Date input container - allow calendar to escape */
#holidayPeriodDialog .holiday-dates-row {
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
  isolation: isolate !important;
}

/* Date inputs - ensure they're positioned correctly */
#holidayPeriodDialog input[type="date"] {
  position: relative !important;
  z-index: 2 !important;
}

/* Ensure date picker calendar appears correctly */
#holidayPeriodDialog input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute !important;
  right: 8px !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

/* Fix for native date picker calendar - ensure it appears above modal */
/* This targets the browser's native date picker popup */
#holidayPeriodDialog input[type="date"]:focus,
#holidayPeriodDialog input[type="date"]:active {
  z-index: 10001 !important;
  position: relative !important;
}

/* Ensure dialog body allows calendar to be visible when date input is focused */
/* Use a workaround since :has() may not be supported in all browsers */
#holidayPeriodDialog .dlg-b {
  position: relative !important;
}

/* When a date input inside the dialog body is focused, allow overflow */
/* This helps the calendar appear correctly on desktop browsers */
#holidayPeriodDialog .dlg-b input[type="date"]:focus {
  position: relative !important;
  z-index: 10001 !important;
}

/* Ensure parent containers don't clip the calendar */
#holidayPeriodDialog .field {
  overflow: visible !important;
  position: relative !important;
}

/* Override overflow: hidden in media queries when date input is focused */
/* This ensures the calendar can escape the dialog bounds on all screen sizes */
@media(min-width:481px) and (max-width:768px) {
  #holidayPeriodDialog[open]:has(input[type="date"]:focus) {
    overflow: visible !important;
  }
}

@media(max-width:768px) {
  #holidayPeriodDialog[open]:has(input[type="date"]:focus) {
    overflow: visible !important;
  }
}

@media(min-width:769px) {
  #holidayPeriodDialog[open]:has(input[type="date"]:focus) {
    overflow: visible !important;
  }
}

/* Fallback for browsers that don't support :has() - use class-based approach */
#holidayPeriodDialog[open].date-picker-open {
  overflow: visible !important;
  contain: layout style !important;
}

/* Prevent dialog close from causing scroll */
dialog:not([open]) {
  display: none !important;
}

dialog[open] {
  display: flex !important;
}

/* Prevent scroll on dialog close */
body.dialog-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}