/* SensiGrow Alerts: all rules are scoped to the existing modal. */
#generic-modal-alerts.modal-dialog,
#generic-modal-alerts .modal-dialog {
  width: min(1240px, calc(100vw - 32px)) !important;
  max-width: min(1240px, calc(100vw - 32px)) !important;
  margin: 4vh auto;
}
#generic-modal-alerts .modal-content {
  height: 88vh;
  height: 88dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #dce5ed;
  border-radius: 18px;
  box-shadow: 0 24px 80px #20354d30;
  background: #f5f8fb;
  color: #24364b;
}
#generic-modal-alerts .modal-header {
  padding: 18px 24px;
  background: #fff;
  border-bottom: 1px solid #e3eaf1;
}
#generic-modal-alerts .modal-title { font-size: 21px; font-weight: 700; }
#generic-modal-alerts .modal-footer {
  background: #fff;
  border-top: 1px solid #e3eaf1;
  padding: 12px 24px;
  gap: 10px;
}
#generic-modal-alerts .modal-footer .btn {
  min-width: 104px;
  min-height: 42px;
  border-radius: 9px;
  font-weight: 600;
  margin: 0;
}
#generic-modal-cancel-btn-alerts { background: #fff; color: #475569; border-color: #ccd8e3; }
#generic-modal-apply-btn-alerts { background: #177da5; border-color: #177da5; color: #fff; }
#generic-modal-apply-btn-alerts:hover { background: #126385; border-color: #126385; }
#generic-modal-alerts .modal-body { position: relative; min-height: 0; padding: 0; overflow: hidden; }
/* Preserve the bounded viewport through generic modal Loading wrappers. */
#generic-modal-alerts .modal-body div:has(#generic-modal-body-alerts),
#generic-modal-body-alerts,
#generic-modal-alerts .alerts-modal-layout,
#generic-modal-alerts .alerts-modal-layout > div {
  position: static !important;
  height: 100%;
  min-height: 0;
}
#generic-modal-alerts .nav-tabs {
  height: 62px;
  box-sizing: border-box;
  padding: 10px 24px 0;
  gap: 8px;
  flex-wrap: nowrap;
  background: #fff;
  border-bottom: 1px solid #dfe7ef;
}
#generic-modal-alerts .nav-tabs .nav-link {
  padding: 13px 20px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #64748b;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
}
#generic-modal-alerts .nav-tabs .nav-link.active {
  color: #126e94;
  background: #eef7fb;
  border-bottom-color: #177da5;
}
#generic-modal-alerts .tab-content { position: absolute; inset: 62px 0 0; overflow: hidden; min-height: 0; }
#generic-modal-alerts .tab-pane { position: relative; height: 100%; min-height: 0; }
#generic-modal-alerts .alerts-timeline-scroll {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
/* Keep tall timelines inside the modal viewport; scroll within the plot to
   inspect every plant-unit lane without letting the fixed footer cover it. */
