/* =========================================================
   AGRO INSIGHTS — page layout & professional toolbar
   Uses original component IDs, no callback changes needed.
   ========================================================= */


/* =========================================================
   1) GRAPHS STACK (page body under the toolbar)
   ========================================================= */

.agro-graphs-stack{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 8px;
  min-height: 0;         /* IMPORTANT: allows children to shrink + scroll properly */
}

/* Each visible graph shares height equally */
.agro-graph-wrap{
  flex: 1 1 0;
  min-height: 0;         /* IMPORTANT so dcc.Graph can size correctly */

  background: #ffffff;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

/* Make the Plotly graph fill its wrapper */
.agro-graph-wrap .js-plotly-plot,
.agro-graph-wrap .plotly,
.agro-graph-wrap .plot-container{
  height: 100% !important;
}

.agro-body{
  height: calc(100vh - 130px); /* adjust if your top bar height changes */
  min-height: 0;
  padding-top: 8px;
}


/* =========================================================
   2) TOOLBAR SHARED CLASSES
   agro-toolbar, agro-toolbar-section, agro-toolbar-section-label,
   agro-toolbar-divider, agro-toolbar-pill
   → defined globally in app.css (used by all pages)
   ========================================================= */


/* =========================================================
   4) SHOW CHECKLIST (Weather / Plant / Soil / Crop / Activities / All)
   ========================================================= */

.agro-show-checklist{
  display: inline-flex !important;
  align-items: center;
  gap: 0.9rem;        /* space between items in the list */
  flex-wrap: wrap;
}

.agro-show-checklist .form-check{
  margin: 0 !important;
  padding-left: 0 !important;     /* kill Bootstrap's default indent */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;                    /* ← space between checkbox and its label */
}

.agro-show-checklist .form-check-input{
  cursor: pointer;
  margin: 0 !important;           /* remove Bootstrap's absolute positioning */
  position: static !important;
  float: none !important;
  flex: 0 0 auto;
}

.agro-show-checklist .form-check-input:checked{
  background-color: #27ae60;
  border-color: #27ae60;
}

.agro-show-checklist .form-check-label{
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2a37;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  margin: 0;
}


/* =========================================================
   5) OPTIONS SWITCHES (Forecast / Normalize / Alerts / Raw data)
   ========================================================= */

.agro-toolbar-switch-group{
  gap: 0.9rem !important;
}

.agro-toolbar-checklist{
  display: inline-flex !important;
  align-items: center;
}

.agro-toolbar-checklist .form-check{
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
}

.agro-toolbar-checklist .form-check-label{
  font-size: 0.85rem;
  font-weight: 500;
  color: #1f2a37;
  cursor: pointer;
  user-select: none;
  padding-left: 0.25rem;
  white-space: nowrap;
}

.agro-toolbar-checklist .form-check-input{
  cursor: pointer;
}

.agro-toolbar-checklist .form-check-input:checked{
  background-color: #177da5;
  border-color: #177da5;
}


/* =========================================================
   6) HOVER SECTION (its own pill, tighter padding)
   ========================================================= */

.agro-toolbar-hover-pill{
  padding: 0.15rem 0.4rem;        /* tighter than the option pills */
}

.agro-toolbar-hover-pill .agro-toolbar-dropdown{
  min-width: 150px;
}

.agro-toolbar-dropdown{
  font-size: 0.85rem;
}

.agro-toolbar-dropdown .Select-control{
  border-radius: 6px;
  border-color: #c9d4e0;
  min-height: 30px;
  background: transparent;
}

.agro-toolbar-dropdown .Select-control:hover{
  border-color: #177da5;
  box-shadow: 0 0 0 1px rgba(23, 125, 165, 0.15);
}

.agro-toolbar-dropdown .Select-placeholder,
.agro-toolbar-dropdown .Select-value{
  line-height: 30px;
  font-weight: 500;
}


/* =========================================================
   7) ACTION BUTTONS (Actions section)
   ========================================================= */

.agro-action-btn-group{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}


/* =========================================================
   8) RESPONSIVE — narrow viewports
   ========================================================= */

@media (max-width: 1200px){
  .agro-toolbar{
    gap: 0.5rem;
  }
  .agro-toolbar-divider{
    display: none;
  }
  .agro-toolbar-section:last-of-type{
    margin-left: 0;
  }
}

/* Readable chart surfaces; no changes to graph visibility or zoom controls. */
.agro-graph-wrap { border-color: #d7e1da; box-shadow: 0 1px 4px rgba(25,65,40,.06); }
.agro-graph-wrap .modebar { border-radius: 6px; background: rgba(255,255,255,.92); }
.agro-graphs-stack { gap: 10px; }
.agro-toolbar .agro-toolbar-section-label { font-size: 12px; letter-spacing: 0; }
.agro-toolbar .agro-show-checklist .form-check-label,
.agro-toolbar .agro-toolbar-checklist .form-check-label { font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; }


/* Agro Insights toolbar only: readable, wrapping sections and accessible focus. */
.agro-insights-navbar { background: #f1f6f3 !important; border-bottom: 1px solid #d5e1d9; }
.agro-insights-navbar .agro-toolbar { flex-wrap: wrap; gap: 8px 12px; padding: 6px 0; }
.agro-insights-navbar .agro-toolbar-section { gap: 7px; flex-wrap: wrap; min-width: 0; }
.agro-insights-navbar .agro-toolbar-section-label { color: #405b4b; font-weight: 600;
 font-size: 12px; text-transform: none; letter-spacing: normal; }
.agro-insights-navbar .agro-toolbar-pill { background: #fff; border: 1px solid #d7e1da;
 border-radius: 7px; padding: 6px 8px; max-width: 100%; }
.agro-insights-navbar .agro-toolbar-switch-group { display: flex; flex-wrap: wrap; }
.agro-insights-navbar .agro-show-checklist { gap: 8px 12px; }
.agro-insights-navbar .agro-toolbar-dropdown .Select-control { min-height: 34px; background: #fff; }
.agro-insights-navbar .agro-action-btn-group .btn { min-width: 34px; min-height: 34px; border-radius: 6px; }
.agro-insights-navbar :is(button,input,select):focus-visible { outline: 2px solid #287749; outline-offset: 2px; }
@media (max-width: 900px) {
 .agro-insights-navbar .agro-toolbar-section { flex: 1 1 260px; }
 .agro-insights-navbar .agro-toolbar-divider { display: none; }
 .agro-insights-navbar .agro-toolbar-section:last-of-type { margin-inline-start: 0; }
}


/* Compact empty charts and optional expanded view, scoped to this page. */
.agro-graphs-stack { overflow-y: auto; overflow-x: hidden; padding-inline-end: 3px; }
.agro-graph-wrap { position: relative; min-height: 240px; flex-shrink: 0; }
.agro-graph-wrap.agro-empty-view { flex: 0 0 112px !important; min-height: 112px; }
.agro-graph-wrap.agro-expanded-view { flex: 0 0 70vh !important; min-height: 420px; }
.agro-graph-wrap > .dash-graph { height: 100%; }
.agro-view-toggle {
 position: absolute; inset-block-start: 7px; inset-inline-end: 12px; z-index: 5;
 border: 1px solid #ccdad0; border-radius: 6px; background: #fff; color: #365a42;
 padding: 4px 9px; font: 12px "Segoe UI", Arial, sans-serif;
 cursor: pointer; min-height: 30px;
}
.agro-view-toggle:hover { background: #edf5ef; border-color: #8fb69b; }
.agro-view-toggle:focus-visible { outline: 2px solid #287749; outline-offset: 2px; }
.agro-empty-view .agro-view-toggle { display: none; }
@media (max-width: 767px) {
 .agro-graph-wrap { min-height: 260px; }
 .agro-graph-wrap.agro-expanded-view { min-height: 360px; flex-basis: 65vh !important; }
}


/* Optional legend and time-reset actions; original measurements remain intact. */
.agro-view-toggle { width: 66px; }
.agro-legend-toggle { inset-inline-end: 84px; width: 60px; }
.agro-reset-time { inset-inline-end: 150px; width: 32px; font-size: 18px; padding: 0; }
.agro-legend-toggle[aria-pressed="true"] { background: #e5f2e9; border-color: #82ab8e; }
.agro-graph-wrap .legend { cursor: pointer; }


/* Custom view buttons sit immediately to the left of Plotly's native modebar. */
.agro-view-controls {
 position: absolute; top: 6px; right: 330px; z-index: 5;
 display: flex; align-items: center; gap: 6px; height: 30px;
 padding: 0; background: #fff; border: 0;
}
.agro-view-controls .agro-view-toggle {
 position: static; inset: auto; flex: 0 0 auto; min-height: 28px; z-index: auto;
}
.agro-graph-wrap > .dash-graph { height: 100% !important; }
.agro-empty-view .agro-view-controls { display: none; }


/* Unified custom actions. Plotly handlers stay available; its duplicate UI is hidden. */
.agro-graph-wrap .modebar-container { display: none !important; }
.agro-view-controls { right: 12px; max-width: calc(100% - 160px); overflow-x: auto;
 white-space: nowrap; scrollbar-width: thin; background: #fff; }
.agro-view-controls .agro-native-action { width: 30px; min-width: 30px; padding: 3px; }
.agro-native-action .bi { font-size: 15px; line-height: 1; }
.agro-native-action svg { width: 15px; height: 15px; fill: currentColor; }
.agro-native-action[aria-pressed="true"] { background: #e5f2e9; border-color: #82ab8e; }
.agro-view-controls [hidden] { display: none !important; }
@media (max-width: 575px) {
 .agro-view-controls { max-width: calc(100% - 110px); }
}


/* Actual irrigation events: optional overlay, no changes to measured traces. */
.agro-irrigation-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.agro-irrigation-toggle input { accent-color: #287749; }
.agro-irrigation-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.agro-irrigation-event { position: absolute; transform: translateX(-50%); color: #287fb0;
 font-size: 14px; line-height: 16px; pointer-events: auto; cursor: help;
 filter: drop-shadow(0 1px 1px #fff); }
.agro-irrigation-event:focus-visible { outline: 2px solid #287fb0; outline-offset: 2px; }


/* Per-unit irrigation running total within the displayed data period. */
.agro-irrigation-cumulative {
 position: absolute; left: 13px; top: 0; white-space: nowrap;
 padding: 0 3px; border-radius: 3px; background: rgba(255,255,255,.94);
 color: #205e80; font: 600 10px/15px "Segoe UI", Arial, sans-serif;
 border: 1px solid #d8e7ef;
}


/* Optional exact-time comparison, separate from zoom synchronization. */
.agro-comparison-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.agro-comparison-toggle input { accent-color: #287749; }
.agro-comparison-panel { position: fixed; bottom: 18px; right: 22px; z-index: 1100;
 width: min(460px, calc(100vw - 36px)); max-height: 44vh; overflow: auto;
 padding: 12px; border: 1px solid #b9cfbf; border-radius: 9px; background: rgba(255,255,255,.98);
 box-shadow: 0 4px 18px rgba(25,65,40,.16); color: #294735; font: 12px/1.4 "Segoe UI", Arial, sans-serif;
 pointer-events: none; }
.agro-comparison-panel[hidden] { display: none; }
.agro-comparison-group { margin-top: 9px; padding-bottom: 3px; border-bottom: 1px solid #dce7df; font-weight: 700; }
.agro-comparison-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.agro-comparison-row > span { overflow-wrap: anywhere; }
.agro-comparison-row > b { flex-shrink: 0; font-variant-numeric: tabular-nums; }


.agro-insights-navbar .agro-reset-view {
 color: #405b4b; font: 13px "Segoe UI", Arial, sans-serif; cursor: pointer;
}
.agro-insights-navbar .agro-reset-view:hover { background: #e5f2e9; }


/* Configure is first on the left, retaining the original green action style. */
.agro-view-controls .agro-configure-local {
 order: -1; background: #399b60; border-color: #2d8550; color: #fff;
 box-shadow: 0 1px 3px rgba(25,65,40,.15);
}
.agro-view-controls .agro-configure-local:hover {
 background: #2d8550; border-color: #246e41; color: #fff;
}



/* Empty graphs must still allow measurement selection. */
.agro-empty-view .agro-view-controls {
 display: flex;
}
.agro-empty-view .agro-view-controls > .agro-view-toggle {
 display: none;
}
.agro-empty-view .agro-view-controls > .agro-configure-local {
 display: inline-flex; align-items: center; justify-content: center;
}


/* Wider measurement selection; each option occupies one readable line. */
[id="generic-modal-agro-insights-configuration"] .modal-dialog {
 width: min(1480px, 96vw); max-width: 96vw;
}
#vcm-pu-selection-accordion .row > .col-6 { flex: 0 0 33.333333%; width: 33.333333%; }
#vcm-pu-selection-accordion .row > .col-5 { flex: 0 0 58.333333%; width: 58.333333%; }
#vcm-pu-selection-accordion .Select-option,
#vcm-pu-selection-accordion .VirtualizedSelectOption,
#vcm-pu-selection-accordion [role="option"],
#vcm-pu-selection-accordion .Select-value-label {
 white-space: nowrap !important; line-height: 1.4;
}
#vcm-pu-selection-accordion .VirtualizedSelectOption > span,
#vcm-pu-selection-accordion [role="option"] > span { white-space: nowrap !important; }
#vcm-pu-selection-accordion .Select-menu-outer { overflow-x: auto; }
@media (max-width: 767px) {
 #vcm-pu-selection-accordion .row > .col-6 { flex-basis: 83.333333%; width: 83.333333%; }
 #vcm-pu-selection-accordion .row > .col-1 { flex-basis: 16.666667%; width: 16.666667%; }
 #vcm-pu-selection-accordion .row > .col-5 { flex-basis: 100%; width: 100%; }
}