/* ============================================================
   MERCED DASHBOARD - CUSTOM STYLES
   ============================================================ */

/* ================================
   CSS VARIABLES
   ================================ */
:root {
  --font-sans: 'Lato', sans-serif;
  --bg-gray-400: #ced4da;
  --cyan: #1696d2;
  --shadow: 0 2px 8px #888, 0 1.5px 3px rgba(0, 0, 0, 0.08);
}

a {
  color: var(--cyan);
}

/* ================================
   DASHBOARD LAYOUT OPTIMIZATION
   ================================ */

/* Reduce spacing in main grid containers */
.bslib-grid {
  gap: 0.5rem !important; /* Reduce gap between grid items */
}


/* Allow plotly SVG to expand for axis labels */
.plotly {
  overflow: visible !important;
}


/* ================================
   TYPOGRAPHY - PLOT ELEMENTS
   ================================ */

/* Plot title - smaller with bold */
.plot-title {
  text-align: left;
  font-weight: 700; /* Bold for emphasis */
  color: #222;
  margin-bottom: 2px;
  line-height: 1.2;
  font-size: clamp(16px, 1.3vw, 17px); /* Smaller than before */
}

/* Plot subtitle - smaller */
.plot-subtitle {
  text-align: left;
  font-weight: 400;
  font-style: italic !important;
  color: #222;
  margin-top: 0;
  margin-bottom: 4px;
  line-height: 1.2;
  font-size: clamp(14px, 1.1vw, 15px); /* Smaller than before */
}

/* Plot X-axis label */
.plot-x-label {
  text-align: center;
  color: #333;
  font-weight: 500;
  margin-top: 6px;
  line-height: 1.2;
  font-size: clamp(12px, 1vw, 16px);
}

/* Plot caption/footer text */
.plot-caption {
  text-align: left;
  color: #555;
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.2;
  font-size: clamp(10px, 0.9vw, 14px);
}

/* Plot container spacing */
.plot-block {
  margin-bottom: 16px; /* Reduced from 24px for tighter spacing */
}


/* ================================
   DASHBOARD CARD HEADINGS
   ================================ */

/* Metric description card styling */
.metric-card {
  padding: 0.5rem !important; /* Reduced to align with chart card padding */
  border: none !important; /* Remove borders */
}

/* Reduce bottom margin for metric description card wrapper */
.metric-description-card {
  margin-bottom: 0.75rem !important; /* Add breathing room between description and charts */
}

/* Hide expand icon on metric description cards */
.metric-card > bslib-tooltip {
  display: none !important;
}

