/* 
 * ENPRICES Zoom Accessibility CSS
 * Handles layout fixes for 200% and 400% zoom levels
 * Ensures WCAG compliance for zoom functionality
 * Adapted for ENPRICES energy prices visualization tool
 */

/* ==========================================================================
  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 pointer: fine to detect mouse users
   ========================================================================== */

@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) {

  /* ==========================================================================
     HEADER FIXES FOR 200% ZOOM
     ========================================================================== */
  
  /* Override grid layout with flexbox */
  #es_app_header {
        max-width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
  }

 

 

 

  /* Language button - icon only at 200% zoom */
  #toggleLanguageBtn {
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Hide ALL text in language button */
  #toggleLanguageBtn #lang-selection-text,
  #toggleLanguageBtn .btn-text,
  #toggleLanguageBtn > span,
  #lang-selection-text {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Show only the globe icon */
  #toggleLanguageBtn i,
  #toggleLanguageBtn i.fas.fa-globe {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.4rem !important;
  }

  /* Language overlay positioning */
  #language-list-overlay {
    position: absolute !important;
        top: 50px !important;
        /* right: 6rem !important; */
        left: -7rem !important;
        width: 23rem !important;
        max-width: 90vw !important;
        z-index: 999999 !important;
  }

  .ecl-site-header__language-container:before {
    left: 87%;   
}

  /* Hide ribbon at 200% zoom to save space */
  #es_app_header_ribbon {
    display: none !important;
  }

  /* Logo wrapper container - force visible */
  .es_app_top {
    flex: 0 0 auto !important;
    order: 3 !important;
    display: block !important;
    visibility: visible !important;
  }

  /* Eurostat logo link - KEEP VISIBLE and properly sized */
  #es_app_title {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
  }

  /* Eurostat logo image */
  #es_app_title .es_logo,
  .es_logo {
    display: inline-block !important;
    max-height: 35px !important;
    width: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ==========================================================================
     SUB-NAVBAR / MENU TOOLBAR FIXES FOR 200% ZOOM
     ========================================================================== */

  #menuToolbar {
    flex-wrap: wrap !important;
    padding: 0.5rem !important;
  }

  /* Title section in toolbar */
  #menuToolbar .text-group {
    flex: 1 1 100% !important;
    order: -1 !important;
    margin-bottom: 0.5rem !important;
  }

  #menuToolbar .title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  #menuToolbar .subtitle {
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
  }

  /* Menu button in desktop view */
  #menuToolbar #menu {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.5rem !important;
  }

  #menuToolbar #menu span {
    display: none !important;
  }

  /* Chart buttons toolbar */
  #chartBtns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    justify-content: flex-end !important;
  }

  #chartBtns .nav-item {
    padding: 0.15rem !important;
  }

  #chartBtns .round-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.4rem !important;
  }

  /* ==========================================================================
     MOBILE-STYLE NAVIGATION BUTTONS (subNavOne/subNavTwo)
     ========================================================================== */

  .subNavOne {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }
  
  .subNavTwo {
    display: flex !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }
  
  .menuBtn {
    flex-shrink: 0 !important;
  }
  
  .menuBtn .btnGroup,
  #tools,
  #menu,
  #options {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.4rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Hide button text, keep only icons */
  .menuBtn .btnGroup .iconText,
  #tools .iconText,
  #menu .iconText,
  #options .iconText,
  #tools span[data-i18n="TOOLS"],
  #menu span[data-i18n="MAINMENU"],
  #options span[data-i18n="OPTIONS"] {
    display: none !important;
  }
  
  .menuBtn .btnGroup i,
  #tools i,
  #menu i,
  #options i {
    margin: 0 !important;
    font-size: 1.2rem !important;
  }

  /* ==========================================================================
     CHART OPTIONS MENU (DROPDOWN FILTERS)
     ========================================================================== */
  
    #chartOptionsMenu {
      position: absolute;
      top: 5.8rem;
      left: 0.5rem;
      z-index: 9;
      background-color: #f3f6fc;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      width: 97vw;
      /* height: 18vh; */
      padding: 1.2rem;
    }
  
  #chartOptionsMenu .dropdown-grid {
    width: 100% !important;
    padding: 0.5rem !important;
  }
  
  #chartOptionsMenu .dropdown-grid .row {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  #chartOptionsMenu .dropdown-grid .col-12,
  #chartOptionsMenu .dropdown-grid [class*="col-"] {
    flex: 1 1 45% !important;
    max-width: 50% !important;
    min-width: 200px !important;
  }
  
  /* Close button for chart options menu */
  #chartOptionsMenu .close-button-container {
    position: sticky !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0.5rem !important;
    background-color: #f3f6fc !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
  }
  
  #closeChartMenuBtn,
  #chartOptionsMenu #closeChartMenuBtn,
  .close-chart-menu-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--btn-color, #0e47cb) !important;
    border: 1px solid var(--btn-color, #0e47cb) !important;
    border-radius: 4px !important;
    position: relative !important;
  }


  
  #closeChartMenuBtn i,
  .close-chart-menu-btn i {
    pointer-events: none !important;
    /* color: white !important; */
    font-size: 1.2rem !important;
  }



  /* ==========================================================================
     SELECT/DROPDOWN FIXES
     ========================================================================== */
  
  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: 100% !important;
    min-width: 150px !important;
    font-size: 0.9rem !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;
  }

  .ecl-form-group {
    margin-bottom: 0.5rem !important;
  }

  .ecl-form-label {
    font-size: 0.85rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* ==========================================================================
     TOOLTIP HANDLING - Show only active tooltips at 200% (avoid showing all)
     ========================================================================== */
  
  /* Default: hide tooltip elements to avoid accidental multiple visible elements. */
  [id^="tooltip-"],
  .tooltip,
  [role="tooltip"],
  div[id*="tooltip"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Show only when Bootstrap (or script) marks them visible (e.g., with .show or attribute data-show).
     This ensures only one tooltip at a time (the active one) is visible on desktop at 200% zoom. */
  .tooltip.show,
  [role="tooltip"].show,
  div[id*="tooltip"].show,
  [id^="tooltip-"].show,
  [data-show="true"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Ensure buttons still work when aria-describedby is present */
  button[aria-describedby],
  a[aria-describedby] {
    pointer-events: auto !important;
  }


  /* ==========================================================================
     MODAL FIXES FOR 200% ZOOM (#iframeModal - Share/Embed Modal)
     ========================================================================== */
  
  /* Main modal dialog positioning */
  dialog#iframeModal,
  dialog#iframeModal.ecl-modal,
  dialog#iframeModal[open] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 95vw !important;
    min-width: 60vw !important;
    max-height: 90vh !important;
    margin: 0 !important;
    padding: 0.5rem !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  
  /* Dialog backdrop */
  dialog#iframeModal::backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Modal container sizing */
  dialog#iframeModal .ecl-modal__container,
  dialog#iframeModal .ecl-modal__container.ecl-container,
  #iframeModal .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;
    border-radius: 4px !important;
  }
  
  /* Modal content area */
  dialog#iframeModal .ecl-modal__content,
  dialog#iframeModal .ecl-modal__content.ecl-col-12,
  dialog#iframeModal .ecl-modal__content.ecl-col-m-10,
  dialog#iframeModal .ecl-modal__content.ecl-col-l-8,
  dialog#iframeModal.ecl-modal .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 */
  dialog#iframeModal .ecl-modal__header {
    padding: 0.5rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  
  dialog#iframeModal .ecl-modal__header-content {
    flex: 1;
    margin-right: 0.5rem;
    font-size: 1rem;
    line-height: 1.3;
  }
  
  /* Modal close button */
  dialog#iframeModal .ecl-modal__close {
    padding: 0.4rem !important;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }
  
  /* Modal body with scrolling */
  dialog#iframeModal .ecl-modal__body,
  #iframeModal .ecl-modal__body  {
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0.5rem !important;
    max-height: calc(80vh - 180px) !important;
    min-height: 150px !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Modal body scroll container */
  dialog#iframeModal .ecl-modal__body-scroll {
    font-size: 0.9rem !important;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Modal footer */
  dialog#iframeModal .ecl-modal__footer {
    padding: 0.5rem !important;
    flex-shrink: 0;
    border-top: 1px solid #dee2e6;
  }
  
  dialog#iframeModal .ecl-modal__footer-content {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  
  dialog#iframeModal .ecl-modal__footer .ecl-button {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  /* Modal min-height fix for content */
  #iframeModal > div > div > div {
    min-height: 120px !important;
  }

  /* ==========================================================================
     CHART CONTAINER FIXES FOR 200% ZOOM
     ========================================================================== */
  
  /* Main chart container */
  #chart {
    width: 100% !important;
    min-height: 500px !important;
    height: auto !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: 450px !important;
    height: auto !important;
  }
  
  /* Chart text sizing */
  .highcharts-legend {
    font-size: 0.8rem !important;
  }
  
  .highcharts-xaxis-labels text,
  .highcharts-yaxis-labels text {
    font-size: 0.75rem !important;
  }
  
  .highcharts-title {
    font-size: 1rem !important;
  }
  
  .highcharts-subtitle {
    font-size: 0.85rem !important;
  }

  /* Chart credits region */
  .chart-credits-region {
    font-size: 0.8rem !important;
    padding: 0.5rem !important;
  }

  /* ==========================================================================
     AUX CHART CONTROLS (Detail/Order switches)
     ========================================================================== */

  #menuSwitch {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  #menuSwitch fieldset {
    flex: 1 1 45% !important;
    min-width: 150px !important;
  }

  .form-check.form-switch {
    padding-left: 2.5rem !important;
  }

  .form-check-label {
    font-size: 0.85rem !important;
  }

  /* ==========================================================================
     FOOTER FIXES FOR 200% ZOOM
     ========================================================================== */
  
  #componentFooter {
    position: relative !important;
    width: 100% !important;
    background-color: white !important;
    margin-top: 1rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid #e0e0e0 !important;
    clear: both !important;
  }

  #footerCredits {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  #footerCredits .ecl-site-footer__list-item {
    padding: 0.25rem 0.5rem !important;
  }

  #footerCredits a {
    font-size: 0.85rem !important;
  }

  /* ==========================================================================
     GENERAL LAYOUT FIXES
     ========================================================================== */

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

  #chartOptions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  /* Page container */
  #page {
    overflow-x: hidden !important;
  }

  #menu {
    margin-left: 0;
  }

