/* health.css
 * Extracted from public/styles.css (Phase 0.3).
 * Lazy-loaded by public/modules/panels/nav.js on openPanel('health')
 * or relevant tab switch in switchMode().
 */

.health-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--md-sys-shape-corner-md);
  margin-bottom: 20px;
  border: 1px solid;
  transition: background var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized-decel),
              border-color var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized-decel);
}

/* Green is banned as a SURFACE or ACCENT colour (the design contract). The
   healthy state therefore reads as a calm neutral card and lets the green status
   DOT carry the meaning — green-dot-means-healthy is a universal convention and
   is explicitly still allowed. Warn and down keep their tinted fills, because
   those are the states that must grab you, and this makes them louder by
   contrast instead of competing with a green banner of equal weight. */
.health-banner--ok {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline-variant);
}

.health-banner--warn {
  background: var(--md-sys-color-warning-bg);
  border-color: var(--md-sys-color-warning-fg);
}

.health-banner--down {
  background: var(--md-sys-color-error-container);
  border-color: var(--md-sys-color-error);
}

.health-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-banner--ok .health-banner-dot { background: var(--md-sys-color-success-fg); box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }

.health-banner--warn .health-banner-dot { background: var(--md-sys-color-warning-fg); box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }

.health-banner--down .health-banner-dot { background: var(--md-sys-color-error); box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }

.health-banner-dot--pulse {
  animation: health-pulse 2s ease-in-out infinite;
}

.health-banner-text {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  color: var(--md-sys-color-on-surface);
}

.health-banner-sub {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  margin-left: auto;
  white-space: nowrap;
}

.health-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.health-svc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-sm);
  min-height: 44px;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.health-svc--down {
  background: var(--md-sys-color-error-container);
}

.health-svc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-svc-dot--ok {
  background: var(--md-sys-color-success-fg);
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

.health-svc-dot--down {
  background: var(--md-sys-color-error);
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
  animation: health-pulse 1.5s ease-in-out infinite;
}

.health-svc-name {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  flex: 1;
}

.health-svc-badge {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  padding: 2px 8px;
  border-radius: var(--md-sys-shape-corner-sm);
  text-transform: uppercase;
}

/* Was a green fill with green text. Both are green-as-accent. The row already
   carries a green status dot, so the badge does not need to repeat the signal
   in the one colour the contract bans. */
.health-svc-badge--ok {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
}

.health-svc-badge--down {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.health-resources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

.health-res {
  padding: 12px 14px;
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-sm);
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

/* Symmetric severity treatment. These were 2px left stripes; they are now a full
   1px border plus the matching tinted fill, which reads the same severity at a
   glance from any edge of the card instead of only the left one. */
.health-res--alert {
  border: 1px solid var(--md-sys-color-error);
  background: var(--md-sys-color-error-container);
}

.health-res--warn {
  border: 1px solid var(--md-sys-color-warning-fg);
  background: var(--md-sys-color-warning-bg);
}

.health-res-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.health-res-value {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 8px;
}

.health-res-detail {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 0;
}

.health-res--full {
  grid-column: 1 / -1;
}

.health-bar {
  height: 4px;
  background: var(--md-sys-color-surface-container-high);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}

.health-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s var(--md-sys-motion-easing-emphasized-decel);
}

/* A usage bar is a surface, so its healthy fill goes the brand primary rather than
   green. Warn/alert keep amber/red — the ladder still reads at a glance. */
.health-bar-fill--ok { background: var(--md-sys-color-primary); }

.health-bar-fill--warn { background: var(--md-sys-color-warning-fg); }

.health-bar-fill--alert { background: var(--md-sys-color-error); }

.health-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.health-updated {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* M3 tonal chip-style button */
.health-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-sm);
  padding: 6px 16px;
  cursor: pointer;
  min-height: 32px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}

.health-refresh-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  .health-refresh-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.health-refresh-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.health-refresh-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  transition: transform var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized-decel);
}

.health-refresh-btn:active .health-refresh-icon {
  transform: rotate(180deg);
}

/* M3 outlined button */
.health-restart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  color: var(--md-sys-color-primary);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  cursor: pointer;
  min-height: 40px;
  width: 100%;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}

.health-restart-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  .health-restart-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.health-restart-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.health-restart-btn:disabled {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}

.health-panel-enter {
  animation: health-fade-in 0.25s var(--ease-out) both;
}

.health-svc-meta {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  padding: 2px 6px;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-xs);
}

.health-svc-meta--warn {
  color: var(--md-sys-color-warning-fg);
  background: var(--md-sys-color-warning-bg);
}

.health-svc-dot--warn {
  background: var(--md-sys-color-warning-fg);
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
}

.health-errors {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.health-error-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-sm);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.health-error-time {
  color: var(--md-sys-color-on-surface-variant);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.health-error-unit {
  color: var(--md-sys-color-error);
  font-weight: 500;
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-error-msg {
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.health-details {
  margin-top: 10px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-sm);
  overflow: hidden;
}

.health-details-summary {
  padding: 8px 12px;
  cursor: pointer;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container);
  user-select: none;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.health-details-summary:hover {
  background: var(--md-sys-color-surface-container-high);
}

.health-details[open] > .health-details-summary {
  border-bottom: 1px solid var(--md-sys-color-outline);
}

.health-details > .health-errors {
  padding: 8px 12px;
}

@media (max-width: 400px) {
  .health-resources {
    grid-template-columns: 1fr;
  }
  .health-error-row {
    flex-wrap: wrap;
  }
  .health-error-msg {
    white-space: normal;
    flex-basis: 100%;
  }
}

/* This file used to reach outside its own subtree here and set a max-width, an
   auto margin and a padding on #panel-content, plus a padding on #tools-launcher.
   Both are host-owned elements. Because this stylesheet is a permanent <link>,
   those rules were live for every panel in the app whether or not Health was
   open, and the auto margin on a flex item's cross axis made every panel
   shrink-to-fit a different width. Host geometry now lives in exactly one place,
   public/styles/panel-layout.css. Do not re-add a #panel-content or
   #tools-launcher rule to a panel stylesheet. */

@media (min-width: 768px) and (min-height: 500px) {
  .health-services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 8px;
  }
}

/* The status sections are independent blocks, so above iPad portrait they read
   as a board rather than a 2000px-long scroll. Sections that carry a wide grid
   of their own are opted out below so they get the full width to spread into. */
@media (min-width: 1024px) {
  .health-panel-enter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
  }

  .health-panel-enter > .health-banner,
  .health-panel-enter > .health-footer {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1440px) {
  .health-panel-enter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (pointer: coarse) {
  .health-refresh-btn { min-height: 48px; }
  .health-restart-btn { min-height: 48px; }
}