/* Force background black at the HTML level — applies before app mounts */
html,
body {
  background-color: var(--zc-bg) !important;
  color: var(--zc-text);
}

/* Remove the empty block created by extra_streamlit_components CookieManager (0-height iframe) */
div[data-testid="stElementContainer"]:has(
    iframe[height="0"][title*="extra_streamlit_components.CookieManager.cookie_manager"]
  ) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 1) Force header + sidebar header height */
header[data-testid="stHeader"] {
  height: 2rem !important;
  min-height: 2rem !important;
  z-index: auto !important;
}

[data-testid="stSidebarHeader"] {
  height: 2rem !important;
  min-height: 2rem !important;
  margin-bottom: 0 !important;
}

/* 2) Make sure the main content starts below that header height */
section.stMain .block-container {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* (Optional) If you’re using the newer container selector in your Streamlit version */
.stAppViewBlockContainer {
  padding-top: 2rem !important;
}

[data-testid="stMainMenu"] {
  visibility: hidden !important;
}
[data-testid="stAppDeployButton"] {
  visibility: hidden !important;
}
[data-testid="stDecoration"] {
  visibility: hidden !important;
}
footer {
  visibility: hidden !important;
}
div[data-testid="stStatusWidget"] {
  visibility: hidden !important;
}

.block-container {
  padding-top: 2rem !important;
  padding-bottom: 5rem !important;
}
div[data-testid="stImage"] {
  margin-bottom: 0px !important;
}

/* Hide containers that only contain scripts (no visible content) */
.stElementContainer:has(script):not(:has(:not(script))) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Alternative: Target stHtml containers with only scripts */
.stElementContainer:has(.stHtml):not(:has(:not(.stHtml))) {
  display: none !important;
}

/* More specific: Hide the exact pattern you showed */
.stElementContainer[data-testid="stElementContainer"]:has(.stHtml script) {
  display: none !important;
}

/* Hide Streamlit markdown wrappers that only contain a <style> tag */
.stElementContainer:has(
    > div[data-testid="stMarkdown"] [data-testid="stMarkdownContainer"] > style:only-child
  ),
.stElementContainer:has(
    > div.stMarkdown [data-testid="stMarkdownContainer"] > style:only-child
  ) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* ============================
   RESPONSIVE — MOBILE / TABLET
   ============================ */

@media (max-width: 768px) {

  /* Mobile-friendly main content padding */
  section.stMain .block-container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .stAppViewBlockContainer {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Reduce bottom padding — footer is no longer sticky on mobile,
     so we don't need 5rem clearance. This makes the scan button visible. */
  .block-container {
    padding-bottom: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  section.stMain .block-container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .stAppViewBlockContainer {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .block-container {
    padding-bottom: 1rem !important;
  }
}