/*
 * ela-theme.css
 * Table of contents:
 *  1. Variables
 *  2. Utilities
 *  3. Base / General styling
 *  4. Layout (header / footer / containers)
 *  5. Modules
 *     - Map
 *     - CBUW Good Practice (forms)
 *     - TCN / Handbook
 *  6. Responsive rules
 *  7. TODO / Migration notes
 *
 * Notes:
 * - Module blocks are marked with == Module: NAME == headers for easy search/folding.
 * - Keep classes prefixed with "ela-" to avoid collisions and to make them easy to locate.
 */

:root {
  /* global tokens - keep these small and descriptive for quick theme tweaks */
  --bs-body-font-size: 0.85rem;
  --ela-brand: #011073;
  --ela-popup-bg: #fff;
  --ela-popup-border: rgba(0,0,0,0.12);
  --ela-badge-bg: rgba(255,255,255,0.95);
  --ela-badge-color: #111;
  --ela-focus-ring: 3px solid rgba(1,16,115,0.12);
  --ela-font-family: Arial, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* == Utilities == */
/* visually hidden / screen-reader-only helper */
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* keyboard focus helper */
.focus-visible:focus { outline: var(--ela-focus-ring); outline-offset: 2px; }

/* ==========================================================
  == Section: Responsive rules ==
  (High-level responsive helpers used across modules)
  ========================================================== */
@media  (min-width:320px) and (max-width: 1100px) {
  .container{
    width:100%;
    min-width:100%;
    max-width:100%;
  }
  #elaHeader{
    width:100%;
    min-width:100%;
    max-width:100%;
  }

  #elaFooter{
    width:100%;
    min-width:100%;
    max-width:100%;
  }
  #elaFooter .footer-bottom{
    width:100%;
    min-width:100%;
    max-width:100%;
  }
}

@media  (max-width:1100px){
  .elaLandingPageCardLogo{
    width:8em;
  }
}

/* GENERAL STYLING */
.wrapper-body{
  min-height: calc(100% - 10rem);
  margin-bottom: 0px;
  max-width: calc(100% - 20rem);
  margin: 0 auto;
}

.crmEntityFormView div.description.above{
color: #7e7e7e;
}

.elaLandingPageCard{
  background: white; 
  border-radius: 4px; outline: 1px rgba(0, 0, 0, 0.17) solid; 
  outline-offset: -1px; 
  padding:0 0 10px 0px;
}

.elaLandingPageCard img{
  aspect-ratio: 3 / 2;
}

/* ==========================================================
  == Layout: Header ==
  ========================================================== */
#elaHeader{
  margin: 0 auto;
  border-radius: 0 0 16px 16px;
  border: 1px solid #011073;
  background-color:#011073;
  font-family: Arial;
  font-weight: 300;
  padding: 20px;
  min-width: 100%;
}

  #elaHeader a{
    color: white;
    font-size: 16px;
  }

    #elaHeader .show.dropdown-menu{
      padding:10px;
    }

    #elaHeader .show.dropdown-menu > li > a{
      color: black;
      font-size: 16px;
    }

  #elaHeaderLogo > img{
    width: auto;
    height: 48px;
    margin: 0 auto;
  }

/* ==========================================================
  == Layout: Footer ==
  ========================================================== */
#elaFooter {
  margin: 0 auto;
  border-radius: 0 0 16px 16px;
  border: 1px solid #011073;
  background-color: #011073;
  font-family: Arial;
  font-weight: 300;
  padding: 20px;
  min-width: 100%;
}

  #elaFooter p{
    color: #FFFFFF !important;
    font-family: Arial;
    font-weight: 400;
    font-size: 17px;
  }


/* ==========================================================
  == Component: Entity list ==
  ========================================================== */
/*ENTITY LIST STYLING*/
button.btn-entitylist-filter-submit{
  background-color: green;
  color: white;
}

/* ==========================================================
  == Module: Good Practice (CBUW) ==
  Purpose: Good practice form and display tweaks
  ========================================================== */
/*Module styling - Good Practice*/
.readonlyfield_gp {
  background-color: #f0f0f0;
  color: #666;
  border: 1px solid #ccc;
  cursor: not-allowed;
}

/* ==========================================================
  == Module: Implementation Mapping ==
  Purpose: Page-specific styles for implementation mapping screens
  ========================================================== */
/*below code was previously global; scope to the mainContent wrapper to avoid hiding unrelated tables */
/* If your page uses a different wrapper id, adjust the selector accordingly. */
#mainContent_cbuwapplication td:has(#elarp_caseprocessingcomponentotherdescription){
  display:none;
}

