/* webv2's additions to the SPA theme (app.css). Only what server-rendered
   markup needs and the SPA gets from React components: native <dialog>
   modals, flash/live toasts, the SVG response-time chart and the uptime bar
   tooltips. Tokens are the theme's (web-app.md §16.2). */

/* Confirmation dialogs: a native <dialog> styled as a Bootstrap modal. */
dialog.jmi-dialog {
  border: 0;
  padding: 0;
  width: min(32rem, calc(100% - 2rem));
  background: transparent;
  /* Bootstrap defines these on .modal only; .modal-content reads them. */
  --bs-modal-padding: 1rem;
  --bs-modal-color: var(--bs-body-color);
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
}
dialog.jmi-dialog.jmi-dialog-wide {
  width: min(50rem, calc(100% - 2rem));
}
dialog.jmi-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
dialog.jmi-dialog .modal-content {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Toasts (flash messages and live state changes), top right. */
.jmi-toasts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(24rem, calc(100% - 2rem));
}
.jmi-toast {
  background: #fff;
  border-left: 4px solid var(--bs-success, #28a745);
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: jmi-toast-in 0.2s ease-out;
}
.jmi-toast.toast-danger {
  border-left-color: #dc3545;
}
.jmi-toast.toast-warning {
  border-left-color: #ffc107;
}
.jmi-toast.toast-info {
  border-left-color: #17a2b8;
}
/* Live toasts (state changes) sit under the flash stack and fade out; the
   server drops them from the live region after 8 s. */
.jmi-live-toasts {
  top: 4.5rem;
}
.jmi-live-toasts .jmi-toast {
  animation:
    jmi-toast-in 0.2s ease-out,
    jmi-toast-out 0.4s ease-in 6s forwards;
}
@keyframes jmi-toast-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.jmi-toast[hidden] {
  display: none;
}
.jmi-toast .btn-close {
  margin-left: auto;
  font-size: 0.75rem;
}
@keyframes jmi-toast-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

/* Navbar collapse and org dropdown driven by topcoat signals. */
.navbar .dropdown-menu.show {
  display: block;
}

/* SVG response-time chart (server rendered). */
.svg-chart {
  width: 100%;
  height: auto;
  display: block;
  font-size: 11px;
}
.svg-chart .grid line {
  stroke: #e9ecef;
}
.svg-chart .axis text {
  fill: #6c757d;
}
.svg-chart .series {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.svg-chart .band {
  opacity: 0.25;
}
.svg-chart .hover-point {
  fill: transparent;
}
.svg-chart .hover-point:hover {
  fill: currentColor;
}
.chart-legend label {
  cursor: pointer;
}
.chart-legend .legend-line {
  display: inline-block;
  width: 1.5rem;
  border-top-width: 2px;
  vertical-align: middle;
}

/* Live dot connecting state (before the WebSocket render). */
.live-dot.connecting .dot {
  background: #adb5bd;
}

/* Inline forms inside tables and button rows. */
form.d-inline {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .jmi-toast,
  .jmi-live-toasts .jmi-toast {
    animation: none;
  }
}