/* =====================================================================
   SWaRD - COMPACT DENSITY LAYER  (www/sward_compact.css)
   Load LAST (after styles.css and sward_dashboard.css), or paste this
   whole file at the end of sward_dashboard.css.
   Shrinks headings, body text, controls, padding and gaps everywhere.
   ===================================================================== */

/* ---------- 1. Global scale -------------------------------------------
   Bootstrap / bslib sizes are in rem: a 13 px root makes every heading,
   input, button, nav link, card padding and bslib gap ~19 % smaller.   */
html { font-size: 13px; }
body { font-size: 11px !important; line-height: 1.35; }
.swd-shell h1, .swd-shell h2, .swd-shell h3, .swd-shell h4, .swd-shell h5, .swd-shell h6 {
  line-height: 1.2 !important; margin-bottom: 0;
}
:root { --bslib-spacer: .5rem; --bs-gutter-x: .6rem; }

/* ---------- 2. Top bar + module rail + context bar ---------- */
.navbar { min-height: 40px !important; padding: 0 !important; }
.swd-brand-logo { height: 24px !important; }
.swd-brand-divider { height: 20px !important; }
.swd-brand-name { font-size: 13px !important; }
.swd-brand-sub { font-size: 8.5px !important; }
.navbar-nav .nav-link { font-size: 10.5px !important; padding: .2rem .55rem !important; }
.navbar-nav .nav-link i { font-size: 10px; }

.swd-shell, .swd-shell > .main > .row { min-height: calc(100vh - 40px) !important; }
.swd-shell > .main > .row > .col-sm-2 { height: calc(100vh - 40px) !important; padding: 6px 6px !important;
  flex: 0 0 50px !important; max-width: 50px !important; width: 50px !important; }
.swd-shell .col-sm-2 > .nav { width: 38px !important; }
.swd-shell .col-sm-2:hover > .nav { width: 220px !important; }
.rail-ico { width: 30px !important; height: 30px !important; font-size: 12px !important; border-radius: 8px !important; }
.swd-shell .col-sm-2 .nav-link { grid-template-columns: 30px 1fr auto !important; padding: 3px !important; }
.rail-name { font-size: 11px !important; } .rail-sub { font-size: 8.5px !important; } .rail-num { font-size: 9px !important; }

.swd-shell > .main > .row > .col-sm-10 { padding: 0 8px 4px !important; }
#ctx_bar { margin: 0 -8px 5px !important; }
.swd-ctx { padding: 2px 8px !important; gap: 8px !important; }
.swd-ctx-crumb { font-size: 9.5px !important; gap: 5px !important; }
.swd-ctx-crumb strong { font-size: 10.5px !important; }
.swd-ctx-chips { gap: 4px !important; }
.swd-ctx-chips .swd-chip { padding: 1px 7px 1px 2px !important; gap: 4px !important; border-radius: 999px; }
.swd-ctx-chips .swd-chip-icon { width: 17px !important; height: 17px !important; flex-basis: 17px !important; font-size: 8px !important; }
.swd-ctx-chips .swd-chip-label { font-size: 7.5px !important; }
.swd-ctx-chips .swd-chip-value { font-size: 9.5px !important; }
.swd-ctx-btn { padding: 2px 9px !important; font-size: 10px !important; }

/* ---------- 3. Page headings, sections, notes ---------- */
.swd-page { gap: 5px !important; }
.swd-head { flex-direction: row !important; align-items: baseline !important; gap: 8px !important; }
.swd-head h2 { font-size: 12.5px !important; font-weight: 750; }
.swd-head p { font-size: 9.5px !important; margin: 0 !important; }
.swd-head-q { display: none !important; }                 /* decorative question pill */
.swd-section { gap: 6px !important; margin: 0 !important; }
.swd-section h4 { font-size: 10.5px !important; }
.swd-section p { font-size: 9px !important; }
.swd-section-num { font-size: 8.5px !important; padding: 0 6px !important; }
.swd-subhead { font-size: 8px !important; margin: 3px 0 1px !important; letter-spacing: .4px !important; }

