@import url('/vendor/bootstrap-5.3.8.min.css') layer(bootstrap);
@import url('/spyderwash-theme.generated.css');
@import url('/bootstrap-theme.css');

:root {
  color-scheme: light;
  --blue: var(--sw-color-primary);
  --hover: var(--sw-color-hover);
  --ink: var(--sw-color-text);
  --muted: var(--sw-color-secondary);
  --line: var(--sw-color-border);
  --base: var(--sw-color-background);
  --soft: var(--sw-color-field);
  --white: var(--sw-color-white);
}
body {
  isolation: isolate;
}
.sw-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--sw-scene-fallback);
}
.sw-scene {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  filter: blur(var(--sw-scene-blur));
  object-fit: cover;
  object-position: var(--sw-scene-position);
  transform: scale(var(--sw-scene-scale));
  transform-origin: var(--sw-scene-position);
}
.sw-poster {
  background: var(--sw-scene-poster) var(--sw-scene-position) / cover no-repeat;
}
.sw-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sw-scene-haze);
}
.sw-logo {
  width: var(--sw-logo-width);
  max-width: 100%;
  aspect-ratio: var(--sw-logo-aspect-ratio);
  background: url('/assets/spyderwash-white-clean-red.webp') center / contain no-repeat;
  filter: drop-shadow(var(--sw-logo-shadow));
}
/* Match the portal material; Bootstrap retains the dashboard's grid and controls. */
.sw-glass,
.sw-footer {
  --bs-body-color: var(--sw-color-white);
  --bs-body-color-rgb: var(--sw-color-white-rgb);
  --bs-emphasis-color: var(--sw-color-white);
  --bs-emphasis-color-rgb: var(--sw-color-white-rgb);
  --bs-secondary-color: var(--sw-color-glassSecondary);
  --bs-secondary-color-rgb: var(--sw-color-glassSecondary-rgb);
  --bs-link-color: var(--sw-color-white);
  --bs-link-color-rgb: var(--sw-color-white-rgb);
  --bs-link-hover-color: var(--sw-color-glassSecondary);
  --bs-link-hover-color-rgb: var(--sw-color-glassSecondary-rgb);
  color: var(--bs-body-color);
}
.sw-glass {
  background: var(--sw-glass-fallback);
  border: var(--sw-glass-border);
  border-radius: var(--sw-glass-radius);
  box-shadow: var(--sw-glass-shadow);
}
/* Reset content on solid Bootstrap surfaces, including dynamically created cards. */
.sw-dashboard-page #control-panel,
.sw-glass .card,
.sw-glass .list-group,
.sw-glass .alert,
.form-control,
.form-select,
.modal {
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: var(--sw-color-text-rgb);
  --bs-emphasis-color: var(--ink);
  --bs-emphasis-color-rgb: var(--sw-color-text-rgb);
  --bs-secondary-color: var(--muted);
  --bs-secondary-color-rgb: var(--sw-color-secondary-rgb);
  --bs-link-color: var(--blue);
  --bs-link-color-rgb: var(--sw-color-primary-rgb);
  --bs-link-hover-color: var(--hover);
  --bs-link-hover-color-rgb: var(--sw-color-hover-rgb);
  color: var(--bs-body-color);
}
.sw-glass .alert {
  color: var(--bs-alert-color);
}
.sw-glass .btn-outline-primary,
.sw-glass .btn-outline-secondary,
.sw-glass .btn-outline-danger {
  --bs-btn-bg: var(--soft);
}
[hidden] {
  display: none !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sw-glass {
    background: var(--sw-glass-fill);
    -webkit-backdrop-filter: blur(var(--sw-glass-blur));
    backdrop-filter: blur(var(--sw-glass-blur));
  }
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .sw-background-video {
    display: none;
  }
}
@media (forced-colors: active) {
  .sw-backdrop,
  .sw-logo {
    display: none;
  }
  .sw-glass,
  .sw-footer {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Connected workspace: the Operator Portal/POS floating header, main and footer. */
.sw-dashboard-header {
  z-index: 1020;
}
.sw-dashboard-brand {
  width: 9rem;
  max-width: 100%;
  flex: 0 1 9rem;
}
.sw-topbar {
  --bs-card-border-radius: var(--sw-glass-radius);
  --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
  border: var(--sw-workspace-header-border);
}
.sw-header-navigation {
  --bs-navbar-color: var(--ink);
  --bs-navbar-hover-color: var(--blue);
  --bs-navbar-active-color: var(--blue);
  color: var(--ink);
  background: var(--sw-workspace-heading-fill);
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}
.sw-header-navigation .navbar-nav {
  border-top: 1px solid var(--line);
}
.sw-header-navigation .nav-link.active {
  background: var(--base);
  border-radius: var(--bs-border-radius);
}
.sw-header-navigation .sw-readable-text,
.sw-dashboard-page #control-panel .sw-readable-text {
  color: inherit;
}
.sw-dashboard-page .sw-workspace-frame {
  min-width: 0;
}
.sw-dashboard-page #control-panel {
  --bs-card-border-radius: var(--sw-glass-radius);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: var(--sw-workspace-accent-width) solid var(--blue);
  box-shadow: var(--sw-workspace-panel-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sw-dashboard-page .sw-page-heading {
  border-top-left-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width))
    calc(var(--bs-card-border-radius) - var(--sw-workspace-accent-width));
  border-top-right-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width))
    calc(var(--bs-card-border-radius) - var(--sw-workspace-accent-width));
  border-bottom: 1px solid var(--line);
  background: var(--sw-workspace-heading-fill);
}
.sw-dashboard-page .sw-footer-panel {
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--sw-glass-fallback);
  border: var(--sw-workspace-header-border);
  border-radius: var(--sw-glass-radius);
  box-shadow: var(--sw-glass-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sw-dashboard-page .sw-footer-panel {
    background: var(--sw-glass-fill);
    -webkit-backdrop-filter: blur(var(--sw-glass-blur));
    backdrop-filter: blur(var(--sw-glass-blur));
  }
}
@media (min-width: 1200px) {
  .sw-topbar-title {
    border-inline-start: var(--sw-workspace-header-border);
    padding-inline-start: 1rem;
  }
}
@media (forced-colors: active) {
  .sw-dashboard-page #control-panel,
  .sw-dashboard-page .sw-page-heading,
  .sw-header-navigation,
  .sw-header-navigation .navbar-nav,
  .sw-dashboard-page .sw-footer-panel {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .sw-header-navigation .nav-link.active {
    outline: 1px solid Highlight;
  }
}

/* Retain one semantic installation table and one action per record at every width. */
@media (max-width: 767.98px) {
  #installation-list {
    overflow: visible;
  }
  .installation-table,
  .installation-table tbody {
    display: block;
  }
  .installation-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .installation-table tbody tr {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--bs-border-radius);
  }
  .installation-table tbody tr:last-child {
    margin-bottom: 0;
  }
  .installation-table tbody th,
  .installation-table tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
    box-shadow: none;
  }
}

/* Reserve the Overview activity slot so Refresh keeps its idle/pending geometry. */
#refresh-status-indicator[hidden] {
  display: inline-block !important;
  visibility: hidden;
}