/* Statistics only. Uses the shared SensiGrow Agro design tokens. */
#generic-modal-statistics {
  --stats-bg: var(--agro-bg, #f0f4f1);
  --stats-surface: var(--agro-surface, #fff);
  --stats-text: var(--agro-text-primary, #1a2e22);
  --stats-muted: var(--agro-text-secondary, #4a6557);
  --stats-border: var(--agro-border, #d0ddd5);
  --stats-tint: var(--agro-green-50, #f3faf6);
  --stats-group-bg: #f8f9fa;
  font-family: var(--agro-font-body, 'Inter', 'Segoe UI', sans-serif);
  color: var(--stats-text);
}

#generic-modal-statistics .modal-content {
  background: var(--stats-bg);
  border: 1px solid var(--stats-border);
  border-radius: var(--agro-radius-lg, 14px);
  box-shadow: var(--agro-shadow-lg, 0 8px 24px #0f2b1a24);
}

/* Match the shared .sg-modal-header in app.css. */
#generic-modal-statistics .modal-header {
  min-height: 60px;
  padding: 14px 22px;
  background-color: #b9c9da;
  border-bottom: 1px solid #8fa2cc;
  border-top: 0;
}

#generic-modal-statistics .modal-title {
  font-family: var(--agro-font-display, 'DM Sans', 'Segoe UI', sans-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--stats-text);
}

#generic-modal-statistics .sg-statistics-modal-title,
#generic-modal-statistics .sg-statistics-button-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

#generic-modal-statistics .sg-statistics-modal-title > .bi {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--agro-green-100, #e6f4ec);
  color: var(--agro-green-700, #1f5c34);
  font-size: 17px;
}

#generic-modal-statistics .modal-body {
  background: var(--stats-bg);
  padding: 16px;
}

/* The body can scroll when many measurement controls are selected.
   The header and footer stay outside this area, so Apply remains reachable. */
#generic-modal-statistics .sg-statistics-modal-body {
  display: grid;
  grid-template-rows: auto minmax(300px, 1fr);
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--stats-border) transparent;
  padding: 1px 3px 3px 1px;
}

#generic-modal-statistics .sg-statistics-controls {
  position: relative;
  z-index: 2;
  padding: 18px 20px;
  border: 1px solid var(--stats-border);
  border-radius: var(--agro-radius-md, 10px);
  background: var(--stats-surface);
  box-shadow: var(--agro-shadow-sm);
}

#generic-modal-statistics .sg-statistics-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--agro-green-700, #1f5c34);
  font-family: var(--agro-font-display, 'DM Sans', 'Segoe UI', sans-serif);
  font-size: 13px;
  font-weight: 700;
}

#generic-modal-statistics .sg-statistics-controls-heading {
  margin-bottom: 15px;
}

#generic-modal-statistics .sg-statistics-field {
  min-width: 0;
  margin-bottom: 0;
}

#generic-modal-statistics .sg-statistics-controls > .row {
  margin-bottom: 12px;
}

#generic-modal-statistics .sg-statistics-field:not(.sg-statistics-aggregation-item) {
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--stats-border);
  border-radius: 8px;
  background: var(--stats-group-bg);
}

#generic-modal-statistics .sg-statistics-label {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--stats-text);
}

#generic-modal-statistics .sg-statistics-help {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--stats-muted);
}

#generic-modal-statistics .sg-statistics-aggregation-section {
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--stats-border);
  border-radius: 8px;
  background: var(--stats-group-bg);
}

#generic-modal-statistics .sg-statistics-aggregation-item {
  height: 100%;
  margin-bottom: 0;
}

#generic-modal-statistics .sg-statistics-measurement-name {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--stats-text);
  overflow-wrap: anywhere;
}

#generic-modal-statistics .sg-statistics-controls > .sg-statistics-time-controls {
  margin-bottom: 0;
  padding-top: 0;
}

#generic-modal-statistics .sg-statistics-time-controls .sg-statistics-field {
  margin-bottom: 0;
}

/* Dash dropdowns: legible controls, quiet green multi-select chips. */
#generic-modal-statistics .sg-statistics-controls .Select-control {
  min-height: 38px;
  border-color: var(--stats-border);
  border-radius: 7px;
  background: var(--stats-surface);
  color: var(--stats-text);
  box-shadow: none;
  font-size: 12px;
}