#generic-modal-alerts .alerts-plot-viewport {
  max-height: 560px;
  overflow: auto;
  min-height: 300px;
  scrollbar-gutter: stable;
}
#generic-modal-alerts .alerts-timeline-plot { min-height: 300px; width: 100%; }
#generic-modal-alerts .alerts-dashboard { padding: 22px 24px 28px; display: grid; gap: 18px; }
#generic-modal-alerts .alerts-intro h4 { font-size: 20px; font-weight: 700; margin: 0 0 5px; }
#generic-modal-alerts .alerts-intro p,
#generic-modal-alerts .alerts-section-heading p { color: #64748b; font-size: 13px; margin: 0; line-height: 1.6; }
#generic-modal-alerts .alerts-filters {
  display: grid;
  grid-template-columns: minmax(290px, 1fr) minmax(240px, 1.2fr);
  gap: 16px 22px;
  padding: 20px;
  background: #fff;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
}
#generic-modal-alerts .alerts-filters > div { min-width: 0; }
#generic-modal-alerts .alerts-field-label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; color: #52647a; }
#generic-modal-alerts .alerts-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
#generic-modal-alerts .alerts-quick-actions button {
  border: 1px solid #dbe6ee;
  background: #f6f9fc;
  color: #32637c;
  border-radius: 6px;
  padding: 5px 10px;
  min-height: 32px;
  font-size: 12px;
  cursor: pointer;
}
#generic-modal-alerts .alerts-quick-actions button:hover { background: #eaf4fa; border-color: #93c4d9; }
#generic-modal-alerts .alerts-selection-count { align-self: center; color: #64748b; font-size: 12px; margin-inline-end: auto; }
/* The count and its tooltip summarize selections without expanding the filter. */
#generic-modal-alerts #alerts-viz-plant-units .Select-multi-value-wrapper {
  display: block; max-height: 82px; overflow-y: auto;
}
#generic-modal-alerts .DateRangePicker { display: block; }
#generic-modal-alerts .DateRangePickerInput { border: 1px solid #d5e0e9; border-radius: 8px; display: flex; align-items: center; width: 100%; }
#generic-modal-alerts .DateInput { width: 44%; background: transparent; }
#generic-modal-alerts .DateInput_input { padding: 10px 8px; font-size: 13px; color: #334155; background: transparent; }
#generic-modal-alerts .DateRangePicker_picker { z-index: 20; }
#generic-modal-alerts .Select-control { border-color: #d5e0e9; border-radius: 8px; min-height: 40px; }
#generic-modal-alerts .Select-menu-outer { z-index: 15; }
#generic-modal-alerts .Select--multi .Select-value { background: #edf6fa; color: #176c8f; border-color: #cfe4ee; }
#generic-modal-alerts .alerts-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#generic-modal-alerts .alerts-summary:empty { display: none; }
#generic-modal-alerts .alerts-summary-card {
  padding: 17px 18px;
  background: #fff;
  border: 1px solid #dfe7ef;
  border-top: 3px solid #177da5;
  border-radius: 10px;
  box-shadow: 0 3px 9px #30455b05;
}
#generic-modal-alerts .alerts-summary-card:nth-child(2) { border-top-color: #21856a; }
#generic-modal-alerts .alerts-summary-card:nth-child(3) { border-top-color: #8460b0; }
#generic-modal-alerts .alerts-summary-card:nth-child(4) { border-top-color: #d99024; }
#generic-modal-alerts .alerts-summary-card span { display: block; color: #64748b; font-size: 12px; margin-bottom: 6px; }
#generic-modal-alerts .alerts-summary-card strong { font-size: 27px; font-weight: 700; color: #263b50; font-variant-numeric: tabular-nums; }
#generic-modal-alerts .alerts-surface { background: #fff; border: 1px solid #dfe7ef; border-radius: 12px; min-width: 0; padding: 18px 12px 8px; }
#generic-modal-alerts .alerts-section-heading { padding: 0 8px 12px; }
#generic-modal-alerts .alerts-section-heading h5 { font-size: 15px; font-weight: 700; margin: 0 0 5px; }
#generic-modal-alerts .alerts-events { padding-bottom: 16px; }
#generic-modal-alerts .dash-spreadsheet-container { border: 1px solid #e7edf3; border-radius: 8px; }
#generic-modal-alerts .previous-next-container { margin-top: 10px; }
#generic-modal-alerts .alerts-config-panel { position: absolute; inset: 0; min-height: 0; }
#generic-modal-alerts .alerts-config-table {
  position: absolute;
  inset: 22px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
  background: white;
}
#generic-modal-alerts .alerts-config-header,
#generic-modal-alerts .alerts-config-row {
  display: grid;
  grid-template-columns: 32px minmax(140px, 1.1fr) minmax(145px, .8fr) minmax(200px, 1.4fr);
  margin: 0;
  gap: 16px;
  padding: 16px 20px;
}
#generic-modal-alerts .alerts-config-header > *,
#generic-modal-alerts .alerts-config-row > * { width: auto; min-width: 0; padding: 0; }
#generic-modal-alerts .alerts-config-header { position: sticky; top: 0; z-index: 5; background: #f1f6fa; font-size: 12px; color: #52647a; border-bottom: 1px solid #dfe7ef; }
#generic-modal-alerts .alerts-config-row { border-bottom: 1px solid #edf1f5; font-size: 13px; min-height: 76px; }
#generic-modal-alerts .alerts-config-row:last-child { border-bottom: 0; }
#generic-modal-alerts .alerts-config-row:hover,
#generic-modal-alerts .alerts-config-row:focus-within { background: #f7fafc; }
#generic-modal-alerts .alerts-config-row:has(input:checked) { background: #f0f8fc; box-shadow: inset 3px 0 #177da5; }
#generic-modal-alerts .alerts-config-row .form-control { min-height: 40px; border-radius: 8px; border-color: #d5e0e9; }
#generic-modal-alerts .alerts-select { margin: 0; }
#generic-modal-alerts .alerts-select .form-check-input { height: 18px; width: 18px; cursor: pointer; }
#generic-modal-alerts .alerts-select label { position: absolute; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#generic-modal-alerts .alerts-mobile-label { display: none; }
/* Room for the final dropdown menu inside the independently scrolling tab. */
#generic-modal-alerts #alert-types-list:has(.is-open) { padding-bottom: 240px; }
#generic-modal-alerts :is(input, button, a, [tabindex]):focus-visible { outline: 2px solid #177da5; outline-offset: 3px; }
@media (max-width: 800px) {
  #generic-modal-alerts .alerts-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #generic-modal-alerts .alerts-filters { grid-template-columns: 1fr; }
  #generic-modal-alerts .alerts-config-header { display: none; }
  #generic-modal-alerts .alerts-config-row { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  #generic-modal-alerts .alerts-config-row > :nth-child(3),
  #generic-modal-alerts .alerts-config-row > :nth-child(4) { grid-column: 2; }
  #generic-modal-alerts .alerts-mobile-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 6px; }
}
@media (max-width: 480px) {
  #generic-modal-alerts.modal-dialog,
  #generic-modal-alerts .modal-dialog { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; margin: 6px auto; }
  #generic-modal-alerts .modal-content { height: calc(100vh - 12px); height: calc(100dvh - 12px); border-radius: 12px; }
  #generic-modal-alerts .modal-header,
  #generic-modal-alerts .modal-footer { padding: 12px 14px; }
  #generic-modal-alerts .nav-tabs { padding-inline: 12px; gap: 0; }
  #generic-modal-alerts .nav-tabs .nav-link { padding-inline: 14px; }
  #generic-modal-alerts .alerts-dashboard { padding: 16px 12px; gap: 14px; }
  #generic-modal-alerts .alerts-filters { padding: 14px; }
  #generic-modal-alerts .alerts-summary { gap: 9px; }
  #generic-modal-alerts .alerts-summary-card { padding: 12px; }
  #generic-modal-alerts .alerts-summary-card strong { font-size: 24px; }
  #generic-modal-alerts .alerts-config-table { inset: 14px 12px; }
  #generic-modal-alerts .alerts-config-row { padding: 14px 12px; }
  #generic-modal-alerts .DateInput_input { font-size: 12px; padding-inline: 5px; }
}