/* footnote: one line, full text on hover */
.swd-footnote { font-size: 8.5px !important; padding: 2px 8px !important; line-height: 1.3 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px !important; }
.swd-footnote:hover { white-space: normal; }
.swd-footnote i { font-size: 9px; margin-top: 1px; }

/* folded panels */
.swd-about > summary { padding: 3px 8px !important; font-size: 10px !important; }
.swd-about-hint { font-size: 9px !important; }

/* ---------- 4. Grids + cards ---------- */
.swd-grid, .swd-strip, .swd-ov-row2, .swd-ov-row3, .swd-calc-grid,
.swd-vb-grid, .swd-wb, .swd-cmpk-grid, .swd-cmp-steps { gap: 5px !important; }
.swd-card { border-radius: 8px !important; box-shadow: none !important; }
.swd-card-head { padding: 3px 7px !important; min-height: 24px !important; gap: 6px !important; }
.swd-card-icon { width: 16px !important; height: 16px !important; flex-basis: 16px !important; font-size: 8px !important; border-radius: 4px !important; }
.swd-card-title, .swd-card .card-title, .swd-shell .card-title { font-size: 10px !important; font-weight: 700 !important; }
.swd-card-body { padding: 4px 7px !important; }
.graph-title { gap: 4px !important; }
.graph-title .info-icon { font-size: 8.5px !important; }
.swd-hint { padding: 2px 7px !important; margin-bottom: 4px !important; font-size: 9.5px !important; }

/* bslib cards / tabbed cards (monthly analysis, pixel details) */
.swd-shell .card-header { padding: 0 6px !important; min-height: 0 !important; }
.swd-shell .card-header .nav-link, .swd-shell .nav-pills .nav-link,
.swd-shell .nav-underline .nav-link { font-size: 9.5px !important; padding: 4px 7px !important; }
.swd-shell .card-body { padding: 4px 7px !important; }
.swd-tab-note { font-size: 9.5px !important; }

/* segmented switches */
.swd-seg span, #sa_view span { padding: 1px 6px !important; font-size: 8.5px !important; }
.swd-seg .shiny-options-group, #sa_view .shiny-options-group { padding: 2px !important; }

/* ---------- 5. KPI, chips, tags ---------- */
.swd-kpi { padding: 3px 7px !important; gap: 6px !important; border-radius: 8px !important; }
.swd-kpi-icon { width: 20px !important; height: 20px !important; flex-basis: 20px !important; font-size: 9px !important; border-radius: 6px !important; }
.swd-kpi-label { font-size: 8px !important; }
.swd-kpi-value { font-size: 11.5px !important; }
.swd-kpi-note { font-size: 7.5px !important; }
.swd-chip { padding: 3px 6px !important; gap: 5px !important; }
.swd-chip-icon { width: 20px !important; height: 20px !important; flex-basis: 20px !important; font-size: 9px !important; }
.swd-chip-label { font-size: 8px !important; } .swd-chip-value { font-size: 10px !important; }
.swd-tag { font-size: 9px !important; padding: 1px 6px !important; }
.swd-pin-mini .btn { padding: 1px 6px !important; font-size: 9px !important; }