#generic-modal-statistics .Select-placeholder,
#generic-modal-statistics .Select--single > .Select-control .Select-value {
  line-height: 36px;
}

#generic-modal-statistics .Select-placeholder {
  color: var(--stats-muted);
}

#generic-modal-statistics .Select-value-label {
  color: var(--stats-text) !important;
}

#generic-modal-statistics .Select--multi .Select-value {
  display: inline-flex;
  align-items: flex-start;
  max-width: calc(100% - 10px);
  margin-top: 5px;
  margin-bottom: 3px;
  border: 1px solid var(--stats-border);
  border-radius: 5px;
  background: var(--agro-green-100, #e6f4ec);
  color: var(--agro-green-800, #1a3d28);
  font-size: 11px;
  line-height: 22px;
}

#generic-modal-statistics .Select--multi .Select-value-label {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

#generic-modal-statistics .Select--multi .Select-value-icon {
  border-inline-end: 1px solid var(--stats-border);
}

#generic-modal-statistics .Select.is-focused > .Select-control,
#generic-modal-statistics .Select.is-open > .Select-control {
  border-color: var(--agro-green-500, #3a9e5c);
  box-shadow: 0 0 0 3px #3a9e5c1a;
}

#generic-modal-statistics .Select-menu-outer {
  z-index: 30;
  border-color: var(--stats-border);
  border-radius: 7px;
  background: var(--stats-surface);
  font-size: 12px;
  box-shadow: var(--agro-shadow-md);
}

#generic-modal-statistics .VirtualizedSelectFocusedOption,
#generic-modal-statistics .Select-option.is-focused {
  background: var(--agro-green-100, #e6f4ec);
  color: var(--stats-text);
}

#generic-modal-statistics .sg-statistics-graph-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 8px;
  border: 1px solid var(--stats-border);
  border-radius: var(--agro-radius-md, 10px);
  background: var(--stats-surface);
  box-shadow: var(--agro-shadow-sm);
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--stats-border) transparent;
}

#generic-modal-statistics .sg-statistics-table-result {
  padding: 0 8px 12px;
}

/* Keep all restored Plotly controls visible without an opaque backing. */
#generic-modal-statistics .modebar,
#generic-modal-statistics .modebar:hover,
#generic-modal-statistics .modebar-group {
  padding: 3px 5px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

#generic-modal-statistics .modebar-btn path {
  fill: var(--stats-muted);
}

#generic-modal-statistics .modebar-btn:hover path,
#generic-modal-statistics .modebar-btn.active path {
  fill: var(--agro-green-600, #2d7a46);
}

#generic-modal-statistics .modal-footer {
  gap: 10px;
  min-height: 64px;
  padding: 12px 20px;
  border-top: 1px solid var(--stats-border);
  background: var(--stats-surface);
}

#generic-modal-statistics .modal-footer .btn {
  min-width: 108px;
  padding: 9px 17px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  transition: background .15s ease, box-shadow .15s ease;
}

#generic-modal-apply-btn-statistics {
  background: var(--agro-green-600, #2d7a46);
  border-color: var(--agro-green-600, #2d7a46);
  color: #fff;
}

#generic-modal-apply-btn-statistics:hover {
  background: var(--agro-green-700, #1f5c34);
  border-color: var(--agro-green-700, #1f5c34);
}

#generic-modal-cancel-btn-statistics {
  background: var(--stats-surface);
  border-color: var(--stats-border);
  color: var(--stats-muted);
}

#generic-modal-cancel-btn-statistics:hover {
  background: var(--stats-tint);
  color: var(--stats-text);
}

#generic-modal-statistics .btn:focus-visible {
  outline: 3px solid var(--agro-green-300, #7dd29a);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  #generic-modal-statistics.modal-dialog,
  #generic-modal-statistics .modal-dialog {
    inset: 6px !important;
  }
  #generic-modal-statistics .modal-header { padding: 10px 14px; }
  #generic-modal-statistics .modal-body { padding: 9px; }
  #generic-modal-statistics .sg-statistics-controls { padding: 14px; }
  #generic-modal-statistics .sg-statistics-modal-body {
    grid-template-rows: auto minmax(340px, 1fr);
    gap: 10px;
  }
  #generic-modal-statistics .sg-statistics-aggregation-section { padding: 12px; }
  #generic-modal-statistics .modal-footer { padding: 10px 14px; }
}