#menuToolbar > div > div.col-8 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

#menuToolbar > div > div.col-3 {   
      flex: 0 0 auto;
      width: 33.33333333%;
  }

  #chartControls > div {
    flex-direction: column;
    align-items: flex-start;
  }


}

/* ==========================================================================
   400% ZOOM LEVEL SUPPORT
   At 400% zoom, a 1280px screen becomes 320px, a 1920px screen becomes 480px
   Target viewport: ~320px - 639px
   Uses pointer: fine to detect desktop users with mouse (not touch 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) {
  
  /* ==========================================================================
     HEADER FIXES FOR 400% ZOOM
     ========================================================================== */
  
  #es_app_header {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.3rem !important;
    gap: 0.3rem !important;
  }

  #es_app_header_title {
    max-width: 100% !important;
    text-align: center !important;
  }

  #es_app_header_title .es_app_title {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
  }

  #lang-section {
    display: flex !important;
    justify-content: center !important;
  }

  #toggleLanguageBtn {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0.3rem !important;
  }

  #toggleLanguageBtn i {
    font-size: 1rem !important;
  }

  /* Language overlay for 400% zoom */
  #language-list-overlay {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 95vw !important;
    max-width: none !important;
    max-height: 80vh !important;
    z-index: 9999999 !important;
  }

  /* Hide ribbon and logo at 400% zoom */
  #es_app_header_ribbon,
  #es_app_title {
    display: none !important;
  }

  /* ==========================================================================
     SUB-NAVBAR / MENU TOOLBAR FIXES FOR 400% ZOOM
     ========================================================================== */

  #menuToolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.3rem !important;
  }

  #menuToolbar .container-fluid {
    flex-direction: column !important;
  }

  #menuToolbar .text-group {
    text-align: center !important;
    margin-bottom: 0.3rem !important;
  }

  #menuToolbar .title {
    font-size: 0.85rem !important;
  }

  #menuToolbar .subtitle {
    font-size: 0.75rem !important;
  }

  /* Ultra-compact buttons */
  .btn, button, .btnGroup {
    padding: 0.3rem 0.4rem !important;
    font-size: 0.75rem !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  #chartBtns {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  #chartBtns .nav-item {
    padding: 0.1rem !important;
  }

  #chartBtns .round-btn {
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0.3rem !important;
  }

  #chartBtns .round-btn i {
    font-size: 0.9rem !important;
  }

  /* Mobile tools menu positioning */
  .chartMenuMobile {
    position: fixed !important;
    top: auto !important;
    bottom: 60px !important;
    left: 5% !important;
    right: 5% !important;
    width: 90% !important;
    background-color: white !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 0.5rem !important;
    z-index: 999999 !important;
  }

  .chartMenuMobile #chartBtns {
    flex-direction: row !important;
    justify-content: space-around !important;
  }

  /* ==========================================================================
     CHART OPTIONS MENU FOR 400% ZOOM
     ========================================================================== */
  
  #chartOptionsMenu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 999999999 !important;
    overflow-y: auto !important;
    background-color: #f3f6fc !important;
    padding: 0.3rem !important;
  }

  #chartOptionsMenu .dropdown-grid {
    padding: 0.3rem !important;
  }
  
  #chartOptionsMenu .dropdown-grid .row {
    display: block !important;
  }

  #chartOptionsMenu .dropdown-grid .col-12,
  #chartOptionsMenu .dropdown-grid [class*="col-"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }

  #closeChartMenuBtn,
  .close-chart-menu-btn {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* ==========================================================================
     SELECT/DROPDOWN FIXES FOR 400% ZOOM
     ========================================================================== */

  select.ecl-select,
  .ecl-select {
    font-size: 0.8rem !important;
    padding: 0.4rem !important;
    min-width: 100% !important;
  }

  .ecl-form-label {
    font-size: 0.75rem !important;
  }

  .ecl-select__container {
    width: 100% !important;
  }

  /* ==========================================================================
     MODAL FIXES FOR 400% ZOOM
     ========================================================================== */
  
  dialog#iframeModal,
  dialog#iframeModal.ecl-modal,
  dialog#iframeModal[open] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  dialog#iframeModal .ecl-modal__container,
  #iframeModal .ecl-modal__container.ecl-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0.3rem !important;
    border-radius: 0 !important;
  }
  
  dialog#iframeModal .ecl-modal__content {
    max-height: 100% !important;
    height: 100% !important;
  }
  
  dialog#iframeModal .ecl-modal__header {
    padding: 0.3rem !important;
    flex-wrap: wrap !important;
  }
  
  dialog#iframeModal .ecl-modal__header-content {
    font-size: 0.85rem !important;
    flex: 1 1 80% !important;
  }
  
  dialog#iframeModal .ecl-modal__close {
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0.3rem !important;
  }
  
  dialog#iframeModal .ecl-modal__body,
  #iframeModal .ecl-modal__body {
    padding: 0.3rem !important;
    max-height: calc(100vh - 120px) !important;
    min-height: 100px !important;
  }
  
  dialog#iframeModal .ecl-modal__body-scroll {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }
  
  dialog#iframeModal .ecl-modal__footer {
    padding: 0.3rem !important;
  }
  
  dialog#iframeModal .ecl-modal__footer-content {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  dialog#iframeModal .ecl-modal__footer .ecl-button {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.5rem !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* ==========================================================================
     CHART CONTAINER FIXES FOR 400% ZOOM
     ========================================================================== */
  
  #chart {
    width: 100% !important;
    min-height: 300px !important;
    height: auto !important;
    max-height: 60vh !important;
    padding: 0.25rem !important;
    margin: 0.25rem 0 !important;
  }
  
  .highcharts-container,
  .highcharts-root {
    min-height: 280px !important;
    height: auto !important;
  }
  
  /* Compact chart text */
  .highcharts-legend {
    font-size: 0.65rem !important;
  }
  
  .highcharts-xaxis-labels text,
  .highcharts-yaxis-labels text {
    font-size: 0.6rem !important;
  }
  
  .highcharts-title {
    font-size: 0.85rem !important;
  }
  
  .highcharts-subtitle {
    font-size: 0.7rem !important;
  }

  .chart-credits-region {
    font-size: 0.7rem !important;
    padding: 0.25rem !important;
  }

  /* ==========================================================================
     AUX CHART CONTROLS FOR 400% ZOOM
     ========================================================================== */

  #menuSwitch {
    flex-direction: column !important;
  }

  #menuSwitch fieldset {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .form-check-label {
    font-size: 0.75rem !important;
  }

  /* ==========================================================================
     FOOTER FIXES FOR 400% ZOOM
     ========================================================================== */
  
  #componentFooter {
    margin-top: 0.5rem !important;
    padding-top: 0.3rem !important;
  }

  #footerCredits {
    flex-direction: column !important;
    align-items: center !important;
  }

  #footerCredits a {
    font-size: 0.75rem !important;
  }

  /* ==========================================================================
     HIDE TOOLTIPS AT 400% ZOOM
     ========================================================================== */

  [id^="tooltip-"],
  .tooltip,
  [role="tooltip"],
  div[id*="tooltip"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ==========================================================================
     GENERAL LAYOUT FOR 400% ZOOM
     ========================================================================== */

  #page {
    overflow-x: hidden !important;
    padding: 0.25rem !important;
  }

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

  /* Stack all multi-column layouts */
  .row {
    flex-direction: column !important;
  }

  [class*="col-"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

}

/* ==========================================================================
   GLOBAL FIXES (Apply to all zoom levels)
   ========================================================================== */

/* Hide invalid domain warning from webtools */
.wt-globan--invalid-domain {
  display: none !important;
}

/* Ensure focus indicators are always visible */
@media only screen and (pointer: fine) {
  *:focus-visible {
    outline: 2px solid #0e47cb !important;
    outline-offset: 2px !important;
  }
}