/*
 Theme Name:   Understrap Child
 Theme URI:    https://understrap.com
 Description:  Understrap Child Theme
 Author:       the Understrap Contributors
 Author URI:   https://github.com/understrap/understrap-child/graphs/contributors
 Template:     understrap
 Version:      1.2.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/

/* In your child theme's CSS file (or a custom CSS file) */

/* Style for the main Local Authority Details card */
.la-details-card {
    margin-bottom: 20px;
    border: 1px solid #e9ecef; /* Optional: Add a subtle border */
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Optional: Add a subtle shadow */
}

.la-details-card .card-header {
    background-color: #f8f9fa; /* Light background for the header */
    padding: 10px 15px;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0.25rem 0.25rem 0 0;
    font-weight: bold;
}

.la-details-card .card-body {
    padding: 15px;
}

.la-details-card p {
    margin-bottom: 0.75rem;
}

/* Style for the Contacts card */
.contacts-card {
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.contacts-card .card-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0.25rem 0.25rem 0 0;
    font-weight: bold;
}

.contacts-card .card-body {
    padding: 15px;
}

.contacts-card ul {
    list-style: none;
    padding-left: 0;
}

.contacts-card li {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.contacts-card li:last-child {
    border-bottom: none;
}

/* Style for the Statistics card */
.statistics-card {
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.statistics-card .card-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0.25rem 0.25rem 0 0;
    font-weight: bold;
}

.statistics-card .card-body {
    padding: 15px;
}

.statistics-card .table {
    margin-bottom: 0; /* Remove default table margin */
}

.nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.9rem; /* Adjust size as needed */
    padding: 0.5rem 0.75rem; /* Reduce padding */
}

/* Style for the Chart card */
.chart-card {
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.chart-card .card-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0.25rem 0.25rem 0 0;
    font-weight: bold;
}

.chart-card .card-body {
    padding: 15px;
}

/* Default style for the search input (mobile first) */
#la-search {
    width: 100%; /* Take available width */
}

/* Apply fixed width only on larger screens (e.g., medium breakpoint and up) */
@media (min-width: 768px) {
    #la-search {
        width: 250px;
    }
}

/* Style for Correspondence cards */
.correspondence-card {
    margin-bottom: 15px;
    border: 1px solid #add8e6; /* Light Blue */
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background-color: #f0f8ff; /* Light Alice Blue */
    position: relative;
    border-left: 5px solid #ff1eb0; /* Slightly darker blue for left border */
}

.correspondence-card .card-header {
    background-color: #e0f2f7; /* Light Cyan */
    padding: 10px 15px;
    border-bottom: 1px solid #add8e6; /* Light Blue */
    border-radius: 0.25rem 0.25rem 0 0;
    font-weight: bold;
}

.fa-envelope:before{
    font-family: Font Awesome;
      }

.correspondence-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #1e90ff !important;; /* Slightly darker blue for top indicator */
    border-radius: 0.25rem 0.25rem 0 0;
}

/* Style for Review cards */
.review-card {
    margin-bottom: 15px;
    border: 1px solid #98fb98; /* Pale Green */
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background-color: #f0fff0; /* Honeydew */
    position: relative;
    border-left: 5px solid #3cb371; /* Medium Sea Green for left border */
}

.review-card .card-header {
    background-color: #ccffcc; /* Very Light Green */
    padding: 10px 15px;
    border-bottom: 1px solid #98fb98; /* Pale Green */
    border-radius: 0.25rem 0.25rem 0 0;
    font-weight: bold;
}

.review-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #3cb371; /* Medium Sea Green for top indicator */
    border-radius: 0.25rem 0.25rem 0 0;
}

/* Optional: Style for icons (adjust based on your icon library) */
.card-header .fas, .card-header .bi {
    margin-right: 0.5em;
}

