/* ================================================================
   ENVIRONMENT STATUS DIALOG — environment-status-dialog.css
   Uniform read-only summary for one environment's status — same dialog
   shape for all 4 states (ONLINE/OFFLINE/STANDBY/AGENT_UNREACHABLE), only
   the Details section content differs. Same design tokens as
   consolidated-stats-dialog.css / agent-connection-error-dialog.css for
   visual consistency. Sized to comfortably fit AGENT_UNREACHABLE's stack
   trace — the widest case — so every state opens at the same size.
   ================================================================ */

.esd-dialog {
  --esd-indigo-600: #4756e8;
  --esd-grad-brand: linear-gradient(135deg, #5b6cf9 0%, #764ba2 100%);
  --esd-surface:    #FFFFFF;
  --esd-surface-2:  #F7F8FC;
  --esd-text-primary:   #111827;
  --esd-text-secondary: #4B5878;
  --esd-text-muted:     #8E97B4;
  --esd-border:        #E2E5EF;
  --esd-border-strong: #C5CCDF;
  --esd-green:     #16A34A;
  --esd-red:       #DC2626;
  --esd-red-bg:    rgba(220,38,38,0.08);
  --esd-yellow:    #D97706;
  --esd-yellow-bg: rgba(217,119,6,0.08);
  --esd-gray-dark: #4B5563;
  --esd-r-md: 6px;
  --esd-r-xl: 14px;

  width: 620px !important;
  max-width: 92vw !important;
  max-height: 94vh !important;
  border-radius: var(--esd-r-xl) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(8,12,24,.22) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

body md-dialog.esd-dialog md-toolbar.esd-toolbar {
  background: var(--esd-grad-brand) !important;
  box-shadow: 0 2px 12px rgba(91,108,249,.28) !important;
  min-height: 50px !important;
  max-height: 50px !important;
  flex-shrink: 0 !important;
}
/* Toolbar tint follows the same status colors as the list dot/badge, so the
   dialog reads as "the same status" the user just clicked on. */
body md-dialog.esd-dialog md-toolbar.esd-toolbar--online  { background: linear-gradient(135deg, #16A34A 0%, #15803d 100%) !important; }
body md-dialog.esd-dialog md-toolbar.esd-toolbar--offline { background: linear-gradient(135deg, #DC2626 0%, #b91c1c 100%) !important; }
body md-dialog.esd-dialog md-toolbar.esd-toolbar--standby { background: linear-gradient(135deg, #D97706 0%, #b45309 100%) !important; }
body md-dialog.esd-dialog md-toolbar.esd-toolbar--agent_unreachable { background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%) !important; }

body md-dialog.esd-dialog .md-toolbar-tools {
  padding: 0 16px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.esd-toolbar-icon { color: #fff !important; font-size: 20px !important; width: 20px !important; height: 20px !important; flex-shrink: 0 !important; }
.esd-header-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; min-width: 0 !important; text-align: left !important; }
.esd-header-info h2 { font-size: 15.5px !important; font-weight: 600 !important; color: #fff !important; margin: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; }
.esd-header-subtitle {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .4px !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.85) !important;
}
body md-dialog.esd-dialog .md-toolbar-tools > .md-icon-button {
  color: #fff !important; margin: 0 !important;
  width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important;
  border-radius: var(--esd-r-md) !important;
}
body md-dialog.esd-dialog .md-toolbar-tools > .md-icon-button md-icon { color: rgba(255,255,255,.75) !important; font-size: 18px !important; width: 18px !important; height: 18px !important; }
body md-dialog.esd-dialog .md-toolbar-tools > .md-icon-button:hover md-icon { color: #fff !important; }
body md-dialog.esd-dialog .md-toolbar-tools > .md-icon-button:hover { background: rgba(255,255,255,.12) !important; }

.esd-content {
  padding: 0 20px 22px !important;
  background: var(--esd-surface-2) !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

/* Real height, not padding/margin — styles.css globally forces both
   md-dialog-content's own padding-top AND its first child's margin/
   padding-top to 0 (see comment in the .html), so this is the only
   reliable way to put air between the toolbar and the first box. */
.esd-top-spacer { height: 20px !important; }

.esd-field { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-bottom: 24px !important; }
.esd-field:last-child { margin-bottom: 0 !important; }
.esd-field-label {
  font-size: 10.5px !important; font-weight: 700 !important; color: var(--esd-text-muted) !important;
  text-transform: uppercase !important; letter-spacing: .5px !important;
}
.esd-field-value {
  font-size: 18px !important; font-weight: 800 !important; color: var(--esd-text-primary) !important; line-height: 1.3 !important;
}
/* AGENT_UNREACHABLE's error text — a sentence, not a stat, so it doesn't get the big/bold treatment. */
.esd-field-value--small {
  font-size: 13px !important; font-weight: 600 !important; line-height: 1.5 !important;
}

.esd-section-title {
  font-size: 10.5px !important; font-weight: 700 !important; color: var(--esd-indigo-600) !important;
  text-transform: uppercase !important; letter-spacing: .6px !important; margin: 0 0 10px !important;
}

/* ── Stats/Charts sub-tabs — same shape as Consolidated Stats' own
   .csd-subtab-* nav, just this dialog's own color tokens. ── */
.esd-tabs md-tabs-wrapper {
  border-bottom: none !important;
}
.esd-tabs md-tab-item {
  font-size: 12.5px !important; font-weight: 700 !important; text-transform: none !important;
  color: var(--esd-text-secondary) !important;
}
.esd-tabs md-tab-item.md-active {
  color: var(--esd-indigo-600) !important;
}
.esd-tabs md-tab-label {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
}
.esd-tabs md-tab-label md-icon {
  font-size: 17px !important; width: 17px !important; height: 17px !important; min-width: 17px !important;
  margin: 0 !important; color: inherit !important;
}
.esd-tabs md-ink-bar {
  background: var(--esd-indigo-600) !important;
}
/* Bumping min-height alone (what this rule used to do) doesn't actually
   stop clipping: md-dynamic-height is deliberately OFF (see the .html
   comment above the tabs) so $mdTabs measures the active tab ONCE and sets
   height/overflow:hidden as an INLINE style on md-tabs-content-wrapper —
   min-height is only a floor, it can't override that inline height, so
   once Live Stats' real content outgrows whatever px Material measured,
   the excess is clipped by Material's OWN overflow:hidden, not scrolled.
   That's exactly what happened here: pinned at 400px for a 3-row/10-tile
   grid, the grid grew to 13 tiles (4 rows), and the 4th row rendered right
   off the bottom edge flush against the dialog's actions bar — raising the
   min-height guess to 540px (still just a floor) didn't fix it. Confirmed
   fix, same one already used for user-management-dialog's own tabs
   (see home/main-menu/users/user-management-dialog.css): override
   Material's inline height with `height: auto !important` (plain CSS
   !important beats an inline style set via element.style, JS-set inline
   styles don't carry !important) and its `overflow: hidden` with `visible`
   — the wrapper then grows to fit whichever tab is active instead of
   clipping it, and .esd-content's own overflow-y:auto (below) scrolls the
   dialog if that ever exceeds the viewport. min-height stays as a floor
   only, so Lifetime Totals (the shorter tab) doesn't visibly shrink the
   dialog when you switch to it — that's the only part of the original
   anti-jump behavior worth keeping; letting the tallest tab grow past the
   floor is the whole point of this fix.

   TWO clippers, not one — confirmed live via getComputedStyle on the
   actual broken dialog (platform.bizmetry.io, DevTools element chain):
   md-tabs-content-wrapper (fixed above) sits INSIDE <md-tabs> itself
   (.esd-tabs), and Material caps THAT element's own height too — here it
   measured height:248px/overflow:hidden on <md-tabs> with no inline style
   at all (so this one's coming from Material's own base stylesheet, not
   $mdTabs-computed JS), while its content (the wrapper) wanted
   scrollHeight:449px. Fixing only the wrapper left this outer clip in
   place, which is why the 400px->540px->height:auto changes on the
   wrapper alone never visibly did anything — <md-tabs> was cropping the
   wrapper's own overflow before it ever reached .esd-content's scroll.
   Same override, one level up. */
.esd-tabs md-tabs-content-wrapper {
  height: auto !important;
  min-height: 400px !important;
  overflow: visible !important;
}
md-tabs.esd-tabs {
  height: auto !important;
  min-height: 400px !important;
  overflow: visible !important;
}
.esd-tabs md-tab-content {
  padding: 18px 2px 4px !important;
}

.esd-empty {
  font-size: 12.5px !important; color: var(--esd-text-muted) !important; font-style: italic !important;
}

.esd-stacktrace {
  margin: 0 !important;
  border: 1px solid var(--esd-border) !important;
  border-radius: var(--esd-r-md) !important;
  padding: 12px 14px !important;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: var(--esd-red) !important;
  background: var(--esd-red-bg) !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

/* margin-bottom matches .esd-tile--duration's own 16px below it — without
   this, the section that follows (Packet Distribution) butted right up
   against the last tile row with zero gap, which only became visible once
   Avg Pressure made that row 10 tiles instead of a clean 8 (a partial
   3rd row, sitting closer to the title below it than a full row would). */
/* ── Lifetime tiles + packet distribution pie, side by side — same
   pattern as consolidated-stats-dialog.css's own .csd-stats-side-by-side.
   The pie used to live in its own separate "Charts" tab; folded into
   Lifetime Totals instead since a lifetime pie breakdown reads as the
   same "totals" concept as the tiles next to it, not a separate section
   of the dialog.

   This dialog is only 620px wide (vs. Consolidated Stats' 1600px) — at
   the default 4-column tile grid, the tiles column left over after a
   260px pie-col would squeeze each tile to ~70px, half its normal ~139px.
   220px for the pie-col (chart.js canvas is width:100%, so it scales down
   fine) plus dropping to 2 columns just for this side-by-side tiles grid
   (the Lifetime Totals grid in the template carries the shared
   .bm-stat-tiles--cols-2 modifier, see common/components/stat-tile) keeps
   each tile close to its normal comfortable width instead. ── */
.esd-stats-side-by-side {
  display: flex !important; align-items: flex-start !important; gap: 16px !important;
}
.esd-tiles-col { flex: 1 1 auto !important; min-width: 0 !important; }
.esd-pie-col {
  flex: 0 0 220px !important; width: 220px !important;
  background: var(--esd-surface) !important; border: 1px solid var(--esd-border) !important;
  border-radius: var(--esd-r-md) !important; padding: 10px 14px !important; box-sizing: border-box !important;
}

/* Tile grid/shell + trend arrow now live in the shared <bm-stat-tile>
   component (common/components/stat-tile) — see environment-status-dialog.html. */

/* ── SLA alert badges — mirrors Consolidated Stats' own per-environment
   alert cards/badges (consolidated-stats-dialog.css .csd-status-badge--alert,
   .csd-alert-badge), just with room for the full description text since
   this dialog is a single narrow column rather than a wide table. ── */
.esd-alerts-row { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-bottom: 16px !important; }
.esd-alert-badge {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 8px 12px !important; border-radius: var(--esd-r-md) !important;
  font-size: 12px !important; font-weight: 700 !important;
  border: 1px solid transparent !important;
}
/* Same fix as consolidated-stats-dialog.css's own rule (kept here too so
   this dialog is correct standalone regardless of load order) — Angular
   Material's $mdPanel-based <md-tooltip> renders DETACHED from its
   trigger (there's no .md-content child to scope through, and it isn't
   even a descendant of .esd-alert-badge in the live DOM — confirmed via
   getComputedStyle; an earlier attempt at this fix targeted a selector
   that never matched). Its default sizes the bubble for one line and
   clips anything longer, like the restart_required reason — height:auto
   lets it grow, and white-space:pre-line preserves the explicit "\n" the
   controller builds between the lead sentence and the specific reason as
   a real line break while still wrapping long lines normally.

   Deliberately targets the BARE element, not `.md-show` — Material
   measures the tooltip's size to compute its position BEFORE adding
   `.md-show` (that class only drives the fade-in), so a rule scoped to
   `.md-show` takes effect only AFTER positioning already happened against
   the smaller, single-line-sized default box — the taller wrapped
   content then renders overlapping the trigger instead of clearing it.
   Applying this unconditionally means the taller size is already real by
   the time Material measures and positions it. */
md-tooltip {
  height: auto !important;
  max-width: 280px !important;
  white-space: pre-line !important;
  overflow: visible !important;
  line-height: 1.35 !important;
  padding: 8px 10px !important;
  text-align: left !important;
  /* Material sets pointer-events:all on this element inline (unusual for
     a tooltip) — with a taller box (from the overrides above) that lets
     the bubble visually cover its own tiny trigger and intercept the
     hover itself, firing a mouseleave on the trigger the instant it
     renders and hiding it again immediately (a one-frame flicker).
     Tooltips should never be interactive anyway. */
  pointer-events: none !important;
}
.esd-alert-badge md-icon {
  font-size: 16px !important; width: 16px !important; height: 16px !important; min-width: 16px !important; margin: 0 !important;
  /* The restart badge's message got long enough to wrap onto multiple
     lines — flex-shrink:0 keeps the icon from being squeezed by that, and
     align-self:center (redundant with the row's own align-items:center in
     most browsers, but not reliably for an SVG/font-ligature replaced
     element like md-icon) re-centers it against the now-taller text block
     instead of drifting to the top. */
  flex-shrink: 0 !important;
  align-self: center !important;
}
.esd-alert-badge--pressure { background: var(--esd-red-bg) !important; color: var(--esd-red) !important; border-color: rgba(220,38,38,.3) !important; }
.esd-alert-badge--pressure md-icon { color: var(--esd-red) !important; }
.esd-alert-badge--latency { background: var(--esd-yellow-bg) !important; color: var(--esd-yellow) !important; border-color: rgba(217,119,6,.3) !important; }
.esd-alert-badge--latency md-icon { color: var(--esd-yellow) !important; }
/* Not an SLA breach — a config the running process can't pick up on its
   own — so it deliberately uses the brand indigo instead of red/yellow to
   read as "action needed", not "something's wrong". */
.esd-alert-badge--restart { background: rgba(71,86,232,.08) !important; color: var(--esd-indigo-600) !important; border-color: rgba(71,86,232,.3) !important; }
.esd-alert-badge--restart md-icon { color: var(--esd-indigo-600) !important; }
/* Same red as the pressure SLA breach — a failing upload is a genuine
   connectivity problem, not just an action-needed notice like restart. */
.esd-alert-badge--upload { background: var(--esd-red-bg) !important; color: var(--esd-red) !important; border-color: rgba(220,38,38,.3) !important; }
.esd-alert-badge--upload md-icon { color: var(--esd-red) !important; }

/* Duration ("Online for" / "Offline for" / …) — <bm-duration> (see
   common/components/duration-badge), just sized up a step and stretched
   full-width since it's the dialog's headline stat. */
.esd-duration-badge {
  display: flex !important;
  width: 100% !important;
  margin-bottom: 16px !important;
  padding: 12px !important;
  border: 1px solid var(--esd-border) !important;
  border-radius: var(--esd-r-md) !important;
  box-sizing: border-box !important;
}
.esd-duration-badge .bm-duration-icon { font-size: 22px !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; }
.esd-duration-badge .bm-duration-value { font-size: 19px !important; }

/* Never-synced card — replaces the duration badge when this interceptor
   hasn't reached the platform even once (see vm.neverSynced()). */
.esd-never-synced {
  width: 100% !important;
  margin-bottom: 16px !important;
  padding: 14px !important;
  background: var(--esd-yellow-bg) !important;
  border: 1px solid rgba(217,119,6,.3) !important;
  border-radius: var(--esd-r-md) !important;
  box-sizing: border-box !important;
}
.esd-never-synced-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--esd-yellow) !important;
  text-align: left !important;
}
.esd-never-synced-header md-icon.esd-never-synced-icon {
  font-size: 22px !important; width: 22px !important; height: 22px !important;
  min-width: 22px !important; min-height: 22px !important;
  margin: 0 !important;
  color: var(--esd-yellow) !important;
}
.esd-never-synced-header span { text-align: left !important; }
.esd-never-synced-divider {
  height: 1px !important;
  margin: 12px 0 !important;
  background: rgba(217,119,6,.25) !important;
}
.esd-never-synced-hint {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--esd-text-secondary) !important;
}
.esd-never-synced-hint strong { color: var(--esd-text-primary) !important; }

.esd-never-synced-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--esd-indigo-600) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.esd-never-synced-link:hover { text-decoration: underline !important; }
.esd-never-synced-link md-icon {
  font-size: 16px !important; width: 16px !important; height: 16px !important;
  min-width: 16px !important; min-height: 16px !important;
  color: inherit !important;
}
.esd-never-synced-link--disabled {
  color: var(--esd-text-muted) !important;
  cursor: default !important;
}
.esd-never-synced-link--disabled:hover { text-decoration: none !important; }

.esd-never-synced .md-spin {
  animation: esd-spin 1s linear infinite !important;
}
@keyframes esd-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.esd-reasons {
  margin: 0 !important; padding: 0 0 0 18px !important;
  font-size: 13px !important; color: var(--esd-text-primary) !important; line-height: 1.7 !important;
}
.esd-reasons li { margin: 0 !important; }

.esd-actions {
  background: var(--esd-surface) !important;
  border-top: 1px solid var(--esd-border) !important;
  padding: 12px 20px !important;
  flex-shrink: 0 !important;
  display: flex !important;
}
.esd-btn-close {
  display: inline-flex !important; align-items: center !important;
  padding: 0 18px !important; height: 34px !important; border-radius: var(--esd-r-md) !important;
  font-size: 12.5px !important; font-weight: 500 !important; text-transform: none !important;
  background: var(--esd-surface) !important; color: var(--esd-text-secondary) !important;
  border: 1.5px solid var(--esd-border-strong) !important; margin: 0 !important;
}
.esd-btn-close:hover { background: var(--esd-surface-2) !important; }