/* ── Analytics Dashboard Responsive ── */


/* Desktop: sidebar visible as normal static panel */
#kpi-sidebar {
  display: flex;
  flex-direction: column;
}


/* Desktop: tab indent */
#dashboard-tabs-inner {
  margin-left: 8.8rem;
}

/* Desktop: filters 3-column */
#filters-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#filter-time-cell {
  justify-content: center;
}
#filter-geo-cell {
  justify-content: flex-end;
}

/* Desktop: hamburger and mobile close button hidden */
#sidebar-open-btn,
#sidebar-mobile-header {
  display: none !important;
}

/* Desktop: hide inline mobile labels (label row handles those) */
#age-mobile-label,
#time-mobile-label,
#geo-mobile-label {
  display: none !important;
}

@media (max-width: 1023px) {
  /* Header: remove left margin on tabs */
  #dashboard-tabs-inner {
    margin-left: 0 !important;
  }

  /* Mobile: hide Dashboard title, give tabs full width */
  #dashboard-title {
    display: none !important;
  }

  /* Allow table horizontal scroll without breaking outer overflow-x-hidden */
  #tab-content-scroll {
    overflow-x: hidden !important;
  }

  /* Constrain reports table wrappers so overflow-x-auto actually clips */
  .reports-tab .overflow-x-auto {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .reports-tab {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Mobile: sidebar hidden by default, JS opens it as overlay */
  #kpi-sidebar {
    display: none !important;
  }

  /* Mobile: show hamburger button */
  #sidebar-open-btn {
    display: block !important;
  }

  /* Mobile: filters single column */
  #filters-grid {
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
  }
  #filter-time-cell,
  #filter-geo-cell {
    justify-content: flex-start !important;
  }

  /* Mobile: hide top label row, show inline labels */
  #filters-label-row {
    display: none !important;
  }
  #age-mobile-label,
  #time-mobile-label,
  #geo-mobile-label {
    display: flex !important;
  }

  /* Mobile: align each filter row as 2-col grid: fixed label col + value col */
  #filters-grid > div {
    display: grid !important;
    grid-template-columns: 5.5rem auto !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Mobile: age select auto width, not stretched */
  #ageGroupSelect {
    width: auto !important;
  }

  /* Mobile: time period pill wraps freely */
  #timePeriodDisplay {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  /* Mobile: tighter filter card */
  #common-filters {
    padding: 0.625rem !important;
    margin: 0.375rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Overview Sankey layout: stack vertically */
  #assessment-sankey-layout,
  #vcdc-sankey-layout {
    flex-direction: column !important;
  }
  #assessment-sankey-panel,
  #vcdc-sankey-panel,
  #assessment-donut-panel,
  #vcdc-donut-panel {
    width: 100% !important;
  }
  #sankey-chart,
  #vcdc-sankey-chart {
    height: 400px !important;
  }

  /* Map+ranking: stack vertically (all tabs) */
  #map-ranking-container,
  #map-ranking-container-nurture,
  #map-ranking-container-vcdc,
  #map-ranking-container-nrc {
    grid-template-columns: 1fr !important;
  }
  #map-section,
  #map-section-nurture,
  #map-section-vcdc,
  #map-section-nrc {
    grid-column: span 1 !important;
  }

  /* Map header: stack title above toggles (all tabs) */
  #map-header-row-nurture,
  #map-header-row-vcdc,
  #map-header-row-nrc {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Time period modal: full width */
  #timePeriodModal > div {
    width: 95vw !important;
  }

  /* Map header: stack title above toggles on mobile */
  #map-header-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Map title: compact on mobile */
  #map-title,
  #map-title-nurture,
  #map-title-vcdc,
  #map-title-nrc {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    margin-right: 0 !important;
  }
}

/* Reports tab: horizontal scroll on mobile */
@media (max-width: 1023px) {
  /* Parent border wrapper clips scroll — override it */
  .reports-tab .border.overflow-hidden {
    overflow: visible !important;
  }

  .reports-tab .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* Tighter cell padding so more columns fit before scrolling */
  .reports-tab table th,
  .reports-tab table td {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
  }

}

/* Mobile-only styles that preserve desktop appearance */
@media (max-width: 639px) {
  /* Horizontal scrolling fixes */
  .table-container-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Adjust font sizes for mobile */
  .mobile-text-sm {
    font-size: 0.875rem;
  }

  .mobile-text-xs {
    font-size: 0.75rem;
  }

  .mobile-p-smaller {
    padding: 0.75rem !important;
  }

  .mobile-gap-smaller {
    gap: 0.5rem !important;
  }

  /* Adjust paddings and margins */
  .mobile-mt-3 {
    margin-top: 0.75rem !important;
  }

  .mobile-mb-3 {
    margin-bottom: 0.75rem !important;
  }

  /* Add more spacing between stat cards on mobile */
  .stat-card-mobile {
    margin-bottom: 16px !important;
  }

  /* Increase card padding on mobile */
  .card-padding-mobile {
    padding: 16px !important;
  }

  /* Increase spacing between grid items */
  .grid-gap-mobile {
    gap: 16px !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */