/* App-specific styles. Brand tokens (--brand-*), the navbar title, nav links,
   footer, DataTables headers, viz titles, stat chips, and the info hero/steps
   components come from the shared theme stylesheet:
   mspossom_theme/mspossom.css (loaded via mspossom_header() in app.R). */

/* ---- Info tab tips list --------------------------------------------------- */

#main_tabs {
  margin-bottom: 1rem;
}

.info-tips {
  margin: 0;
  padding-left: 1.1rem;
}

.info-tips li {
  margin-bottom: 0.45rem;
}

/* ---- Query sidebar — "Build Your Query" split-section layout ------------ */

.query-sidebar {
  --query-accent: var(--brand-teal);
  --query-navy: var(--brand-navy);
  --query-border: var(--brand-line);
  --query-muted: var(--brand-muted);
  --query-soft-blue: #eef6ff;
  --query-sidebar-bg: var(--brand-paper);
}

/* The query builder lives inside a native bslib sidebar(). Zero the bslib
   sidebar padding (the inner scroll region manages its own), and on desktop
   bound the panel height so the internal scroll works and the GO! actions stay
   in view. */
.app-sidebar.query-sidebar {
  overflow: hidden;
  padding: 0;
}

@media (min-width: 768px) {
  .app-sidebar.query-sidebar {
    /* Header (~61px: 48px logo + 0.4rem padding) is not sticky and sits above
       the sidebar, so subtract it so the sticky column fits the viewport and
       the GO! actions stay in view. */
    height: calc(100vh - 61px);
    max-height: calc(100vh - 61px);
  }

  .app-sidebar.query-sidebar > .sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .app-sidebar.query-sidebar .app-sidebar-accordion,
  .app-sidebar.query-sidebar .accordion-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }

  .app-sidebar.query-sidebar .accordion-collapse.show {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .app-sidebar.query-sidebar .accordion-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
}

.query-sidebar-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  background: var(--query-sidebar-bg);
}

.query-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.9rem;
}

/* Main sections */

.query-section {
  padding: 0.25rem 0 0.9rem;
}

.query-section + .query-section {
  margin-top: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--query-border);
}

.query-section-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
  color: var(--query-navy);
  font-size: 0.95rem;
  font-weight: 700;
}

.query-section-heading svg {
  color: var(--query-accent);
}

/* Subsections */

.query-subsection {
  margin-bottom: 1rem;
}

.query-subsection:last-child {
  margin-bottom: 0;
}

.query-subsection-title {
  margin-bottom: 0.55rem;
  color: #344054;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.query-subsection .form-group {
  margin-bottom: 0.7rem;
}

.query-subsection label {
  margin-bottom: 0.3rem;
  color: #344054;
  font-size: 0.76rem;
  font-weight: 600;
}

.geo-counties-preview {
  margin-top: -0.35rem;
  margin-bottom: 0.7rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.35rem;
  background: #f0f2f6;
  color: var(--query-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

/* Two-column demographic controls */

.query-input-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem;
}

.query-input-grid > * {
  min-width: 0;
}

/* Sticky action area */

.query-actions {
  flex: 0 0 auto;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--query-border);
  background: #ffffff;
  box-shadow: 0 -4px 12px rgb(15 23 42 / 5%);
}

.query-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  color: var(--query-muted);
  font-size: 0.73rem;
  line-height: 1.35;
}

.query-summary svg {
  margin-top: 0.1rem;
  color: var(--query-accent);
}

.query-action-buttons {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) minmax(130px, 1.3fr);
  gap: 0.55rem;
}

.query-action-buttons .btn {
  width: 100%;
}

/* Responsive behavior */

@media (max-width: 575px) {
  .query-input-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .query-action-buttons {
    grid-template-columns: 1fr;
  }
}

/* ---- Results controls ---------------------------------------------------- */

.table-toolbar,
.pub-toolbar,
.chart-download-bar,
.pyramid-controls {
  gap: 0.75rem;
}

.table-toolbar .form-switch,
.pub-toolbar .form-switch {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  min-height: 2rem;
}

.table-toolbar .form-check-input,
.pub-toolbar .form-check-input {
  margin-top: 0;
}

/* DT grouped crosstabs: center top-level variable spanners and make group
   boundaries visible across the header/body. This corrects DataTables'
   default left alignment for colspan header cells. */
table.dataTable thead th.dt-group-spanner {
  text-align: center !important;
  vertical-align: middle;
}

table.dataTable thead th.dt-row-spanner,
table.dataTable thead th.dt-row-header {
  text-align: left !important;
}

table.dataTable thead th.dt-group-start,
table.dataTable tbody td.dt-group-start {
  border-left: 1px solid rgba(35, 164, 139, 0.22) !important;
}

table.dataTable thead th.dt-group-end,
table.dataTable tbody td.dt-group-end {
  border-right: 1px solid rgba(35, 164, 139, 0.14) !important;
}

.chart-download-bar {
  gap: 0.5rem;
}

.chart-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pyramid-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

/* ---- Map page ------------------------------------------------------------ */

.map-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1rem;
  align-items: stretch;
}

.map-main-panel {
  min-width: 0;
}

.map-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

.map-controls .form-group,
.map-controls .shiny-input-container {
  width: 100%;
  margin-bottom: 0;
}

.map-canvas {
  height: calc(100vh - 260px);
  min-height: 580px;
}

.map-canvas .leaflet,
.map-canvas .leaflet-container {
  height: 100% !important;
}

.map-agg-panel {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.65rem;
  background: #fff;
}

@media (max-width: 991.98px) {
  .map-page {
    grid-template-columns: 1fr;
  }

  .map-controls {
    grid-template-columns: 1fr;
  }

  .map-canvas {
    height: 68vh;
    min-height: 460px;
  }
}