/* ---------- 6. Overview ---------- */
.swd-ov-hero { padding: 4px 8px !important; gap: 8px !important; border-radius: 8px !important; }
.swd-ov-eyebrow { font-size: 8px !important; }
.swd-ov-name { font-size: 13px !important; margin: 0 0 2px !important; }
.swd-ov-stat { padding: 0 6px !important; gap: 4px !important; }
.swd-ov-stat-ico { width: 17px !important; height: 17px !important; flex-basis: 17px !important; font-size: 8px !important; border-radius: 5px !important; }
.swd-ov-stat-lab { font-size: 7.5px !important; }
.swd-ov-stat-val, .swd-ov-stat-val div { font-size: 10px !important; }
.swd-ai { padding: 3px 6px !important; }
.swd-ai-val { font-size: 11px !important; }
.swd-ai-scale { height: 6px !important; margin: 4px 0 1px !important; }
.swd-ai-lbl { font-size: 7.5px !important; }
.swd-ind-grid { gap: 4px !important; margin-top: 4px !important; }
.swd-ind { padding: 3px 5px !important; gap: 5px !important; }
.swd-ind-ico { width: 17px !important; height: 17px !important; flex-basis: 17px !important; font-size: 8px !important; }
.swd-ind-lab { font-size: 7.5px !important; } .swd-ind-val { font-size: 10.5px !important; } .swd-ind-note { font-size: 7.5px !important; }
.swd-mix-bar { height: 6px !important; } .swd-mix-legend { font-size: 8px !important; gap: 6px !important; }
.swd-clim-m { font-size: 7.5px !important; padding: 1px 0 !important; }
.swd-clim-legend { font-size: 7.5px !important; margin-top: 2px !important; }
.swd-cl { gap: 4px !important; margin-bottom: 3px !important; }
.swd-cl-item { padding: 3px 6px !important; } .swd-cl-val { font-size: 10.5px !important; }
.swd-crops .fund-item { padding: 2px 0 !important; }
.swd-crops .fund-title { font-size: 9px !important; margin-bottom: 1px !important; }
.swd-crops .progress-track { height: 4px !important; }
.swd-crops .fund-meta, .swd-crops .amount-detail, .swd-crops .percentage { font-size: 8px !important; }
.swd-kf li { font-size: 9.5px !important; line-height: 1.4 !important; }
.swd-flow-title { font-size: 10px !important; } .swd-flow-desc { font-size: 8.5px !important; }

/* ---------- 7. Sustainability Calculator ---------- */
.swd-mapcard-title { padding: 2px 7px !important; font-size: 10px !important; min-height: 24px !important; }
.swd-ms { padding: 0 6px !important; } .swd-ms-l { font-size: 7.5px !important; } .swd-ms-v { font-size: 9px !important; }
.swd-float-layers { width: 146px !important; padding: 3px 6px !important; top: 6px !important; right: 6px !important; }
.swd-layer label { font-size: 9px !important; }
.swd-layer .form-check-input, .swd-layer input[type=checkbox] { width: 11px; height: 11px; margin-top: 2px; }
.swd-legend { margin: 0 0 2px 16px !important; }
.swd-legend-row { font-size: 8px !important; }
.swd-swatch { width: 9px !important; height: 9px !important; flex-basis: 9px !important; }
.swd-sa-head { gap: 3px !important; margin-bottom: 4px !important; }
.swd-sa-head > div { padding: 2px 5px !important; }
.swd-sa-big { font-size: 11px !important; }
.swd-sa-stack { height: 12px !important; margin-bottom: 4px !important; }
.swd-sa-seg span { font-size: 7.5px !important; }
.swd-sa-cols { font-size: 7px !important; }
.swd-sa-row { padding: 1px 2px !important; }
.swd-sa-name, .swd-sa-ha { font-size: 8.5px !important; }
.swd-sa-ha span, .swd-sa-yr { font-size: 8px !important; }
.swd-sa-grp { font-size: 8px !important; padding: 0 5px !important; margin: 2px 0 1px !important; }
.swd-wbt { padding: 2px 5px !important; border-radius: 6px !important; }
.swd-wbt-ico { width: 14px !important; height: 14px !important; flex-basis: 14px !important; font-size: 7px !important; }
.swd-wbt-lab { font-size: 8px !important; }
.swd-wbt-val, .swd-wbt-val div { font-size: 9px !important; }
.swd-wbt-note { font-size: 7px !important; }
.swd-ystory { padding: 4px 6px !important; gap: 6px !important; margin-bottom: 4px !important; }
.swd-ystory-val { font-size: 14px !important; } .swd-ystory-lab, .swd-ystory-sub { font-size: 8px !important; }
.swd-yr-legend { font-size: 8.5px !important; gap: 8px !important; margin-top: 3px !important; }

