/* EarthWatch shell redesign, stage 3: sidebar (#missionSidebar).
   Loads after ew-shell-header.css/ew-shell-nav-rail.css, reuses --ew2-* tokens.

   .operationsButtons is hidden, not removed: earthwatch-operations.js's
   addUI() appends #ewBriefingBtn/#ewWatchBtn into it (guarded by
   `if(tools && ...)`), and window.earthWatchBriefing()/earthWatchWatchboard()
   -- which the nav rail already calls -- unconditionally read those two
   buttons' classList. Deleting the container would silently break both.
   Hiding it costs nothing: appendChild works on a display:none element. */

#missionSidebar{
  background:var(--ew2-surface)!important;
  border-right:1px solid var(--ew2-border)!important;
  padding:16px 13px!important;
  display:flex!important;flex-direction:column!important;gap:20px!important;
}
#missionSidebar .sec{margin-bottom:0!important;}

.sidebarSectionTitle{
  font:600 9px/1 var(--ew2-font-mono)!important;
  letter-spacing:.14em!important;
  color:var(--ew2-text3)!important;
  margin:0 0 9px!important;
  padding-bottom:0!important;
  border-bottom:none!important;
}

#missionSidebar .operationsButtons{display:none!important;}

/* Region buttons: single-column full-width rows (same reasoning as the
   hazard-button fix -- icon+label needs more than a 2-col grid cell's
   ~100px, which is what was risking clipping on NORTH AMERICA/SOUTH
   AMERICA even before icons were added). */