/* The toggle belongs to the graph, including after Apply rebuilds its content. */
#generic-modal-statistics .sg-statistics-graph-result {
  --stats-chart-toolbar-height: 38px;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
}

#generic-modal-statistics .sg-statistics-graph-toolbar {
  position: relative;
  top: 0;
  z-index: 6;
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  height: var(--stats-chart-toolbar-height);
  min-height: var(--stats-chart-toolbar-height);
  padding: 2px 6px 6px;
  background: transparent;
}

/* Plotly owns its controls; keep them in place and align them with the
   existing expand button in the same reserved toolbar row. */
#generic-modal-statistics #statistics-graph .modebar-container {
  z-index: 7;
}

#generic-modal-statistics #statistics-graph .modebar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  top: calc(6px - var(--stats-chart-toolbar-height)) !important;
  right: 120px !important;
  padding: 0;
  white-space: nowrap;
}

#generic-modal-statistics #statistics-graph .modebar-group {
  display: flex;
  flex: 0 0 auto;
  float: none;
  padding: 0 2px;
}

#generic-modal-statistics #statistics-graph .modebar-btn {
  padding: 5px 2px;
}

#generic-modal-statistics .sg-statistics-expand-button {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--stats-border);
  border-radius: 6px;
  background: var(--stats-surface);
  color: var(--stats-muted);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  width: 108px;
  justify-content: center;
  cursor: pointer;
}

#generic-modal-statistics .sg-statistics-expand-button:hover {
  border-color: var(--agro-green-500, #3a9e5c);
  color: var(--agro-green-700, #1f5c34);
}

#generic-modal-statistics .sg-statistics-expand-button:focus-visible {
  outline: 3px solid var(--agro-green-300, #7dd29a);
  outline-offset: 2px;
}

#generic-modal-statistics .sg-statistics-expand-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#generic-modal-statistics .sg-statistics-collapse-label {
  display: none;
}

#generic-modal-statistics .sg-statistics-is-expanded {
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

#generic-modal-statistics .sg-statistics-is-expanded .sg-statistics-controls {
  display: none;
}

#generic-modal-statistics .sg-statistics-is-expanded .sg-statistics-graph-card {
  min-height: 0;
  height: 100%;
  overflow: hidden !important;
}

#generic-modal-statistics .sg-statistics-is-expanded .sg-statistics-graph-result,
#generic-modal-statistics .sg-statistics-is-expanded #statistics-graph {
  min-height: 0 !important;
  height: 100%;
  flex: 1 1 auto !important;
}

#generic-modal-statistics .sg-statistics-is-expanded .sg-statistics-expand-label {
  display: none;
}

#generic-modal-statistics .sg-statistics-is-expanded .sg-statistics-collapse-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}


#generic-modal-statistics .sg-statistics-label-with-icon {
  display: flex;
  align-items: center;
  gap: 7px;
}

#generic-modal-statistics .sg-statistics-label-with-icon > .bi {
  color: var(--agro-green-700, #1f5c34);
  font-size: 13px;
}

/* Improve readability across the Statistics dialog: headings, controls, chart, and table. */
#generic-modal-statistics .modal-title { font-size: 23px; }
#generic-modal-statistics .sg-statistics-section-heading { font-size: 16px; }
#generic-modal-statistics .sg-statistics-label,
#generic-modal-statistics .sg-statistics-measurement-name { font-size: 15px; }
#generic-modal-statistics .sg-statistics-help { font-size: 13px; line-height: 1.5; }
#generic-modal-statistics .Select-control,
#generic-modal-statistics .Select-value-label,
#generic-modal-statistics .Select-placeholder,
#generic-modal-statistics .Select-option,
#generic-modal-statistics .Select-input input,
#generic-modal-statistics .form-control,
#generic-modal-statistics .form-select { font-size: 15px; }
#generic-modal-statistics .dash-table-container,
#generic-modal-statistics .dash-table-container .dash-spreadsheet-container,
#generic-modal-statistics .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
#generic-modal-statistics .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th { font-size: 15px !important; }
#generic-modal-statistics #statistics-graph { font-size: 14px; }
#generic-modal-statistics .sg-statistics-expand-button,
#generic-modal-statistics .modal-footer .btn { font-size: 14px; }