/* ---------- 8. Data Explore ---------- */
.swd-pixel-head { padding: 4px 7px 3px !important; gap: 6px !important; }
.swd-pixel-coords { font-size: 9px !important; }
.swd-pixel-card .nav-pills { margin: 0 7px !important; padding: 2px !important; }
.swd-pixel-card .tab-content { padding: 5px 7px 6px !important; }
.swd-pixel-status { padding: 4px 7px !important; }
.swd-status-badge { font-size: 9.5px !important; padding: 1px 7px !important; }
.swd-status-meta { font-size: 9px !important; gap: 8px !important; }
.swd-status-text { font-size: 9.5px !important; margin-top: 3px !important; }
.swd-mini-kpis { gap: 4px !important; margin-top: 4px !important; }
.swd-mini-kpi { padding: 3px 5px !important; gap: 4px !important; }
.swd-mini-ico { width: 18px !important; height: 18px !important; flex-basis: 18px !important; font-size: 8px !important; }
.swd-mini-lab { font-size: 7.5px !important; } .swd-mini-val { font-size: 10.5px !important; }
.swd-rec-note { padding: 5px 7px !important; margin-bottom: 5px !important; }
.swd-rec-note h4 { font-size: 10.5px !important; } .swd-rec-note p { font-size: 9.5px !important; }
.swd-rec-grid { gap: 5px !important; }
.swd-rec-card { padding: 5px 6px !important; gap: 6px !important; }
.swd-rec-rank { width: 20px !important; height: 20px !important; flex-basis: 20px !important; font-size: 9px !important; }
.swd-rec-name { font-size: 10px !important; }
.swd-rec-group, .swd-rec-meta { font-size: 8.5px !important; }
.swd-badge { font-size: 8px !important; padding: 0 6px !important; }
.swd-rec-intro { font-size: 9.5px !important; }
.swd-best { padding: 4px 9px !important; margin-bottom: 5px !important; gap: 8px !important; }
.swd-best-ico { width: 24px !important; height: 24px !important; font-size: 10px !important; }
.swd-best-lab { font-size: 8px !important; } .swd-best-val { font-size: 12px !important; }
.swd-cal { gap: 3px !important; }
.swd-cal-m { padding: 3px 1px !important; gap: 2px !important; }
.swd-cal-name, .swd-cal-val { font-size: 8px !important; }
.swd-cal-bar { height: 26px !important; width: 10px !important; }
.swd-cal-legend { font-size: 8.5px !important; margin-top: 4px !important; }
.swd-empty-info h4 { font-size: 10.5px !important; } .swd-empty-info p { font-size: 8.5px !important; }
.swd-empty-info .swd-empty-icon { width: 26px !important; height: 26px !important; flex-basis: 26px !important; font-size: 11px !important; }

/* ---------- 9. Data Visualizer ---------- */
.swd-viz { grid-template-columns: 180px minmax(0, 1fr) !important; gap: 6px !important; }
.swd-viz-menu { padding: 4px !important; gap: 2px !important; }
.swd-menu-label { font-size: 8px !important; padding: 0 6px 3px !important; }
.option-card { padding: 3px 5px !important; gap: 5px !important; }
.opt-num { width: 18px !important; height: 18px !important; flex-basis: 18px !important; font-size: 8px !important; }
.opt-title { font-size: 10px !important; } .opt-desc { font-size: 8px !important; }
.swd-menu-foot .btn { font-size: 9.5px !important; padding: 3px 6px !important; }
.swd-viz-main { padding: 6px !important; }
.swd-viz-content { gap: 5px !important; }
.swd-viz-hero { padding: 4px 8px !important; gap: 8px !important; }
.swd-viz-hero-num { width: 24px !important; height: 24px !important; flex-basis: 24px !important; font-size: 10px !important; }
.swd-viz-main .swd-viz-hero h3.swd-viz-title { font-size: 11.5px !important; }
.swd-viz-desc { font-size: 9px !important; }
.swd-viz-unit { font-size: 8.5px !important; padding: 1px 7px !important; }
.swd-vstat { padding: 3px 7px !important; }
.swd-vstat-lab { font-size: 8px !important; } .swd-vstat-val { font-size: 11.5px !important; }
.swd-vstat-val span { font-size: 8.5px !important; }
.swd-viz-scale { font-size: 8.5px !important; }