/* Readability pass: the original dashboard labels were difficult to read at
   normal desktop zoom. Keep controls and data legible without changing layout. */
#generic-modal-alerts.modal-dialog,
#generic-modal-alerts .modal-dialog {
  width: min(1500px, calc(100vw - 64px)) !important;
  max-width: min(1500px, calc(100vw - 64px)) !important;
}
#generic-modal-alerts .modal-content { height: 94vh; height: 94dvh; }
#generic-modal-alerts.modal-dialog,
#generic-modal-alerts .modal-dialog { margin-block: 3vh; }
#generic-modal-alerts .modal-dialog.modal-xl,
#generic-modal-alerts.modal-xl .modal-dialog {
  width: calc(100vw - 64px) !important;
  max-width: 1500px !important;
}
#generic-modal-alerts,
#generic-modal-alerts .modal-content { font-size: 15px; }
#generic-modal-alerts .modal-title { font-size: 23px; }
#generic-modal-alerts .nav-tabs .nav-link { font-size: 15px; }
#generic-modal-alerts .alerts-intro h4 { font-size: 23px; }
#generic-modal-alerts .alerts-intro p,
#generic-modal-alerts .alerts-section-heading p { font-size: 14px; }
#generic-modal-alerts .alerts-field-label { font-size: 14px; }
#generic-modal-alerts .alerts-quick-actions button { font-size: 13px; min-height: 36px; }
#generic-modal-alerts .alerts-selection-count { font-size: 13px; }
#generic-modal-alerts .DateInput_input { font-size: 15px; }
#generic-modal-alerts .Select-placeholder,
#generic-modal-alerts .Select-value-label,
#generic-modal-alerts .Select-input input { font-size: 14px; }
#generic-modal-alerts .alerts-summary-card { padding: 19px 20px; }
#generic-modal-alerts .alerts-summary-card span { font-size: 14px; }
#generic-modal-alerts .alerts-summary-card strong { font-size: 32px; }
#generic-modal-alerts .alerts-summary-card strong { line-height: 1.2; }
#generic-modal-alerts .alerts-section-heading h5 { font-size: 18px; }
#generic-modal-alerts .alerts-config-header { font-size: 14px; }
#generic-modal-alerts .alerts-config-row { font-size: 15px; }
#generic-modal-alerts .alerts-mobile-label { font-size: 14px; }
#generic-modal-alerts .alerts-config-row .form-control { font-size: 15px; }
#generic-modal-alerts .dash-spreadsheet-container,
#generic-modal-alerts .dash-spreadsheet-container * { font-size: 14px; }
#generic-modal-alerts .dash-spreadsheet-container th,
#generic-modal-alerts .dash-spreadsheet-container td { padding: 12px 14px !important; }
#generic-modal-alerts .modal-footer .btn { font-size: 15px; min-height: 46px; }
@media (max-width: 800px) {
  #generic-modal-alerts.modal-dialog,
  #generic-modal-alerts .modal-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
  #generic-modal-alerts .modal-dialog.modal-xl,
  #generic-modal-alerts.modal-xl .modal-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
  #generic-modal-alerts .modal-content { height: 94vh; height: 94dvh; }
}
/* One body scroller: content takes its natural height, including Plotly. */
#generic-modal-alerts .modal-body { overflow: auto !important; }
#generic-modal-alerts .modal-body div:has(#generic-modal-body-alerts),
#generic-modal-body-alerts,
#generic-modal-alerts .alerts-modal-layout,
#generic-modal-alerts .alerts-modal-layout > div { height: auto !important; }
#generic-modal-alerts .tab-content { position: static !important; height: auto !important; overflow: visible !important; }
#generic-modal-alerts .tab-pane { height: auto !important; }
#generic-modal-alerts .alerts-timeline-scroll { height: auto !important; overflow: visible !important; }
#generic-modal-alerts .alerts-config-panel { position: relative !important; padding: 20px; }
#generic-modal-alerts .alerts-config-table { position: relative !important; inset: auto !important; max-height: 60vh; }
/* Bound the complete dialog to the viewport. Only the tab content scrolls. */
body:has(#generic-modal-alerts.show),
body.modal-open { overflow: hidden !important; }
#generic-modal-alerts.modal-dialog,
#generic-modal-alerts .modal-dialog { margin: 12px auto !important; }
#generic-modal-alerts .modal-content {
  height: calc(100vh - 180px) !important;
  height: calc(100dvh - 180px) !important;
  max-height: calc(100dvh - 180px) !important;
}
#generic-modal-alerts .modal-body { overflow: hidden !important; }
#generic-modal-alerts .modal-body div:has(#generic-modal-body-alerts),
#generic-modal-body-alerts,
#generic-modal-alerts .alerts-modal-layout,
#generic-modal-alerts .alerts-modal-layout > div { height: 100% !important; min-height: 0; }
#generic-modal-alerts .tab-content {
  position: absolute !important; inset: 62px 0 0;
  height: auto !important; overflow: auto !important;
}
#generic-modal-alerts .nav-tabs { position: relative; z-index: 10; }
#generic-modal-alerts .alerts-config-panel { padding: 20px; }
#generic-modal-alerts .alerts-config-table { max-height: none; overflow: visible; }
#generic-modal-alerts .alerts-config-actions { padding: 14px 20px; display: flex; justify-content: flex-end; }
#generic-modal-apply-btn-alerts { display: none !important; }
#generic-modal-cancel-btn-alerts { background: #177da5; border-color: #177da5; color: white; }
/* The application header occupies space above the dialog host. Leave room
   for it as well as the footer instead of sizing to the full browser height. */
html:has(.alerts-modal-layout),
body:has(.alerts-modal-layout) { overflow: hidden !important; }
#generic-modal-alerts.modal-dialog,
#generic-modal-alerts .modal-dialog {
  margin-block: 8px !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 180px) !important;
}
#generic-modal-alerts .modal-header,
#generic-modal-alerts .modal-footer { flex-shrink: 0; }