/*
====================================================================
  Yearbook Application Stylesheet (yearbook.css)
====================================================================
  Final Version by EnerGPT

  PURPOSE:
  This file contains only the necessary custom styles for the GTO
  Yearbook application. It is designed to work with the modern
  Bootstrap 5 and DataTables libraries, which are loaded separately.
  All redundant and outdated code has been removed.
====================================================================
*/


/*
--------------------------------------------------------------------
  1. GLOBAL & CORE LAYOUT
--------------------------------------------------------------------
  These styles define the basic page layout, including the primary
  font, background color, and the main containers for the map
  and the data table.
--------------------------------------------------------------------
*/

/*
  ENERGPT FIX for iFrame Scrollbar:
  This rule prevents a horizontal scrollbar from appearing when the
  page is embedded in an iframe. The vertical scrollbar of the iframe
  can sometimes cause a slight overflow, which this cleanly hides.
*/
html, body {
    overflow-x: hidden;
}

body {
    /*
     * Sets the primary font for the entire application. The '!important'
     * flag is used here to ensure this custom font choice overrides
     * Bootstrap 5's default font.
    */
    font-family: 'Karla', sans-serif !important;
    background-color: #f1f1f1;
}

.maprow {
    /*
     * This class defines the container that holds the map.
     * `height: 55vh` makes it take up 55% of the browser window's height.
     * `position: relative` is required for the absolutely positioned
     * #map element inside it.
    */
    height: 55vh;
    position: relative;
}

#map {
    /*
     * This styles the map element itself, making it fill its parent
     * `.maprow` container completely.
    */
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.datatable-container {
    /*
     * This styles the container that wraps our data table, giving it a
     * clean, card-like appearance. The layout (margins, etc.) is now
     * handled by Bootstrap's grid system in index.html.
    */
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 0.375rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow-x: auto; /* Ensures table can scroll horizontally on small screens */
}


/*
--------------------------------------------------------------------
  2. MAPBOX GL POPUP STYLING
--------------------------------------------------------------------
  These rules customize the popups that appear when a user clicks
  on a map marker. They override default Mapbox styles to match the
  application's look and feel.
--------------------------------------------------------------------
*/

.mapboxgl-popup-content {
    /*
     * The main container for the popup. We are setting the font,
     * padding, and a soft shadow to make it stand out.
    */
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    padding: 1rem !important; /* '!important' is needed to override Mapbox's inline styles */
    max-width: 320px;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mapboxgl-popup-content .project_title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #00587d;
    line-height: 1.2;
}

.mapboxgl-popup-content .partner_location {
    font-style: italic;
    color: #555;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.mapboxgl-popup-content .callout_label {
    color: #666;
    font-size: 0.85rem;
    font-weight: bold;
}

.mapboxgl-popup-content .popup_hero {
    /* Styles the main image inside the popup */
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.mapboxgl-popup-content hr {
    /* A simple horizontal rule for separating content */
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    border: 0;
    border-top: 1px solid #ebebeb;
}


/*
--------------------------------------------------------------------
  3. DATATABLES OVERRIDES
--------------------------------------------------------------------
  These styles provide minor tweaks to the new DataTables library
  to ensure it integrates smoothly with our application layout.
--------------------------------------------------------------------
*/

#projects-datatable {
     width: 100% !important;
}

table.dataTable th,
table.dataTable tbody td {
    font-size: 14px;
    vertical-align: middle; /* Aligns cell content vertically */
}

table.dataTable th {
    /* Custom styling for the table header cells */
    font-weight: 700;
    color: #444;
}

.dataTables_filter input {
    /*
     * This provides custom styling for the search input box created by
     * DataTables to ensure it looks consistent with other form elements.
    */
    border: 1px solid #ced4da;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset;
    height: 38px;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


/*
--------------------------------------------------------------------
  4. CUSTOM MAP CONTROLS
--------------------------------------------------------------------
  These styles format the custom "US" and "AK" buttons that are
  added to the map's control panel.
--------------------------------------------------------------------
*/

.mapboxgl-ctrl-group .jump-button-us,
.mapboxgl-ctrl-group .jump-button-ak {
    font-family: 'Karla', sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 29px;   /* Match the default control button width */
    height: 29px;  /* Match the default control button height */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}