.regionButtons{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}
.regionButtons button{
  height:32px!important;min-height:32px!important;
  padding:0 9px!important;
  border-radius:7px!important;
  border:1px solid var(--ew2-border)!important;
  background:var(--ew2-raised)!important;
  color:var(--ew2-text2)!important;
  display:flex!important;align-items:center!important;gap:8px!important;
  font:600 10px/1 var(--ew2-font-body)!important;
  letter-spacing:.02em!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.regionButtons button:hover{border-color:var(--ew2-border-strong)!important;color:var(--ew2-text)!important;}
.regionButtons button .ewRegionIcon{
  width:18px;height:18px;border-radius:5px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(155,170,182,.14);color:var(--ew2-text2);
}
.regionButtons button .ewRegionIcon svg{width:12px;height:12px;display:block;}
.regionButtons button .ewRegionLabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.regionButtons button:first-child{
  border-color:rgba(47,191,224,.5)!important;
  background:var(--ew2-accent-soft)!important;
  color:#EAF7FB!important;
  font-weight:700!important;
}
.regionButtons button:first-child .ewRegionIcon{background:rgba(47,191,224,.18)!important;color:var(--ew2-accent)!important;}
.regionButtons button.on,.regionButtons button.active{
  border-color:rgba(47,191,224,.5)!important;
  background:var(--ew2-accent-soft)!important;
  color:#EAF7FB!important;
}
.regionButtons button.on .ewRegionIcon,.regionButtons button.active .ewRegionIcon{background:rgba(47,191,224,.18)!important;color:var(--ew2-accent)!important;}

/* Hazard buttons moved to single-column, full-width rows: the previous
   2-col grid (ewV450.css/ewV491.css, ~100px per button) was fine for
   plain text but not for icon+label together, which is what was actually
   getting clipped. This also gives the GDACS filter toggle button below
   (js/ew734-gdacs-controls.js appends #ewGdacsToggle straight into
   #hazardButtons) room for its own longer label instead of squeezing it
   into a half-width grid cell. */
.hazardButtons{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}

/* Neutralise the legacy left-dot (ewV450.css) and right-side toggle-switch
   track+thumb (ewV492.css/ewV493.css, :before/:after positioned via
   right:10px/20px) that used to be the buttons' only on/off indicator --
   the new border+background tint + bold label (below) replaces it, but
   those old pseudo-elements were never told to stop rendering, so they
   were showing through on top of the new icon+label content. */
.hazardButtons button:before,.hazardButtons button:after{
  content:none!important;
  display:none!important;
}

/* Hazard buttons: layout + neutral default (per-hazard colour below) */
.hazardButtons button{
  height:32px!important;min-height:32px!important;
  border-radius:7px!important;
  border:1px solid var(--ew2-border)!important;
  background:var(--ew2-surface2)!important;
  color:var(--ew2-text2)!important;
  display:flex!important;align-items:center!important;gap:8px!important;
  padding:0 9px!important;
  font:600 10px/1 var(--ew2-font-body)!important;
  text-align:left!important;
}
.hazardButtons button:hover{border-color:var(--ew2-border-strong)!important;}
.hazardButtons button .ewHazIcon{
  width:18px;height:18px;border-radius:5px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(155,170,182,.14);color:var(--ew2-text2);
}
.hazardButtons button .ewHazIcon svg{width:12px;height:12px;display:block;}
.hazardButtons button .ewHazLabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#F2F6F8;}

/* Per-hazard accent colours (icon chip always tinted; border/bg tint too when on) */
.hazardButtons button[data-hz="quake"] .ewHazIcon{background:rgba(232,163,61,.16);color:#E8A33D;}
.hazardButtons button[data-hz="fire"] .ewHazIcon{background:rgba(255,90,61,.16);color:#FF5A3D;}
.hazardButtons button[data-hz="flood"] .ewHazIcon{background:rgba(61,155,232,.16);color:#3D9BE8;}
.hazardButtons button[data-hz="events"] .ewHazIcon{background:rgba(124,147,176,.16);color:#7C93B0;}
.hazardButtons button[data-hz="volcano"] .ewHazIcon{background:rgba(224,67,95,.16);color:#E0435F;}
.hazardButtons button[data-hz="cyclone"] .ewHazIcon{background:rgba(108,127,224,.16);color:#6C7FE0;}
.hazardButtons button[data-hz="tsunami"] .ewHazIcon{background:rgba(47,208,176,.16);color:#2FD0B0;}
.hazardButtons button[data-hz="storm"] .ewHazIcon{background:rgba(232,201,61,.16);color:#E8C93D;}
.hazardButtons button[data-hz="rotation"] .ewHazIcon{background:rgba(176,125,232,.16);color:#B07DE8;}
.hazardButtons button[data-hz="alert"] .ewHazIcon{background:rgba(232,112,61,.16);color:#E8703D;}

.hazardButtons button[data-hz="quake"].on,.hazardButtons button[data-hz="quake"].active{border-color:rgba(232,163,61,.45)!important;background:rgba(232,163,61,.07)!important;}
.hazardButtons button[data-hz="fire"].on,.hazardButtons button[data-hz="fire"].active{border-color:rgba(255,90,61,.45)!important;background:rgba(255,90,61,.07)!important;}
.hazardButtons button[data-hz="flood"].on,.hazardButtons button[data-hz="flood"].active{border-color:rgba(61,155,232,.45)!important;background:rgba(61,155,232,.07)!important;}
.hazardButtons button[data-hz="events"].on,.hazardButtons button[data-hz="events"].active{border-color:rgba(124,147,176,.45)!important;background:rgba(124,147,176,.07)!important;}
.hazardButtons button[data-hz="volcano"].on,.hazardButtons button[data-hz="volcano"].active{border-color:rgba(224,67,95,.45)!important;background:rgba(224,67,95,.07)!important;}
.hazardButtons button[data-hz="cyclone"].on,.hazardButtons button[data-hz="cyclone"].active{border-color:rgba(108,127,224,.45)!important;background:rgba(108,127,224,.07)!important;}
.hazardButtons button[data-hz="tsunami"].on,.hazardButtons button[data-hz="tsunami"].active{border-color:rgba(47,208,176,.45)!important;background:rgba(47,208,176,.07)!important;}
.hazardButtons button[data-hz="storm"].on,.hazardButtons button[data-hz="storm"].active{border-color:rgba(232,201,61,.45)!important;background:rgba(232,201,61,.07)!important;}
.hazardButtons button[data-hz="rotation"].on,.hazardButtons button[data-hz="rotation"].active{border-color:rgba(176,125,232,.45)!important;background:rgba(176,125,232,.07)!important;}
.hazardButtons button[data-hz="alert"].on,.hazardButtons button[data-hz="alert"].active{border-color:rgba(232,112,61,.45)!important;background:rgba(232,112,61,.07)!important;}
.hazardButtons button.on .ewHazLabel,.hazardButtons button.active .ewHazLabel{font-weight:700!important;}

/* Monitored locations: colour + spacing refresh only, structure untouched
   (multiple renderers build this card's HTML -- ew736-location-intelligence.js,
   inline-2018.js, inline-4134.js, inline-4036.js -- so this stage deliberately
   does not change the markup they target, only the existing selectors). */
.savedLocationCard{
  border-radius:8px!important;
  background:var(--ew2-surface2)!important;
  border:1px solid var(--ew2-border)!important;
  border-left:3px solid var(--ew2-border-strong)!important;
  padding:9px 11px!important;
}
.savedLocationCardTop{font:700 11px/1.3 var(--ew2-font-body)!important;color:#F2F6F8!important;}
.savedLocationState,.savedLocationMeta{font-family:var(--ew2-font-body)!important;color:var(--ew2-text2)!important;}
.savedLoc-clear{border-left-color:var(--ew2-good)!important;}
.savedLoc-advisory{border-left-color:#E8A33D!important;}
.savedLoc-warning{border-left-color:#E8703D!important;}
.savedLoc-critical{border-left-color:#E0435F!important;}

/* #missionSidebar no longer holds any visible content -- region and hazard
   layers moved out to their own panels (below), locations already moved
   out in 824bb95. All that's left inside it is the operations row, which
   was already display:none (kept only because earthwatch-operations.js
   appends the Briefing/Watchboard buttons into it -- see that file).
   --cmd is set permanently to the rail's own width so the map gets the
   freed column space; no more toggle needed. */
:root{--cmd:60px!important;}
#missionSidebar{display:none!important;}

/* Locations/Region/Hazard-layers panels: floating overlays, all the same
   open/close pattern already used by #dataHealthPanel/#coveragePanel
   (inline-2.css) -- display:none by default, .open{display:block}. */
#locationsPanel,#regionPanel,#hazardLayersPanel{
  display:none;
  position:absolute;
  left:74px;top:62px;
  z-index:1600;
  width:300px;max-height:72vh;overflow:auto;
  background:rgba(3,13,20,.985);
  border:1px solid var(--ew2-border-strong);
  box-shadow:0 12px 38px #000;
  padding:12px;
  border-radius:8px;
}
#locationsPanel.open,#regionPanel.open,#hazardLayersPanel.open{display:block;}
.locHead{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ew2-border);padding-bottom:9px;margin-bottom:10px;}
.locTitle{font:700 12px/1 var(--ew2-font-mono);letter-spacing:.1em;color:var(--ew2-text);flex:1;}
#locationsPanelAdd{height:24px;padding:0 9px;border-radius:5px;border:1px solid var(--ew2-border-strong);background:transparent;color:var(--ew2-accent);font:700 9px/1 var(--ew2-font-mono);cursor:pointer;}
#locationsPanelClose,#regionPanelClose,#hazardLayersPanelClose{width:24px;height:24px;border-radius:5px;border:1px solid var(--ew2-border-strong);background:var(--ew2-raised);color:var(--ew2-text2);cursor:pointer;font-size:14px;line-height:1;}
#locationsPanel #savedLocationsList{display:flex;flex-direction:column;gap:7px;}