/* Main card title (e.g., "Employment Opportunities") */
.h4 {
  font-size: clamp(26px, 2.5vw, 32px) !important; /* Larger for prominence */
  font-weight: 700 !important;
  color: #222 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

/* Reduce top margin on h4 in metric cards */
.metric-card .h4 {
  margin-top: 0 !important;
}

/* Card subtitle (e.g., "Share of adults ages 25 to 54 who are employed") */
.h5 {
  font-size: clamp(20px, 1.8vw, 24px) !important; /* Larger subtitle */
  font-weight: 400 !important;
  color: #333 !important;
  margin-bottom: 1rem !important;
  line-height: 1.3 !important;
}


/* ================================
   DOWNLOAD BUTTONS
   ================================ */

/* Button container layout */
.custom-download {
  display: flex !important;
  flex-direction: row !important;
  text-align: right !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 6px !important;
  width: 100%;
  margin-top: 0.5rem;
  flex-wrap: wrap !important;
}

/* Button styling */
.custom-download .btn,
.custom-download button,
.custom-download a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  padding: 5px 7px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  color: white !important;
  background-color: #156082 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

/* Button hover effect */
.custom-download .btn:hover,
.custom-download button:hover,
.custom-download a:hover {
  background-color: #2747a3 !important;
  transform: translateY(-1px);
}


/* ================================
   SIDEBAR STYLING
   ================================ */

/* Main sidebar container - light green background */
.sidebar {
  background-color: #e8f4ed !important;
  border-right: 1px solid #b8d9c5 !important;
  padding: 1.5rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Main sidebar heading (Explore Merced's Data) */
.sidebar .h3 {
  color: #222 !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
  font-size: 1.25rem !important; /* Slightly smaller than default */
}

/* Section headings */
.sidebar .h4 {
  color: #222 !important;
  font-weight: 600 !important;
  color: #222 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.5rem !important;
  margin-top: 1.25rem !important;
  font-size: 1rem !important; /* Slightly smaller */
}

/* First section heading (less top margin) */
.sidebar section:first-child .h4 {
  margin-top: 0 !important;
}

/* Italic descriptive text */
.sidebar em {
  color: #333 !important;
  font-size: 0.7rem !important;
  display: block !important;
  margin-bottom: .5rem !important;
  line-height: 1.4 !important;
}

/* Dropdown/select elements */
.sidebar .form-select {
  font-size: .8rem !important;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid #b8d9c5 !important;
  border-radius: 0.375rem !important;
  background-color: #ffffff !important;
  color: #333 !important;
  width: 100% !important;
}

.sidebar .form-select:focus {
  border-color: #569469 !important;
  box-shadow: 0 0 0 0.2rem rgba(86, 148, 105, 0.25) !important;
  outline: none !important;
}

/* Radio button styling */
.sidebar .form-check {
  margin-top: 0.5rem !important;
  padding-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0.5rem !important;
}

.sidebar .form-check-input {
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin-top: 0 !important;
  margin-right: 0.5rem !important;
  cursor: pointer !important;
  border: 2px solid #569469 !important;
  flex-shrink: 0 !important;
}

.sidebar .form-check-input:checked {
  background-color: #569469 !important;
  border-color: #569469 !important;
}

.sidebar .form-check-input:focus {
  border-color: #569469 !important;
  box-shadow: 0 0 0 0.2rem rgba(86, 148, 105, 0.25) !important;
}

.sidebar .form-check-label {
  font-size: .85rem !important;
  color: #333 !important;
  cursor: pointer !important;
  padding-left: 0 !important;
  line-height: 1.2 !important;
  margin-bottom: 0 !important;
}

/* Section spacing */
.sidebar section {
  margin-bottom: 0rem !important; /* No spacing between sections */
}


/* ================================
   MAIN PANEL - CARDS & LAYOUT
   ================================ */

/* Remove outline around main panel */
.dashboard-page {
  border: none !important;
  box-shadow: none !important; /* optional: removes the shadow too */
}

/* Add outline to plot-panel (entire metric section) */
.plot-panel {
  border: 1px solid #ddd !important;
  border-radius: 0.125rem !important;
  padding: 0.75rem 0.25rem 0.25rem 0.25rem !important; /* Add more top padding to lower description text */
  background-color: white !important;
  margin-bottom: 1rem !important; /* Reduce spacing between plot panels */
}

/* Remove outline from inner metric description card */
.plot-panel > .bslib-card {
  border: none !important;
  box-shadow: none !important;
  margin-bottom: -1rem !important;
}

/* Also remove outline from the wrapper grid card */
.dashboard-page > .bslib-grid > .bslib-card {
  border: none !important;
}

/* Reduce spacing between cards - allow charts to use more space */
.bslib-card {
  margin-bottom: 1rem !important; /* Reduced from 2rem */
}


/* Move expand icon to top-right */
.bslib-full-screen-enter {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 10 !important;
}

/* Transparent overlay for fullscreen mode */
#bslib-full-screen-overlay {
  z-index: 1071 !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

/* Close button for expanded view - top right */
.bslib-full-screen-exit {
  position: fixed !important;
  top: 4.5rem !important;
  right: 1rem !important;
  z-index: 1072 !important;
  padding: 0.5rem 1rem !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid #333 !important;
  border-radius: 0.375rem !important;
  color: #333 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
  pointer-events: auto !important;
}

.bslib-full-screen-exit:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  border-color: #000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-1px) !important;
}

.bslib-full-screen-exit:focus {
  outline: 2px solid #569469 !important;
  outline-offset: 2px !important;
}

.bslib-full-screen-exit svg {
  width: 20px !important;
  height: 20px !important;
}

/* Hide expand button on outer container and metric description card */
.dashboard-page > .bslib-grid > .bslib-card[data-fill="false"] > bslib-tooltip {
  display: none !important;
}

.plot-panel > .bslib-card > bslib-tooltip {
  display: none !important;
}

/* Fix dropdown layout inside fullscreen cards */
.card:fullscreen .dropdown-menu {
  max-height: 220px !important;
  overflow-y: auto !important;
}

.card:fullscreen .card-body > *:last-child {
  margin-bottom: 0 !important;
}

.card:fullscreen .card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-bottom: 1rem;
}

.card:fullscreen .dropdown {
  max-width: 100%;
  align-self: flex-start;
}


/* ================================
   SOURCE/NOTES DROPDOWNS
   ================================ */

/* Shared text scaling for grid header and expanded section */
.sample-grid,
.attached-collapse {
  font-size: clamp(0.8rem, 1vw + 0.3rem, 1rem);
  line-height: 1.4;
}

/* Dropdown header grid - clickable */
.sample-grid {
  display: grid;
  grid-template-columns: 90% 10%;
  grid-template-areas: "col1 col2";
  align-items: center;
  width: 100%;
  margin-top: 1.1em;
  gap: 0.25em;
  box-sizing: border-box;
  overflow-x: hidden;
  background-color: #e8f4fa;
  border: 1px solid #ddd;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  cursor: pointer; /* Entire row is clickable */
  transition: background-color 0.2s ease;
}

/* Hover effect */
.sample-grid:hover {
  background-color: #d0e8f5;
}

.card .sample-grid,
.card .attached-collapse {
  max-width: 100%;
  overflow-x: hidden;
}

/* Text area (left column) */
.sample-grid .col1 {
  grid-area: col1;
  padding: 0.35em 0.8em;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  background-color: transparent;
  cursor: pointer; /* Ensure left column shows it's clickable */
}

/* Chevron area (right column) */
.sample-grid .col2 {
  grid-area: col2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.35em 0.8em;
  box-sizing: border-box;
  background-color: transparent;
}

/* Chevron button */
.arrow-toggle {
  cursor: pointer;
  border: none;
  z-index: 3;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

/* Chevron icon */
.chevron-icon {
  fill: #888;
  width: clamp(20px, 3vw, 28px);
  height: clamp(20px, 3vw, 28px);
  transition: transform 0.2s ease;
}

/* Rotate chevron when expanded */
.arrow-toggle[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}

/* Expanded content */
.attached-collapse {
  padding: 0.6em;
  box-sizing: border-box;
  background-color: white;
  margin-bottom: 1em;
  font-size: clamp(0.8rem, 1vw + 0.3rem, 1rem);
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
}


/* ================================
   TOOLTIPS
   ================================ */

/* Custom tooltip container */
.custom-tooltip {
  background-color: transparent;
  display: flex;
  position: relative;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  margin-left: 0.6em;
}

/* Tooltip trigger icon */
.custom-tooltip-trigger svg {
  width: 20px;
  height: 20px;
}

/* Tooltip content */
.custom-tooltip .custom-tooltiptext {
  visibility: hidden;
  position: fixed;
  background-color: #eae9e9;
  color: black;
  border: 1.5px solid black;
  text-align: left;
  padding: 30px 10px 10px 10px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  font-size: 0.8em;
  transition: opacity 0.3s;
  z-index: 3000;
}

/* Tooltip close button */
.custom-tooltip-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  width: 1.75em;
  height: 1.75em;
  background: black;
  color: white;
  font-weight: bold;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

/* Tooltip overlay */
.tooltip-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(180, 180, 180, 0.35);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}


/* ================================
   CALLOUTS
   ================================ */

/* Make callout headers inline */
.callout.callout-collapsible > .callout-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.callout.callout-collapsible .callout-icon {
  margin-right: 0.5em;
}

.callout.callout-collapsible .callout-title-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25em;
}