/* ---------- 10. Compare Scenarios ---------- */
.swd-cmp-step { padding: 4px 7px !important; gap: 6px !important; }
.swd-cmp-step > span { width: 18px !important; height: 18px !important; flex-basis: 18px !important; font-size: 9px !important; }
.swd-cmp-step strong { font-size: 10px !important; } .swd-cmp-step small { font-size: 8.5px !important; }
.swd-srow { padding: 2px 3px !important; font-size: 9.5px !important; }
.swd-srow-h { font-size: 8.5px !important; }
.swd-ab { width: 15px !important; height: 15px !important; flex-basis: 15px !important; font-size: 8px !important; }
.swd-cmpk { padding: 4px 6px !important; gap: 3px !important; }
.swd-cmpk-top { font-size: 9px !important; gap: 5px !important; }
.swd-cmpk-ico { width: 18px !important; height: 18px !important; font-size: 8px !important; }
.swd-cmpk-vals > div { font-size: 10.5px !important; }
.swd-cmpk-delta { font-size: 8.5px !important; padding: 1px 6px !important; }
.swd-warn { font-size: 9.5px !important; padding: 3px 8px !important; }

/* ---------- 11. Inputs, buttons, tables, maps, popups ---------- */
.swd-shell .btn { font-size: 10px !important; padding: 2px 8px; border-radius: 6px !important; }
.swd-shell .form-control, .swd-shell .selectize-input, .swd-shell .form-select {
  font-size: 10px !important; min-height: 24px !important; padding: 2px 6px !important; }
.swd-shell .selectize-dropdown { font-size: 10px !important; }
.swd-shell .control-label, .swd-shell .form-label { font-size: 9.5px !important; margin-bottom: 1px !important; }
.swd-shell .shiny-input-container { margin-bottom: 4px !important; }
.swd-shell .checkbox label, .swd-shell .form-check-label, .swd-shell .radio label { font-size: 9.5px !important; }

.swd-shell .reactable { font-size: 9.5px !important; }
.swd-shell .rt-th, .swd-shell .rt-td { padding: 2px 5px !important; }
.swd-shell .rt-th { font-size: 9px !important; }

.leaflet-control-zoom a { width: 22px !important; height: 22px !important; line-height: 22px !important; font-size: 13px !important; }
.leaflet-container { font-size: 9.5px !important; }
.swd-map-legend { font-size: 8.5px !important; padding: 4px 7px !important; }
.swd-map-legend b { font-size: 9px !important; margin-bottom: 2px !important; }
.leaflet-control-attribution { font-size: 7.5px !important; }

.shiny-notification { font-size: 10.5px !important; padding: 6px 10px !important; }
.tooltip-inner { font-size: 10px !important; padding: 4px 7px !important; }
#shiny-modal .modal-body { font-size: 11px !important; }

/* ---------- 12. Settings drawer ---------- */
.swd-shell > .sidebar > .sidebar-content { padding: 6px 7px 0 !important; gap: 4px !important; }
.sb-head { padding: 0 0 5px !important; margin-bottom: 4px !important; gap: 7px !important; }
.sb-head-icon { width: 22px !important; height: 22px !important; font-size: 10px !important; border-radius: 6px !important; }
.sb-head-title { font-size: 11px !important; } .sb-head-sub { font-size: 8px !important; }
.sb-acc .accordion-item { margin-bottom: 4px !important; border-radius: 8px !important; }
.sb-acc .accordion-button { padding: 4px 8px !important; }
.sb-acc .accordion-body { padding: 5px 8px !important; }
.sb-step { gap: 7px !important; }
.sb-step-num { width: 18px !important; height: 18px !important; flex-basis: 18px !important; font-size: 9px !important; }
.sb-step-name { font-size: 10px !important; } .sb-step-sub { font-size: 7.5px !important; }
.sward-sidebar .control-label, .sward-sidebar label, .sb-label { font-size: 8.5px !important; }
.sward-sidebar .form-control, .sward-sidebar .selectize-input { font-size: 9.5px !important; min-height: 22px !important; }
.sb-pill { font-size: 9px !important; padding: 1px 7px !important; margin-bottom: 4px !important; }
.sb-kc-chip { font-size: 8.5px !important; padding: 2px 1px !important; }
.sb-param { padding: 2px 0 !important; } .sb-param-l { font-size: 9.5px !important; }
.sb-actions .btn { padding: 3px !important; font-size: 10px !important; }
.sb-run { padding: 5px 0 6px !important; }
#run { padding: 5px !important; font-size: 10.5px !important; border-radius: 8px !important; }