/* v18 - definitions, compact table, Ky, no-scroll crops, fuller calculator page (load last) */
.swd-ind-i { margin-left: 4px; color: #7B8B98; cursor: help; font-size: .9em; }
.swd-ind-tag { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 999px;
  font-size: 7.5px; line-height: 1.5; background: #EEF2F5; color: #475569; }
.swd-ind-tag.good { background: #EAF3F1; color: #3F7F70; }
.swd-ind-tag.warn { background: #FBF3E6; color: #8A6A1F; }
.swd-mix-note { font-size: 7.5px; color: #5F6F7C; margin-top: 2px; line-height: 1.3; }

/* definition lists under budget charts */
.swd-defs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; margin-top: 2px;
  padding-top: 3px; border-top: 1px dashed #E3E8EE; }
.swd-def { display: flex; gap: 4px; align-items: flex-start; font-size: 7.5px; line-height: 1.3; color: #475569; }
.swd-def .swd-dot { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 2px; border-radius: 2px; }
.swd-def b { color: #1E293B; }

/* Overview: crops card without inner scroll */
.ov-crops { contain: none !important; }
.ov-crops .swd-card-body { overflow: visible !important; }
.swd-ov-row3 { align-items: stretch; }

/* Calculator: bottom row fills the remaining height */
.cg-budget { min-width: 0; }
.cg-budget .swd-card-body { overflow: hidden; }
.cg-monthly .swd-tab-note { margin-bottom: 0 !important; }

/* summary head with 5 boxes + Ky line */
.swd-sa-head.swd-sa-head5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1500px) { .swd-sa-head.swd-sa-head5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.swd-sa-ky { font-size: 8.5px; color: #475569; margin: 0 0 4px; }
.swd-sa-ky b { color: #1E293B; }

/* Ky in the left panel (just below the Kc graph) */
.sb-ky { margin: 2px 0 6px; padding: 4px 7px; border-radius: 7px;
  background: rgba(123, 198, 126, .12); color: var(--swd-sb-text); font-size: 9.5px; }
.sb-ky b { color: #fff; }
.sb-ky-note { font-size: 7.5px; color: var(--swd-sb-muted); line-height: 1.3; margin-top: 1px; }

/* compact sustainable-area table: no horizontal scroll */
.swd-table-scroll { overflow-x: visible !important; }
.swd-table-scroll .reactable { min-width: 0 !important; }
#table .rt-th, #table .rt-td { padding: 2px 4px !important; white-space: nowrap; }
#table .rt-tr { min-height: 0 !important; }
.swd-ystory.swd-ystory-c { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 3px 6px !important; margin-bottom: 4px !important; font-size: 8.5px; color: #475569; }
.swd-ystory-c b { color: #1E293B; }
.swd-ystory-c .good { color: #3F7F70; font-weight: 700; }
.swd-ystory-c .bad { margin-left: auto; color: #5F6F7C; }

/* ===== v19 ===== */
/* 17) summary view fills the card: rows spread out, key messages at the bottom */
.cg-sa .swd-card-body { display: flex; flex-direction: column; }
.cg-sa .swd-card-body > .shiny-panel-conditional { flex: 0 0 auto; }   /* table + graph panels keep their own height */
.cg-sa .swd-card-body > #sa_view_panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#sa_view_panel > .shiny-html-output, #sa_view_panel > .html-widget { flex: 0 0 auto; }
#sa_view_panel > .swd-table-scroll { flex: 1 1 auto; min-height: 0; }
#sa_view_panel > #sa_summary { flex: 1 1 auto; }
/* a conditionalPanel that Shiny has hidden must stay hidden (display:flex above would otherwise win) */
.cg-sa .swd-card-body > .shiny-panel-conditional[hidden],
.cg-sa .swd-card-body > .shiny-panel-conditional[style*="display: none"],
.cg-sa .swd-card-body > .shiny-panel-conditional[style*="display:none"] { display: none !important; }
.cg-sa #sunburst { flex: 0 0 auto; min-height: 240px; }
#sa_summary { flex: 1 1 auto; display: flex; flex-direction: column; }
#sa_summary .swd-sa-row { padding: 3px 2px !important; }
.swd-sa-msg { margin-top: auto; padding: 5px 7px; border-radius: 7px; background: #F7F9FA; border: 1px solid #E3E8EE; }
.swd-sa-msg .swd-subhead { margin: 0 0 2px !important; }
.swd-sa-msg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.swd-sa-msg li { display: flex; gap: 6px; align-items: flex-start; font-size: 9px; line-height: 1.35; color: #33424E; }
.swd-sa-msg li > i { width: 11px; margin-top: 2px; color: #5A9E8F; font-size: 8.5px; }
.swd-sa-msg li.bad > i { color: #B5523F; }
.swd-sa-msg li.note { color: #6B7A86; font-style: italic; }
.swd-sa-msg li.note > i { color: #8A99A6; }

/* 18) Data Explore seasonal summary: show the status sentence, chart takes the remaining height */
.swd-pixel-card .swd-status-text { display: block !important; font-size: 8.5px !important; margin-top: 2px !important; }
.swd-pixel-card .tab-pane.active:has(#pixel_table) > #pixel_plot,
.swd-pixel-card .tab-pane.active:has(#pixel_table) > #pixel_plot.html-widget {
  height: calc(100vh - 410px) !important; min-height: 240px !important; }

/* v19b - marginally sustainable explanation */
.swd-legend-note { font-size: 7.5px; line-height: 1.3; color: #6B5523; background: #FBF3E6;
  border-radius: 5px; padding: 2px 5px; margin: 2px 0 3px; max-width: 220px; }
.swd-legend-row .swd-ind-i { margin-left: 3px; color: #8A99A6; cursor: help; font-size: .9em; }

/* ===== v20 - Hide/show panel toggle attached to the sidebar ===== */
/* the bslib edge button is hidden; the context-bar button drives it (JS .click() still works) */
.swd-shell > .collapse-toggle { opacity: 0 !important; pointer-events: none !important; width: 0 !important; overflow: hidden !important; }

.swd-ctx { padding-left: 0 !important; }
.swd-ctx-toggle {
  align-self: stretch; display: inline-flex; align-items: center; gap: 4px;
  margin: 0 4px 0 0; padding: 0 10px 0 8px; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--swd-navy) !important; color: var(--swd-sb-text) !important;
  border-radius: 0 8px 8px 0; font-size: 9.5px; font-weight: 700; letter-spacing: .2px;
  box-shadow: 3px 0 8px rgba(16, 38, 26, .18); transition: background .12s, color .12s;
}
.swd-ctx-toggle:hover { background: var(--swd-navy-3) !important; color: #fff !important; }
.swd-ctx-toggle:focus-visible { outline: 2px solid var(--swd-accent); outline-offset: -2px; }
.swd-ctx-toggle i { color: var(--swd-accent); font-size: 10px; }
.swd-ctx-toggle .swd-tg-hide, .swd-ctx-toggle .swd-tg-show { display: inline-flex; align-items: center; gap: 3px; }
.swd-ctx-toggle .swd-tg-show { display: none; }
.swd-shell.sidebar-collapsed .swd-ctx-toggle .swd-tg-hide { display: none; }
.swd-shell.sidebar-collapsed .swd-ctx-toggle .swd-tg-show { display: inline-flex; }
@media (max-width: 1150px) { .swd-ctx-toggle .swd-tg-txt { display: none; } }

/* v19c - Sustainable area table: readable headers, no side scroll, taller rows */
#table .rt-th { white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  line-height: 1.2 !important; padding: 5px 5px !important; font-size: 9px !important; align-items: flex-end; }
#table .rt-th-content, #table .rt-th-inner { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
#table .rt-td { padding: 7px 5px !important; font-size: 10px !important; }
#table .rt-td:first-child, #table .rt-th:first-child { white-space: normal !important; }
#table .rt-tr-group { flex: 1 1 auto; }
.swd-table-scroll .reactable { height: 100%; }
.swd-yr-legend { margin-top: 6px !important; flex: 0 0 auto; }
#table .rt-td:nth-child(2), #table .rt-th:nth-child(2) { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; }

/* ===== v19d - MORE VISIBLE POPUPS (modals; toasts are styled inline in app.R) ===== */
/* modals: wider, larger text, stronger backdrop (override the per-popup inline styles) */
.modal-backdrop.show { opacity: .6 !important; }
#shiny-modal .modal-dialog { margin-top: 12vh !important; }
#shiny-modal .modal-dialog.modal-sm { max-width: 460px !important; }
#shiny-modal .modal-content { border-width: 3px !important; border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .38) !important; }
#shiny-modal .modal-body { font-size: 15px !important; line-height: 1.5 !important; padding: 18px 22px 8px !important; }
#shiny-modal .modal-body p { margin-bottom: 8px !important; }
#shiny-modal .modal-body p:first-child { font-size: 17px !important; }
#shiny-modal .modal-footer { padding: 10px 22px 18px !important; }
#shiny-modal .btn { font-size: 14px !important; padding: 7px 22px !important; border-radius: 8px !important; font-weight: 600; }