/* 
 * ENBAL Zoom Accessibility CSS
 * Handles layout fixes for 200% and 400% zoom levels
 * Ensures WCAG compliance for zoom functionality
 */

/* ==========================================================================
   200% ZOOM LEVEL SUPPORT
   At 200% zoom, a 1280px screen becomes 640px, a 1920px screen becomes 960px
   Target viewport: ~640px - 1024px (captures 200% zoom on most desktop screens)
   Excludes actual tablets/small screens using min-resolution to detect zoom
   ========================================================================== */

@media only screen and (pointer: fine) and (min-width: 640px) and (max-width: 1024px),
       only screen and (pointer: fine) and (min-width: 768px) and (max-width: 1024px) and (min-resolution: 1.5dppx) {
  /* Tools button icon-only style for 200% zoom */
  #tools {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.4rem !important;
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative !important;
  }
  #tools::before {
    content: "\\f0c9" !important; /* Font Awesome bars icon unicode */
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Solid" !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    display: inline-block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  #tools .iconText,
  #tools span[data-i18n="TOOLS"],
  #tools i {
    display: none !important;
  }
  
  /* Select dropdown text wrapping for 200% zoom */
  select.ecl-select,
  .ecl-select {
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    width: auto !important;
    min-width: 200px !important;
  }
  
  select.ecl-select option,
  .ecl-select option {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  /* Hide tooltips for dropdown menu items */
  .dropdown-menu .dropdown-item[aria-describedby],
  .dropdown-menu button[aria-describedby] {
    position: relative !important;
  }
  
  .dropdown-menu .dropdown-item[aria-describedby]::after,
  .dropdown-menu button[aria-describedby]::after {
    display: none !important;
  }
  
  /* Hide tooltip elements referenced by dropdown items */
  [id^="tooltip-btn-"] {
    display: none !important;
  }
  
  /* ==========================================================================
     HEADER AND NAVIGATION FIXES
     ========================================================================== */
  
    #es_app_header {
        max-width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #language-list-overlay {
        position: absolute;
        top: 45px;
        left: 19px;
        width: 24rem;
    }

    #toTop {
   
    top: 74vh;
    
}


  /* ==========================================================================
     MODAL FIXES FOR 200% ZOOM (#definitionsModal)
     ========================================================================== */
  
  /* Main modal dialog positioning */
  #definitionsModal dialog,
  #definitionsModal .ecl-modal,
  #definitionsModal dialog,
  dialog#infoModal,
  dialog#infoModal.ecl-modal,
  dialog#infoModal[open] {
    position: fixed !important;
    top: 25% !important;
    left: 25% !important;
    transform: translate(-25%, -25%) !important;
    max-width: 98vw !important;
    min-width: 60vw !important;
    width: auto !important;
    max-height: 96vh !important;
    margin: 0 !important;
    padding: 0.5rem !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  
  /* Dialog backdrop */
  dialog#infoModal::backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Modal container sizing - override ECL container */
  #definitionsModal .ecl-modal__container,
  dialog#infoModal .ecl-modal__container,
  #definitionsModal .ecl-modal__container.ecl-container,
  dialog#infoModal .ecl-modal__container.ecl-container,
  .ecl-modal__container.ecl-container {
    width: 85vw !important;
    max-width: 85vw !important;
    max-height: 85vh !important;
    margin: 0 auto !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
    background: white !important;
    border-radius: 4px !important;
  }
  
  /* Modal content area - override ECL grid classes */
  #definitionsModal .ecl-modal__content,
  dialog#infoModal .ecl-modal__content,
  #definitionsModal .ecl-modal__content.ecl-col-12,
  #definitionsModal .ecl-modal__content.ecl-col-m-10,
  #definitionsModal .ecl-modal__content.ecl-col-l-10,
  dialog#infoModal.ecl-modal .ecl-modal__content,
  .ecl-modal__content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
  }
  
  /* Modal header */
  #definitionsModal .ecl-modal__header,
  dialog#infoModal .ecl-modal__header {
    padding: 0.5rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  
  #definitionsModal .ecl-modal__header-content,
  dialog#infoModal .ecl-modal__header-content {
    flex: 1;
    margin-right: 0.5rem;
    font-size: 1rem;
    line-height: 1.3;
  }
  
  #definitionsModal .card-title,
  dialog#infoModal .card-title {
    font-size: 1.1rem !important;
    margin: 0 !important;
  }
  
  /* Modal close button */
  #definitionsModal .ecl-modal__close,
  dialog#infoModal .ecl-modal__close {
    padding: 0.4rem !important;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
  }
  
  /* Modal body with scrolling */
  #definitionsModal .ecl-modal__body,
  dialog#infoModal .ecl-modal__body, .ecl-modal__body  {
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0.5rem !important;
    max-height: calc(80vh - 200px) !important;
    min-height: 170px !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Modal images */
  #definitionsModal img.card-img-top,
  dialog#infoModal img.card-img-top {
    max-height: 200px !important;
    width: 100% !important;
    object-fit: cover;
    margin-bottom: 0.5rem;
  }


  
  /* Footer positioning for 200% zoom */
  #componentFooter {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: white !important;
    z-index: 100 !important;
    margin-top: 1rem !important;
  }
  
  /* Picture credit */
  #definitionsModal #dialog-picture-credit,
  dialog#infoModal #dialog-picture-credit {
    font-size: 0.7rem !important;
    padding: 0.3rem !important;
  }
  
  /* Description text */
  #definitionsModal #desc,
  dialog#infoModal #desc {
    font-size: 0.9rem !important;
    line-height: 1.4;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 0.5rem !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Button control area */
  #definitionsModal #btnControl,
  dialog#infoModal #btnControl {
    display: flex !important;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 0.5rem !important;
  }
  
  #definitionsModal #btnControl .ecl-button,
  dialog#infoModal #btnControl .ecl-button {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.6rem !important;
    white-space: nowrap;
  }
  
  /* Modal footer */
  #definitionsModal .ecl-modal__footer,
  dialog#infoModal .ecl-modal__footer {
    padding: 0.5rem !important;
    flex-shrink: 0;
    border-top: 1px solid #dee2e6;
  }
  
  #definitionsModal .ecl-modal__footer-content,
  dialog#infoModal .ecl-modal__footer-content {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  
  #definitionsModal .ecl-modal__footer .ecl-button,
  dialog#infoModal .ecl-modal__footer .ecl-button {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  #iframeModal > div > div > div {
    min-height: 140px !important;
}

  /* ==========================================================================
     CHART CONTAINER FIXES FOR 200% ZOOM
     ========================================================================== */
  
  /* Main chart container */
  #chart,
  #chartContainer,
  .chart-container {
    width: 100% !important;
    min-height: 700px !important;
    height: 750px !important;
    max-height: 75vh !important;
    overflow: visible !important;
    padding: 1rem !important;
    margin: 1rem 0 !important;
  }
  
  /* Highcharts specific containers */
  .highcharts-container,
  .highcharts-root {
    width: 100% !important;
    min-height: 700px !important;
    height: 750px !important;
    max-height: 75vh !important;
  }
  
  /* Chart plot area */
  .highcharts-plot-background,
  .highcharts-plot-border {
    min-height: 600px !important;
    height: auto !important;
  }
  
  /* Ensure chart series are visible */
  .highcharts-series-group {
    transform: none !important;
    visibility: visible !important;
  }
  
  /* Bar and column visibility */
  .highcharts-column-series rect,
  .highcharts-bar-series rect,
  .highcharts-series rect {
    min-width: 5px !important;
    min-height: 5px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Chart text sizing */
  .highcharts-legend {
    font-size: 0.85rem !important;
  }
  
  .highcharts-xaxis-labels text,
  .highcharts-yaxis-labels text {
    font-size: 0.8rem !important;
  }
  
  .highcharts-title {
    font-size: 1.1rem !important;
  }
  
  .highcharts-subtitle {
    font-size: 0.9rem !important;
  }
  

/* Optional: consistent focus visible treatment for the HTML overlay */
.accessible-credits-overlay:focus,
.accessible-credits-overlay:focus-visible {
  outline: 2px solid #005ea2;
  outline-offset: 2px;
}


  /* Chart area wrapper */
  #chartArea {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0.5rem !important;
  }
  
  /* Footer positioning for 200% zoom - bottom of content */
  #componentFooter {
    position: relative !important;
    width: 100% !important;
    background-color: white !important;
    margin-top: 2rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #e0e0e0 !important;
    clear: both !important;
  }

    #chartOptions {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .subNavOne {
      display: flex;
      /* align-items: center; */
      justify-content: flex-end;
    }

    .w-75 {
      width: 100% !important;
};
    

}

