/*
 * This is a manifest file that'll be compiled into app.css, which will include all the files
 * listed below.
 *
 * Any CSS file within this directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require tailwind
 *= require_self
 */

/* Responsive navbar: functionality now handled via Tailwind classes in the view */


/* Z-Index Management - CSS Custom Properties */
:root {
  --z-tooltip: 99999;
  --z-modal: 10000;
  --z-dropdown: 1000;
  --z-card: 1;
}

/* Tooltip Portal Container - Always on top */
/* Use isolation: isolate to create a new stacking context that's guaranteed to be above everything */
#tooltip-portal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  /* Maximum z-index value */
  isolation: isolate !important;
  /* Create new stacking context */
}


/* Tooltip content styling - ensure it's always on top */
#tooltip-portal>[role="tooltip"] {
  pointer-events: auto !important;
  position: fixed !important;
  z-index: 2147483647 !important;
  /* Explicit maximum z-index */
  /* Use transform to create new stacking context above everything */
  transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
  /* Hint browser for optimization */
  overflow: visible !important;
  width: max-content !important;
  min-width: 0 !important;
  height: auto !important;
}

/* Ensure tooltip inner content displays correctly */
#tooltip-portal>[role="tooltip"]>div {
  display: block !important;
  position: relative !important;
  z-index: inherit !important;
  width: max-content !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Search input: app radius + enough height so icon and text are not clipped */
[data-search-input-wrapper] {
  min-height: 2.75rem;
}

[data-search-input-wrapper] input {
  border-radius: 0.75rem !important;
  min-height: 2.75rem;
  box-sizing: border-box;
  padding-left: 3.5rem !important;
  /* gap between icon and placeholder so they never overlay */
}