/* ==========================================================
  == Module: Testing Partners ==
  Purpose: Styles for Testing Partners area
  ========================================================== */
/*Styling the BUC assign search bar happens on the page script*/

/* ==========================================================
  == Module: CBUW Good Practice (forms) ==
  Purpose: Styles specific to CBUW Good Practice create/edit/detail forms
  ========================================================== */
/*below code was global; scope it to the CBUW good practice main content */
#mainContent_cbuwgoodpractice td:has(#elarp_typeofapplicantorganisationother){
  display:none;
}
/*CBUW Good Practice - basic form insert - TO DELETE*/
#mainContent_cbuwgoodpractice #InsertButton {
  display:none;
}
/*CBUW Good Practice - basic form edit*/
/*temporary disabled*/
/*#mainContent_cbuwgoodpractice #UpdateButton {
  display:none;
}*/
/*CBUW Good Practice - multistep form insert*/
#mainContent_cbuwgoodpractice #NextButton[value="Continue Editing"] {
  display:none;
}

/* ==========================================================
  == Module: CBUW Application ==
  Purpose: Styles for the CBUW Application pages and forms
  ========================================================== */
/*below code was global; scope to the application main content wrapper */
#mainContent_cbuwapplication td:has(#elarp_applicantorganisationtype){
  display:none;
}

/*CBUW Application - basic form insert - TO DELETE*/
#mainContent_cbuwapplication #InsertButton {
  display:none;
}
/*
#mainContent_cbuwapplication #UpdateButton {
  display:none;
}
*/