/* ================================
   UTILITY CLASSES
   ================================ */

/* Grid layout utilities */
.sample-grid-2 {
  display: flex;
  flex-direction: row;
  padding: 0.6em;
  position: relative;
  box-sizing: content-box;
  width: 100%;
  margin-top: 1.8em;
}

/* Custom card */
.custom-card {
  padding: 0.6em;
  box-sizing: border-box;
  background-color: white;
  margin-bottom: 1em;
}

/* Chart toggle buttons */
.chart-toggle {
  cursor: pointer;
  border: none;
  z-index: 3;
  background-color: transparent;
  vertical-align: middle;
}

.chart-toggle-button {
  fill: var(--cyan);
  font-size: 0.5em;
  vertical-align: middle;
  width: 40px;
  height: 40px;
}


/* ================================
   RESPONSIVE MEDIA QUERIES
   ================================ */

/* Download buttons on narrow screens */
@media (max-width: 600px) {
  .custom-download {
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .custom-download .btn,
  .custom-download button,
  .custom-download a {
    font-size: 11px !important;
    padding: 4px 6px !important;
  }
}

/* Tablet and smaller */
@media (max-width: 768px) {
  .sample-grid {
    grid-template-columns: 65% 35%;
    gap: 0.3em;
  }

  .attached-collapse {
    font-size: 0.85rem;
  }

  /* Sidebar adjustments */
  .sidebar {
    padding: 1rem !important;
  }

  .sidebar .form-select {
    font-size: 1.1rem !important;
    padding: 0.65rem 0.85rem !important;
  }

  .sidebar em {
    font-size: 1rem !important;
  }

  .sidebar .form-check-label {
    font-size: 1.1rem !important;
  }

  .sidebar .h4 {
    font-size: 1.2rem !important;
  }
}

/* Extra small screens */
@media (max-width: 576px) {
  .sidebar .form-select {
    font-size: 1.15rem !important;
    padding: 0.7rem 0.9rem !important;
  }

  .sidebar em {
    font-size: 1.05rem !important;
  }

  .sidebar .form-check-label {
    font-size: 1rem !important;
  }
}

@media (max-width: 850px) {
  .bslib-grid {
    grid-template-columns: 1fr !important;
  }

  .card {
    width: 100% !important;
    max-width: 100% !important;
  }
}