.card {
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.card-header {
    background-color: #f8f9fa;
    font-weight: bold;
    font-size: 1.25rem;
}

.card-body p {
    margin: 0.5rem 0;
}

.email-highlight {
    color: #007bff;
    font-weight: bold;
    font-size: 1.1rem;
}

.population-card {
    background-color: #e9ecef;
}

.button {
    margin: 0.2rem;
    background-color: #007bff;
    color: white;
}


.la-details-heading {
    font-size: 0.7em;
}


/* The outer container that provides the scrollbar */
.chart-horizontal-scroll-container {
    /* Set a maximum height for the visible chart area */
    max-height: 600px; /* ADJUST THIS VALUE AS NEEDED */
  
    /* OR use a fixed height if preferred */
    /* height: 500px; */
  
    /* Crucial: Show scrollbar ONLY when content overflows */
    overflow-y: auto;
  
    /* Good practice for containing positioned elements like the canvas/wrapper */
    position: relative;
  
    /* Ensure it takes up available width */
    width: 100%;
  
    /* Optional: Add a border for debugging layout */
    /* border: 1px solid blue; */
  }
  
  /* The wrapper div directly around the canvas */
  .chart-canvas-wrapper {
    /* Necessary for Chart.js responsive sizing to work correctly within */
    position: relative;
  
    /* Height is set dynamically by JavaScript - DO NOT set height/max-height here in CSS */
  
    /* Optional: Add a border for debugging layout */
    /* border: 1px solid green; */
  }
  
  /* Styling for the canvas element itself */
  #nationalComparisonChart { /* Or use a class if preferred */
    /* Prevent extra space below the canvas */
    display: block;
  
    /* Make the canvas width responsive to its container */
    width: 100%;
  
    /* Height is determined by Chart.js filling the wrapper */
    max-width: 100%; /* Ensure it doesn't overflow horizontally */
  
     /* Optional: Add a border for debugging layout */
    /* border: 1px solid red; */
  }
  

  /* Highlight style for items in the 'No Data Reported' list */
.no-data-la-list li.no-data-highlight {
    background-color: #fcfc08; /* Bootstrap's warning background color (light yellow) */
    border: 1px solid #010101; /* Bootstrap's warning border color */
    border-radius: 0.2rem; /* Optional: slightly rounded corners */
    transition: background-color 0.3s ease; /* Optional: smooth transition */
  }
  
  /* Optional: Make the link within the highlighted item slightly bolder */
  .no-data-la-list li.no-data-highlight a {
      font-weight: 600; /* Bootstrap's semi-bold */
      color: #856404; /* Bootstrap's warning text color */
  }
  
  /* Ensure the scroll container styles are still present */
  .chart-horizontal-scroll-container {
      max-height: 600px;
      overflow-y: auto;
      position: relative;
      width: 100%;
  }
  .chart-canvas-wrapper {
      position: relative;
  }
  #nationalComparisonChart {
      display: block;
      width: 100%;
      max-width: 100%;
  }

  /* ============================================ */
/* == Custom Bootstrap Tooltip Styles        == */
/* == (To match Chart.js white tooltips)     == */
/* ============================================ */

/* Target the inner part of the Bootstrap tooltip */
.tooltip .tooltip-inner {
    background-color: #ffffff; /* White Background */
    color: #495057;           /* Dark Gray Text (e.g., Bootstrap's $gray-700) */
    border: 1px solid #dee2e6; /* Light Gray Border (e.g., Bootstrap's $gray-300) */
    opacity: 1;               /* Ensure full opacity if needed */
    /* Optional: Adjust padding if desired */
    /* padding: 0.4rem 0.8rem; */
    /* Optional: Add a subtle shadow if you like */
    /* box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); */
}

/* --- Style the Tooltip Arrow --- */
/* This ensures the little triangle pointing to the element matches the background */
/* Note: Adding the thin border to the arrow itself with pure CSS override is tricky, */
/* so we primarily focus on matching the background color. */

/* Tooltip is ABOVE the button (arrow points down) */
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #ffffff;
}

/* Tooltip is BELOW the button (arrow points up) */
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #ffffff;
}

/* Tooltip is to the LEFT (arrow points right) */
.tooltip.bs-tooltip-start .tooltip-arrow::before {
     border-left-color: #ffffff;
}

/* Tooltip is to the RIGHT (arrow points left) */
.tooltip.bs-tooltip-end .tooltip-arrow::before {
     border-right-color: #ffffff;
}

/* --- End Custom Bootstrap Tooltip Styles --- */