/*CBUW Application and CBUW Good Practice - multistep create and editform */
#mainContent_cbuwapplication #NextButton[value="Continue Editing"] {
  display:none;
}

  /* Leave as-is, so selectors stay correct*/
  tr:has(label#elarp_syncconcatrelatedtopic_label){ display: none; }
  tr:has(label#elarp_issendfeedbackrequest_label){ display: none; }
  tr:has(label#elarp_issubmitgoodpracticeascompleted_label){ display: none; }
  tr:has(label#elarp_setapplicationasfinished_label){ display: none; }
  tr:has(label#statuscode_label){ display: none; }

/* ==========================================================
  == Module: Governance / Papers Details ==
  Purpose: Page-specific styles for governance/papers details
  ========================================================== */
/* Styling can be found on the specific page due to overlap with other elements in edit form */

/* ==========================================================
  == Module: TCN / Handbook ==
  Purpose: Handbook and TCN-specific styles (scroll-to-top, TOC)
  ========================================================== */
.scrolltotop {
    width: 130px;
    position: fixed;
    right: 50px;
    bottom: 0px;
    color: white;
    border-radius: 12px;
    padding: 11px;
    border: 1px solid #730062;
    font-size: 16px;
    text-align: center;
    background-color: #730062;
}

.scrolltotop:hover {
  color: #730062;
  background-color: transparent;
}

.scrolltotop:focus {
color: white;
}

/* ==========================================================
  == Module: Interactive Map ==
  Purpose: Map container, popup, marker badge and related styles
  ========================================================== */
/* Interactive Map - General Styling */
#map-detail-panel{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

/*TCN - Handbook Table of Contents styling */
#handbook-tcn-toc{
  min-height:200px;
}

  #handbook-tcn-toc ul li{
    list-style: none;
  }

  #handbook-tcn-toc ul li a{
    font-size:24px;
  }

/* Interactive Map - Styles migrated from interactive  map script.js */
.leaflet-marker-icon{transition:transform .18s ease, opacity .18s ease;}
.leaflet-marker-icon.ela-marker-found{transform:scale(1.12);}
.ela-marker-badge{
  position:absolute;
  right:-6px;
  top:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:10px;
  background:rgba(255,255,255,0.95);
  color:#111;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,0.08);
  font-size:12px;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.ela-marker-badge.hidden{display:none;}

/* Detail popup styling (was injected dynamically) */
.ela-detail-popup .leaflet-popup-content-wrapper {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  border-radius:6px;
  padding:8px;
  transform-origin: center center;
}
.ela-detail-popup .leaflet-popup-tip-container {
  display: block;
  pointer-events: none;
  /* clip a rotated square to create a triangle (matches Leaflet default pattern)
     container height should be approximately half the tip square so only the
     triangular portion is visible. */
  width: 18px;
  height: 10px;
  margin: 0 auto;
  overflow: hidden;
}
.ela-detail-popup .leaflet-popup-tip {
  width: 18px;
  height: 18px;
  margin: 0 auto;
  /* rotate the square so the visible clipped portion points downward toward the marker */
  transform: rotate(-45deg);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.ela-detail-popup .leaflet-popup-tip, .ela-detail-popup .leaflet-popup-content-wrapper { margin: 0; }
.ela-detail-popup .leaflet-popup-content-wrapper { transform: none; }
.ela-detail-popup .leaflet-popup-content { overflow:auto; }
.ela-detail-popup h2 { margin-top: 0; font-size: 1.1rem; }

/* Constrain popup inner content to avoid layout breaks from long strings
   The JS will set a max-width on the wrapper; these rules ensure content wraps
   and respects box-sizing so measurements are predictable. */
.ela-detail-popup, .ela-detail-popup .leaflet-popup-content-wrapper, .ela-detail-popup .leaflet-popup-content {
  box-sizing: border-box;
  max-width: 720px; /* fixed pixel fallback */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ela-detail-popup .leaflet-popup-content { white-space: normal; }

/* Enter / exit animations for detail popup */
@keyframes ela-popup-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes ela-popup-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.98); } }
.ela-detail-popup .leaflet-popup-content-wrapper { animation-duration: 220ms; animation-fill-mode: both; }
.ela-detail-popup.ela-popup-open .leaflet-popup-content-wrapper { animation-name: ela-popup-in; }
.ela-detail-popup.ela-popup-closing .leaflet-popup-content-wrapper { animation-name: ela-popup-out; }

/* Ensure popups render above map controls (filters) so they are not visually blocked */
/* Leaflet uses panes; enforce a very high z-index for popup panes and popup elements. */
.leaflet-popup-pane,
.leaflet-popup,
.ela-detail-popup {
  z-index: 999999 !important;
}

/* Keep control containers lower than popups so filters do not cover popups */
.ela-control-container,
.leaflet-control {
  z-index: 10000 !important;
}

/* ==========================================================
  == Module: Interactive Map - Popup & Controls ==
  Purpose: Popup inner content rules and helpers for map controls/collapsible regions
  ========================================================== */
.ela-popup-header{ margin-bottom:6px; font-size:0.95em; }
.ela-popup-table{ width:100%; border-collapse:collapse; font-size:0.95em; }
.ela-popup-row{ vertical-align:top; }
.ela-popup-cell{ padding:6px 0; }
.ela-popup-link{ color:var(--ela-brand); text-decoration:none; font-size:1em; }
.ela-popup-link:focus, .ela-popup-link:hover{ text-decoration:underline; }

.ela-control-container{ background:#fff; padding:6px; }
.ela-control-button, .ela-collapsible-toggle{ width:100%; text-align:left; border:none; background:none; cursor:pointer; font-weight:600; font-size:0.95rem; padding:0.25rem 0; }
.ela-collapsible{ display:none; max-height:200px; overflow-y:auto; margin-top:0.5rem; }
.ela-collapsible.is-open{ display:block; }
.ela-list-unstyled{ list-style:none; padding:0; margin:0; }
.ela-control-label{ margin-left:6px; }

/* ==========================================================
  == Module: Comparison Results ==
  Purpose: Table/list helpers used by the comparison wizard and exports
  ========================================================== */
.ela-results-table{ width:100%; border-collapse:collapse; border:1px solid #ddd; font-size:0.95rem; }
.ela-results-table th, .ela-results-table td{ border:1px solid #ddd; padding:6px; vertical-align:top; }
.ela-results-list{ list-style:none; padding-left:0; margin:0; }
.ela-results-item{ margin-bottom:8px; }
.gp-result-link{ color:var(--ela-brand); text-decoration:none; }
.gp-result-link:hover, .gp-result-link:focus{ text-decoration:underline; }

/* ==========================================================
  == Module: Comparison Panel Layout ==
  Purpose: Layout helpers for the fullscreen compare panel and results wrapper
  ========================================================== */
.ela-page-row{ margin:0; min-height:auto; padding:8px; }
.ela-map-column{ height:100%; }
.ela-btn-detail-close{ float:right; margin-bottom:10px; }

.ela-comparison-panel{ width:100%; height:100%; z-index:1050; overflow-y:auto; display:none; }
.ela-comparison-panel[aria-hidden="false"]{ display:block; }
.ela-wizard-main{ display:block; }
.ela-wizard-title{ color:#000; font-weight:600; }
.ela-checkbox-container{ max-height:300px; overflow-y:auto; border:1px solid #ccc; padding:8px; border-radius:4px; background:#fff; }
.ela-topics-list{ max-height:340px; }
.ela-results-wrapper{ overflow:auto; max-height:400px; border:1px solid #ddd; padding:8px; background:#fff; }