/* ==========================================================================
   400% ZOOM LEVEL SUPPORT
   At 400% zoom, a 1280px screen becomes 320px, a 1920px screen becomes 480px
   Target viewport: ~320px - 639px
   Uses additional checks to avoid affecting actual mobile devices
   ========================================================================== */

@media only screen and (pointer: fine) and (min-width: 320px) and (max-width: 639px) and (min-resolution: 1.5dppx),
       only screen and (pointer: fine) and (max-width: 480px) and (min-resolution: 2dppx) {
  
  /* Extreme zoom adjustments */
  #chart {
    /* height: 300px !important; */
    min-height: 250px !important;
  }

      #lang-section > button > i {
    line-height: 0px;
    padding-right: 0px;
    }

  
  .highcharts-container {
    /* height: 300px !important; */
    min-height: 250px !important;
  }
  
  /* Ultra-compact button sizing */
  .btn, button {
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    min-width: 35px;
    min-height: 35px;
  }

      #toTop {
   
    top: 74vh;
    
}
  
  /* Stack navigation vertically */
  #menuToolbar {
         flex-direction: column;
        /* align-items: stretch; */
        height: 3rem;
        /* align-items: center; */
        justify-content: center;
  }

  .chartMenuMobile, #chartBtns {
    position: absolute;
    display: flex;
    top: 101%;
    left: 62%;
    background-color: white;
    box-shadow: 0 11px 15px rgba(9, 49, 142, .08), 0 9px 46px rgba(9, 49, 142, .04), 0 24px 38px rgba(9, 49, 142, .04), 0 -4px 4px rgba(9, 49, 142, .04);
    border-radius: 5px;
    padding: 7px;
        z-index: 999;
}
#auxChartTitle {
    padding: 12px;
    padding-bottom: 50px;
}
 #chartBtns {
        top: 50%;
        left: 2%;
        flex-direction: row;
    }
  
  .subNavOne, .subNavTwo {
    align-items: stretch;
  }
  
  /* Single column layout for extreme zoom */
  .dropdown-grid {
    display: block;
  }
  
  .dropdown-grid .row {
    display: block;
  }
  
  .dropdown-grid .col-12 {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  /* ==========================================================================
     MODAL FIXES FOR 400% ZOOM (#definitionsModal)
     ========================================================================== */
  
  /* Main modal dialog positioning - ultra compact */
  #definitionsModal dialog,
  #definitionsModal .ecl-modal,
  dialog#infoModal,
  dialog#infoModal.ecl-modal,
  dialog#infoModal[open] {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        /* max-width: 98vw !important; */
        /* max-height: 97vh !important; */
        /* width: auto !important; */
        margin: 0 !important;
        padding: 0.3rem !important;
        border: none !important;
        background: transparent !important;
  }
  
  /* Dialog backdrop */
  dialog#infoModal::backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Ultra-compact modal container - override ECL container */
  #definitionsModal .ecl-modal__container,
  dialog#infoModal .ecl-modal__container,
  #definitionsModal .ecl-modal__container.ecl-container,
  dialog#infoModal .ecl-modal__container.ecl-container,
  .ecl-modal__container.ecl-container {
    /* width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important; */
    margin: 0 auto !important;
    padding: 0.3rem !important;
    box-sizing: border-box !important;
    background: white !important;
    border-radius: 4px !important;
  }
  
  /* Modal content ultra compact - override ECL grid classes */
  #definitionsModal .ecl-modal__content,
  dialog#infoModal .ecl-modal__content,
  #definitionsModal .ecl-modal__content.ecl-col-12,
  #definitionsModal .ecl-modal__content.ecl-col-m-10,
  #definitionsModal .ecl-modal__content.ecl-col-l-10,
  dialog#infoModal.ecl-modal .ecl-modal__content {
        /* width: 95vw !important; */
        /* max-width: 95vw !important; */
        /* max-height: 90vh !important; */
        margin: 0 auto !important;
        padding: 0.3rem !important;
        box-sizing: border-box !important;
        background: white !important;
        border-radius: 4px !important;
  }
  
  /* Compact modal header */
  #definitionsModal .ecl-modal__header,
  dialog#infoModal .ecl-modal__header {
    padding: 0.3rem !important;
    min-height: 45px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  
  #definitionsModal .ecl-modal__header-content,
  dialog#infoModal .ecl-modal__header-content {
    flex: 1;
    margin-right: 0.3rem;
    font-size: 0.85rem;
    line-height: 1.2;
  }
  
  #definitionsModal .card-title,
  dialog#infoModal .card-title {
    font-size: 0.95rem !important;
    margin: 0 !important;
  }
  
  /* Ultra-compact close button */
  #definitionsModal .ecl-modal__close,
  dialog#infoModal .ecl-modal__close {
    padding: 0.3rem !important;
    min-width: 35px;
    min-height: 35px;
    flex-shrink: 0;
  }
  
  /* Ultra-compact modal body */
  #definitionsModal .ecl-modal__body,
  dialog#infoModal .ecl-modal__body {
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0.3rem !important;
    max-height: 100vh;
    min-height: 80px !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Smaller modal images */
  #definitionsModal img.card-img-top,
  dialog#infoModal img.card-img-top {
    max-height: 120px !important;
    width: 100% !important;
    object-fit: cover;
    margin-bottom: 0.3rem;
  }
  
  /* Compact picture credit */
  #definitionsModal #dialog-picture-credit,
  dialog#infoModal #dialog-picture-credit {
    font-size: 0.65rem !important;
    padding: 0.2rem !important;
  }
  
  /* Compact description text */
  #definitionsModal #desc,
  dialog#infoModal #desc {
    font-size: 0.75rem !important;
    line-height: 1.3;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 0.3rem !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Stack buttons vertically in button control */
  #definitionsModal #btnControl,
  dialog#infoModal #btnControl {
    display: flex !important;
    align-items: stretch;
    gap: 0.3rem;
    padding: 0.3rem !important;
  }
  
  #definitionsModal #btnControl .ecl-button,
  dialog#infoModal #btnControl .ecl-button {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.4rem !important;
    width: 100%;
    text-align: center;
  }
  
  /* Compact modal footer */
  #definitionsModal .ecl-modal__footer,
  dialog#infoModal .ecl-modal__footer {
    padding: 0.3rem !important;
    flex-shrink: 0;
    border-top: 1px solid #dee2e6;
  }
  
  #definitionsModal .ecl-modal__footer-content,
  dialog#infoModal .ecl-modal__footer-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
  }
  
  #definitionsModal .ecl-modal__footer .ecl-button,
  dialog#infoModal .ecl-modal__footer .ecl-button {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.5rem !important;
    width: 100%;
    text-align: center;
  }
  
  /* ==========================================================================
     CHART CONTAINER FIXES FOR 400% ZOOM
     ========================================================================== */
  
  /* Main chart container - compact but visible */
  #chart,
  #chartContainer,
  .chart-container {
    width: 100% !important;
    min-height: 700px !important;
    height: 750px !important;
    max-height: 70vh !important;
    overflow: visible !important;
    padding: 0.5rem !important;
    margin: 0.5rem 0 !important;
  }
  
  /* Highcharts specific containers */
  .highcharts-container,
  .highcharts-root {
    width: 100% !important;
    min-height: 700px !important;
    height: 750px !important;
    max-height: 70vh !important;
  }
  
  /* Chart plot area */
  .highcharts-plot-background,
  .highcharts-plot-border {
    min-height: 600px !important;
    height: auto !important;
  }
  
  /* Ensure chart series are visible */
  .highcharts-series-group {
    transform: none !important;
    visibility: visible !important;
  }
  
  /* Bar and column visibility - larger minimum for better visibility */
  .highcharts-column-series rect,
  .highcharts-bar-series rect,
  .highcharts-series rect {
    min-width: 4px !important;
    min-height: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Compact chart text sizing */
  .highcharts-legend {
    font-size: 0.7rem !important;
  }
  
  .highcharts-xaxis-labels text,
  .highcharts-yaxis-labels text {
    font-size: 0.65rem !important;
  }
  
  .highcharts-title {
    font-size: 0.9rem !important;
  }
  
  .highcharts-subtitle {
    font-size: 0.75rem !important;
  }
  
  /* Chart area wrapper */
  #chartArea {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0.3rem !important;
  }
  
  /* Footer positioning for 400% zoom - bottom of content */
  #componentFooter {
    position: relative !important;
    width: 100% !important;
    background-color: white !important;
    margin-top: 1.5rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid #e0e0e0 !important;
    clear: both !important;
  }
  
  /* Original 400% zoom fixes */
  
  /* Ultra-compact modal sizing */
  .ecl-modal {
    padding: 0.5rem !important;
  }
  
  .ecl-modal__container.ecl-container {
    width: 98vw !important;
    max-width: 98vw !important;
    max-height: 95vh !important;
  }
  
  .ecl-modal__content {
    max-height: 90vh !important;
  }
  
  /* Compact modal header */
  .ecl-modal__header {
    padding: 0.3rem !important;
    min-height: 50px;
    align-items: stretch;
    gap: 0.3rem;
  }
  
  .ecl-modal__header-content {
    font-size: 0.9rem;
    margin-right: 0;
    margin-bottom: 0.2rem;
  }
  
  .ecl-modal__close {
    align-self: flex-end;
    padding: 0.3rem !important;
    min-width: 35px;
    min-height: 35px;
  }
  
  /* Ultra-compact modal body */
  .ecl-modal__body {
    padding: 0.3rem;
    max-height: calc(90vh - 100px);
  }
  
  .ecl-modal__body-scroll {
    font-size: 0.75rem;
    line-height: 1.3;
  }
  
  /* Smaller modal images */
  img.card-img-top {
    max-height: 150px !important;
  }
  
  /* Compact modal footer */
  .ecl-modal__footer {
    padding: 0.3rem !important;
  }
  
  .ecl-modal__footer-content {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
  }
  
  /* Stack modal buttons vertically */
  #btnControl {
    align-items: stretch;
    gap: 0.3rem;
  }
  
  .ecl-modal .ecl-button {
    font-size: 0.75rem;
    padding: 0.3rem 0.4rem;
    text-align: center;
  }
  
  /* Language overlay for extreme zoom */
  #language-list-overlay {
    top: 50px !important;
    width: 95vw !important;
    max-width: none !important;
    max-height: 60vh !important;
  }
  
  /* Iframe modal extreme zoom */
  #iframeModal .ecl-modal__body-scroll {
    font-size: 0.7rem;
    max-height: 200px;
  }
}

.wt-globan--invalid-domain {
    display: none;
}