/*    custom.css 

      id selector uses # character	
      class selector uses “.” character.
*/

      /* Dashcards formatting  */
      .card-body {
        overflow-y: hidden;  /* Ensure no vertical scrollbars */
        height: auto;        /* Allow card to expand based on content */
      }
      
      .dashcard-output {
        text-align: center;
        font-size: 24px; /* Adjust this value to your preference */
        font-weight: bold; /* Optional: Bold the text */
        margin: 0 auto; /* Center the text */
      }
      

      .sidebar_heading {
        text-align: center;     /* Center the text */
        font-weight: bold;      /* Make the text bold */
      }


      /* Hide the empty label generated by selectInput inside the no-label-select-container */
      .no-label-select-container label:empty {
        display: none; /* Ensures the label is not visible */
        height: 0;     /* Ensures it does not take up vertical space */
        margin: 0;     /* Remove any potential margin */
        padding: 0;    /* Remove any potential padding */
      }

      /* Remove margin and padding from the child form-group shiny-input-container */
      .no-label-select-container .form-group {
        margin: 0;  /* Remove any margin */
        padding: 0; /* Remove any padding */
      }
      
      /* Dynamically size the select input based on its content */
      .no-label-select-container select {
        width: auto;          /* Use auto width */
        max-width: max-content; /* Maximum width based on the widest content */
        min-width: min-content; /* Minimum width based on the narrowest content */
      }
      
      /* Table captions default to bottom with bslib */
      caption { caption-side:top !important; } 
      
      /* Reduce space between elements above and below an hr. Default is like 2em with bslib */
      #global_sidebar hr {
          margin-top: 0.2em;
          margin-bottom: 0.2em;
      }


        
        /* Styling for download format and actionButton */      
        .form-inline > .shiny-input-container {
          display: inline-block !important;
          vertical-align: middle;
        }




        .content-wrapper { background-color: #fff; }
        

                
        /* Add an underline to the table header cells */
        table.dataTable thead th {
          border-bottom: 1px solid rgba(0, 0, 0, 0.15);

        }

        /* Target all table data cells and set font size */
        table.dataTable tbody td {
          font-size: 0.875rem; /* Set font size for all table data cells */
        }

        
        /* Styling for 'Totals' row of datatables that have them */
        table.dataTable tr.aggregate-row td {
          font-weight: bold !important;
          border-top: 1px solid black
        }
        
        
            .wrap {
              white-space: normal;  /* Allow text to wrap within cells */
            }
            .nowrap {
              white-space: nowrap;  /* Prevent text from wrapping */
            }
        
        
        /* Styling for download format and actionButton */      
        .inline-elements > .form-group {
          display: inline-block !important;
          margin-right: 0px;
          vertical-align: middle;
        }
        
        .inline-elements > .shiny-download-link {
          display: inline-block !important;
          margin-right: 0px;
          vertical-align: middle; /* Keep middle alignment for the button */
        }
        
        /* So inline elements don't wrap */
        .inline-elements {
          white-space: nowrap;
        }
        
        /* Additional styling for the select element or its container to adjust alignment */
        .inline-elements > .shiny-input-container {
          display: inline-block;
          text-align: left;
          width: 80px;
          margin-top: -6px; /* To fix centering of select relative to button */
          vertical-align: middle;
        }

      .has-content {
        position: absolute;
        top: 100px;
        right: 100px;
        background-color: #f2f2f2; /* Light grey background */
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ddd; /* Slight border */
        z-index: 100; /* Ensure it sits above other content */
      }
      
        /* https://stackoverflow.com/questions/36469631/how-to-get-leaflet-for-r-use-100-of-shiny-dashboard-height 
          Needed otherwise map will show 400px height being the leaflet default
          
          Applying it to all leaflets as that makes sense for now, could apply based on class 
          But then it won't work if the class changes for different use cases
        */
        

        /*.leaflet { height: calc(100vh - 150px) !important; } */
        /*
        #playback_map { height: calc(100vh - 120px) !important; }
        #explorer_map { height: calc(100vh - 120px) !important; }
        */

        /* Controls positions of text overlays onto maps */
        .map-overlay {
          position: absolute;
          top: 7%;
          right: 2%;
          z-index: 400;
          background-color: rgba(255, 255, 255, 0.8);
          padding: 5px;
          border-radius: 5px;
          text-align: right;
        }
        
        .map-overlay-warning {
          position: absolute;
          bottom: 1%;
          left: 25%;
          z-index: 1000;
          background-color: #ffcc66;
          padding: 5px;
          border-radius: 5px;
        }

        /* If row is clickable e.g. copy UUID to clipboard, make it obvious */
        .clickable-row {
          cursor: pointer;
        }

      .observation_image_viewer_carousel {
        width:100%; 
        max-height: 500px; 
        object-fit: contain; 
        display: block; 
        margin-left: auto; 
        margin-right: auto;
      }

        /* For the popup modal where you click observation and it brings up images */
        
        .image-container {
          text-align: center; 
          /* Additional styles to ensure the container is full width or centered as needed */
        }
        /* Each image within container  */
        .image-container img {
          max-width: 100%; /* Adjust the width as needed */
        
          margin: 0.1%; /* Adds a little space between images */
          /*  display: inline-block; */  /* Display images side by side */
          vertical-align: middle; /* Align images if they have different heights */
        }
    

        /* To do with slider image layout */
        #slickSlider img {
          max-width: 1200px;  /* Limit width, not height, to maintain aspect ratio */
          height: auto;  /* Maintain aspect ratio */
          margin: auto;  /* Center the image horizontally */
        }
        
        .slick-slide {
          display: flex;
          justify-content: center;
          align-items: center; /* Center the image vertically */
        }
        
        
        
       /* Adjusted leaflet height for printing */
        @media print {
          .leaflet {
            height: calc(100vh - 220px); /* Get leaflet to print on same page as nav bar*/
          }
        }