/* Style setup for desktop screen.
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
   position: relative;
}

html,
body {
   width: 100%;
   height: 100%;
   background-color: White;
   padding: 0;
   margin: 0;
   overflow: hidden;

   /* Lay out infoWindows in GMP app.  This is using predefined class names that
   GMP will use.  They are subject to change by GMP, so it is recommended to use a custom class for
   for the infoWindows. 
   */

   /*The "chrome" container — wraps the close button and edges of the InfoWindow.*/
   .gm-style .gm-style-iw-chr {  
      position: absolute;
      display: flex;
      top: 0;
      right: 0;
   }

   /*Container inside the main InfoWindow — contains the content and background. */
   .gm-style .gm-style-iw-c { /* Controls top and edge styles. */
      padding: 15px !important; /* Remove default padding */
      background-color: FloralWhite;
      border: 1px solid black;
   }

   /*The content wrapper div that contains your HTML (set via infoWindow.setContent()).*/
   .gm-style .gm-style-iw-d {
      overflow: hidden !important; /* Hide scrollbars */
      background-color: FloralWhite;
      top: 0px !important; /* Suppress space at top of infowindow. */
   }

   /*Targets the small triangular tail/callout pointer of the InfoWindow (appears to connect the window to the map marker).*/
   .gm-style .gm-style-iw-tc:after {
      background-color: FloralWhite !important;
   }

   /* Custom class for InfoWindows, used in the School District infowindows.  Another option to research for 
   full control (e.g. animation) would be using the OverlayView api. 
   .custom-info-window {
     font-family: "Calibri", sans-serif;
     padding: 0px;
     max-width: 250px;
     background-color: FloralWhite;
   }
   */

   /*Classes for InfoWindows. */
   .custom-info-window {
     font-family: Calibri;
     width: auto; /* Auto size the infoWindow. */
     max-width: 90vw; /* Do not exceed width of map window. */
     background-color: floralwhite;
     border-radius: 6px;
     overflow: hidden;
     position: relative;
   }

   .info-header {
     padding: 5px 5px 0px 5px; /* top, right, bottom, left */
     font-size: 20px;
     font-weight: bold;
     display: flex;
     justify-content: space-between;
     align-items: baseline; /* Aligns text baselines. */
   }

   .close-btn {
     font-size: 18px;
     font-weight: bold;
     cursor: pointer;
     color: #444;
     line-height: 1;
     padding-left: 25px;
   }

   .close-btn:hover {
     color: red;
   }

   .info-divider {
     border-top: 2px solid black;
     margin: 0 5px 0 5px; /* top, right, bottom, left */
   }

   .info-body {
     padding: 5px 5px 5px 5px; /* top, right, bottom, left */
     font-size: 16px;
     font-weight: bold;
   }

   .custom-info-window .info-table {
     border-collapse: collapse;
     width: 100%;
     margin-top: 5px;
   }

   .custom-info-window td {
     font-size: 14px;
     font-weight: normal;
     padding: 2px 6px;        /* spacing inside cells */
     text-align: left;         /* start-aligned text */
     border-bottom: 1px solid #ccc; /* optional row divider */
   }

   .custom-info-window th {
     font-size: 16px;
     font-weight: bold;
     background-color: #f0f0f0; /* optional header shading */
   }

   /*Classes for Advanced Filter and AI Demo dialogs. */

   .advanced-filter-dialog {
     display: none;
     position: absolute;
     top: 200px;
     left: 75%;
     width: 300px;
     min-width: 150px;
     min-height: 100px;
     background-color: white;
     border: 1px solid black;
     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
     z-index: 10000;
     border-radius: 8px;
     resize: none; /* Disable built-in resizing to use custom handle */
     overflow: hidden;
   }

   .AIDemo-dialog {
     display: none;
     position: absolute;
     top: 200px;
     left: 60%;
     width: 700px;
     min-width: 150px;
     min-height: 100px;
     background-color: white;
     border: 1px solid black;
     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
     z-index: 10000;
     border-radius: 8px;
     resize: none; /* Disable built-in resizing to use custom handle */
     overflow: hidden;
   }


   .dialog-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
     background-color: #ebe1e1;
     color: black;
     cursor: move;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     user-select: none;
   }

   .header-buttons {
     display: flex;
     gap: 4px; /* space between minimize and close buttons */
   }

   .minimize-btn,
   .close-btn {
     cursor: pointer;
     font-size: 24px;
     font-weight: bold;
     line-height: 1;
     margin: 0;
     padding: 0 4px;
   }

   .dialog-body {
     padding: 10px;
   }

   .AIDemodialog-body {
     padding: 10px;
     max-height: 50vh;
     overflow-y: auto;
     padding-right: 8px;
   }

   #AIDemoresults table {
     border-collapse: collapse;        /* Prevent double borders */
     border: 1px solid #ccc;           /* Outer table border */
     width: 100%;                      /* Optional for layout */
     font-family: Calibri, sans-serif;
   }

   #AIDemoresults th {
     font-size: 16px;
     font-weight: bold;
     font-family: calibri;
     background-color: #f9f9f9;
     border: 1px solid #ccc;
     padding: 6px;
     text-align: left;
   }

   #AIDemoresults tr {
     font-size: 14px;
     font-weight: normal;
     font-family: calibri;
     border: 1px solid #ccc;
     padding: 6px;
     text-align: left;
   }

   #AIDemoresults td {
     font-size: 14px;
     font-weight: normal;
     font-family: calibri;
     border: 1px solid #ccc;
     padding: 6px;
     text-align: left;
   }

   /* Resize handle */
   .resize-handle {
     width: 16px;
     height: 16px;
     background: #ccc;
     position: absolute;
     right: 2px;
     bottom: 2px;
     cursor: se-resize;
     border-bottom-right-radius: 8px;
   }

   .AIDemo-dialog.minimized .AIDemodialog-body,
   .AIDemo-dialog.minimized #AIDemoresizeHandle {
    display: none;
   }

   /*Classes for STEM Demo dialogs. */

   .STEMDemo-dialog {
     display: none;
     position: absolute;
     top: 200px;
     left: 70%;
     width: 450px;
     min-width: 150px;
     min-height: 100px;
     background-color: white;
     border: 1px solid black;
     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
     z-index: 10000;
     border-radius: 8px;
     resize: none; /* Disable built-in resizing to use custom handle */
     overflow: hidden;
   }

   .STEMDemodialog-body {
     padding: 10px;
     padding-right: 20px;
     max-height: 50vh;
     overflow-y: auto;
     padding-right: 8px;
   }

   .STEMDemo-dialog.minimized .STEMDemodialog-body,
   .STEMDemo-dialog.minimized #STEMDemoresizeHandle {
    display: none;
   }

   .STEMDemo-dialog.minimized {
     height: auto !important;
     overflow: hidden;
   }

   .STEMDemoyearslider-labels {
     font-size: 14px;
     font-weight: normal;
     font-family: calibri;
     display: flex;
     justify-content: space-between; /* keeps labels aligned under slider */
     margin-top: 0px;   /* space above labels if needed */
     margin-bottom: 12px; /* <-- controls extra space below */
   }

   #STEMPerformanceConfigtable,
   #STEMColorAssignmentstable {
     max-width: calc(100% - 20px); /* leave room for resize handle */
     border-collapse: collapse;
     border: none;
   }

   #STEMPerformanceConfigtable th,
   #STEMColorAssignmentstable th {
     border-collapse: collapse;
     border: 1px solid #ccc;
     text-align: center;
     vertical-align: middle;
     font-weight: bold;
     font-size: 14px;
     font-family: calibri;
     background-color: #f5f5f5;
   }

   #STEMPerformanceConfigtable td,
   #STEMColorAssignmentstable td {
     border-collapse: collapse;
     border: 1px solid #ccc;
     text-align: center;
     vertical-align: middle;
     font-weight: normal;
     font-family: calibri;
     font-size: 14px;
   }

   .table-wrapper {
     display: flex;
     align-items: center;  /* center rotated label */
     margin-top: 12px; 	/*spacing above table */
   }

   .table-label {
     writing-mode: vertical-rl;
     transform: rotate(180deg);
     font-weight: bold;
     font-family: calibri;
     font-size: 14px;
     text-align: center;
     line-height: 1;       /* helps vertical alignment */
     padding: 4px;         /* fine-tune position if needed */
     background-color: #f0f0f0;
     border: 1px solid #ccc;   /* match table border */
     position: relative;
     top: 16px;
   }

   #STEMColorAssignmentstable th:first-child {
     vertical-align: middle;    /* center top-left header relative to table rows */
   }

}