:root {
  --vms-sidebar-width: 276px;
}

body {
  background: #f4f6f8;
}

.min-w-0 {
  min-width: 0;
}

.text-tight {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #f4f6f8;
}

.login-panel {
  width: min(100%, 420px);
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: 1.5rem;
}

.login-logo {
  width: min(100%, 280px);
  height: auto;
  display: block;
  margin-inline: auto;
}

.brand-lockup {
  min-width: 0;
}

.sidebar-logo {
  width: 138px;
  max-width: 100%;
  height: auto;
  display: block;
}

.report-brand-logo {
  width: 220px;
  max-width: 100%;
  height: auto;
}

.app-shell {
  min-height: 100vh;
  width: 100%;
  align-items: stretch;
}

.sidebar-toggle {
  width: 38px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle-lines {
  display: inline-grid;
  gap: 4px;
}

.sidebar-toggle-lines i {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.sidebar {
  width: var(--vms-sidebar-width);
  flex: 0 0 var(--vms-sidebar-width);
  max-width: var(--vms-sidebar-width);
  min-height: 100vh;
  position: sticky;
  top: 0;
  overflow-x: hidden;
  transition: width .18s ease, flex-basis .18s ease, max-width .18s ease, padding .18s ease;
}

.sidebar .nav-link {
  color: #dbeafe;
  border-radius: .375rem;
  font-weight: 500;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link-main {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: .625rem;
}

.nav-icon {
  color: #fff;
  display: inline-flex;
  flex: 0 0 18px;
  opacity: .92;
}

.nav-link-main span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

.content-pane {
  flex: 1 1 auto;
  min-width: 0;
  width: calc(100% - var(--vms-sidebar-width));
  transition: width .18s ease;
}

body.sidebar-collapsed .sidebar {
  width: 72px;
  flex-basis: 72px;
  max-width: 72px;
  padding-left: .75rem !important;
  padding-right: .75rem !important;
}

body.sidebar-collapsed .sidebar-logo {
  width: 42px;
}

body.sidebar-collapsed .sidebar .nav-link {
  padding-left: .625rem;
  padding-right: .625rem;
}

body.sidebar-collapsed .nav-link-main {
  justify-content: center;
  width: 100%;
}

body.sidebar-collapsed .nav-link-main span:last-child {
  display: none;
}

body.sidebar-collapsed .content-pane {
  width: calc(100% - 72px);
}

.dashboard-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 1rem;
}

.health-stack-card {
  min-width: 0;
}

.health-stack-card .card-header {
  padding: .625rem .75rem;
}

.health-kpi {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  min-height: 54px;
  gap: .625rem;
  border: 1px solid #e5e7eb;
  border-left-width: 4px;
  border-radius: .5rem;
  padding: .625rem .75rem;
  background: #fff;
}

.health-kpi-success { border-left-color: #198754; }
.health-kpi-warning { border-left-color: #ffc107; }
.health-kpi-danger { border-left-color: #dc3545; }
.health-kpi-info { border-left-color: #0dcaf0; }
.health-kpi-primary { border-left-color: #0d6efd; }
.health-kpi-secondary { border-left-color: #6c757d; }

.site-device-card {
  border: 1px solid rgba(0, 0, 0, .125);
  background: #fff;
}

.site-device-card:hover,
.site-device-card:focus {
  border-color: #0d6efd;
  box-shadow: 0 .25rem .75rem rgba(13, 110, 253, .16) !important;
}

.health-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.health-kpi-label {
  font-size: .875rem;
  color: #4b5563;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-kpi-value {
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
}

.dashboard-status-card {
  overflow: hidden;
}

.dashboard-status-layout {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 10rem;
}

.dashboard-status-pie {
  position: relative;
  width: min(100%, 168px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.dashboard-status-pie__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.dashboard-status-pie__track,
.dashboard-status-pie__segment {
  fill: none;
  stroke-width: 13;
}

.dashboard-status-pie__track {
  stroke: #e5e7eb;
}

.dashboard-status-pie__segment {
  stroke-linecap: butt;
  stroke-dasharray: 0 100;
  stroke-dashoffset: calc(var(--segment-offset) * -1);
  cursor: pointer;
  outline: none;
}

.dashboard-status-pie__segment:hover,
.dashboard-status-pie__segment:focus {
  stroke-width: 16;
}

.dashboard-status-pie__segment--online {
  stroke: #198754;
  animation: statusSegmentDraw 1.5s cubic-bezier(.2, .8, .2, 1) forwards;
}

.dashboard-status-pie__segment--degraded {
  stroke: #ffc107;
  animation: statusSegmentDraw 1.5s cubic-bezier(.2, .8, .2, 1) .95s forwards;
}

.dashboard-status-pie__segment--offline {
  stroke: #dc3545;
  animation: statusSegmentDraw 1.5s cubic-bezier(.2, .8, .2, 1) 1.9s forwards;
}

.dashboard-status-pie__center {
  position: relative;
  z-index: 1;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  pointer-events: none;
}

.dashboard-status-pie__metric {
  display: none;
  text-align: center;
}

.dashboard-status-pie__metric--online {
  display: block;
}

.dashboard-status-layout:has(.dashboard-status-pie__segment--degraded:hover) .dashboard-status-pie__metric,
.dashboard-status-layout:has(.dashboard-status-pie__segment--degraded:focus) .dashboard-status-pie__metric,
.dashboard-status-layout:has(.dashboard-status-pie__segment--offline:hover) .dashboard-status-pie__metric,
.dashboard-status-layout:has(.dashboard-status-pie__segment--offline:focus) .dashboard-status-pie__metric {
  display: none;
}

.dashboard-status-layout:has(.dashboard-status-pie__segment--degraded:hover) .dashboard-status-pie__metric--degraded,
.dashboard-status-layout:has(.dashboard-status-pie__segment--degraded:focus) .dashboard-status-pie__metric--degraded {
  display: block;
}

.dashboard-status-layout:has(.dashboard-status-pie__segment--offline:hover) .dashboard-status-pie__metric--offline,
.dashboard-status-layout:has(.dashboard-status-pie__segment--offline:focus) .dashboard-status-pie__metric--offline {
  display: block;
}

.dashboard-status-layout:has(.dashboard-status-pie__segment--online:hover) .dashboard-status-pie__metric,
.dashboard-status-layout:has(.dashboard-status-pie__segment--online:focus) .dashboard-status-pie__metric {
  display: none;
}

.dashboard-status-layout:has(.dashboard-status-pie__segment--online:hover) .dashboard-status-pie__metric--online,
.dashboard-status-layout:has(.dashboard-status-pie__segment--online:focus) .dashboard-status-pie__metric--online {
  display: block;
}

.dashboard-status-pie__label {
  font-weight: 600;
  color: #111827;
  font-size: .8125rem;
}

.dashboard-status-pie__value {
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 700;
}

.dashboard-status-pie__count {
  color: #6b7280;
  font-size: .68rem;
  line-height: 1.1;
}

@keyframes statusSegmentDraw {
  from { stroke-dasharray: 0 100; }
  to { stroke-dasharray: var(--segment-pct) var(--segment-rest); }
}

.status-dot {
  width: .625rem;
  height: .625rem;
  display: inline-block;
  border-radius: 50%;
  margin-right: .375rem;
}

.status-online { background: #198754; }
.status-degraded, .status-warning, .status-unstable { background: #ffc107; }
.status-offline, .status-failed, .status-critical { background: #dc3545; }
.status-unknown, .status-draft { background: #6c757d; }
.status-triage, .status-needs_review { background: #0d6efd; }

.table-fixed-thumb {
  width: 88px;
  height: 50px;
  object-fit: cover;
  border-radius: .375rem;
  background: #111827;
}

.report-edit-thumbs {
  display: grid;
  grid-template-columns: repeat(2, 76px);
  gap: .375rem;
  flex: 0 0 auto;
}

.report-edit-thumb img {
  width: 76px;
  height: 44px;
  object-fit: cover;
  border-radius: .375rem;
  background: #111827;
  display: block;
}

.report-edit-thumb span {
  display: block;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .6875rem;
  color: #6c757d;
  margin-top: .125rem;
}

.kpi-card {
  min-height: 112px;
}

.kpi-icon {
  align-items: center;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 42px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.kpi-icon svg {
  color: currentColor;
}

.kpi-clickable {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.kpi-clickable:hover,
.kpi-clickable:focus {
  transform: translateY(-1px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important;
}

.dashboard-main-row {
  align-items: stretch;
}

.dashboard-panel-card {
  height: 100%;
}

.dashboard-panel-card > .card-body {
  max-height: 520px;
  overflow: auto;
}

.scroll-panel {
  max-height: 360px;
  overflow: auto;
}

.server-license-scroll {
  max-height: 300px;
}

.dashboard-site-map {
  width: 100%;
  min-height: 360px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  background: #eef2f6;
}

.dashboard-coordinate-map {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(13, 110, 253, .12), transparent 55%),
    linear-gradient(45deg, rgba(25, 135, 84, .16), transparent 50%),
    #eef3f7;
}

.dashboard-coordinate-map__notice {
  position: absolute;
  left: .75rem;
  top: .625rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  padding: .375rem .5rem;
  border: 1px solid rgba(108, 117, 125, .25);
  border-radius: .375rem;
  background: rgba(255, 255, 255, .92);
  color: #495057;
  font-size: .8rem;
}

.dashboard-coordinate-map__legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.dashboard-coordinate-map__legend span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.dashboard-coordinate-map__legend-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  display: inline-block;
}

.dashboard-coordinate-map__legend-dot--online {
  background: #198754;
}

.dashboard-coordinate-map__legend-dot--degraded {
  background: #ffc107;
}

.dashboard-coordinate-map__legend-dot--offline {
  background: #dc3545;
}

.dashboard-coordinate-map__pin {
  position: absolute;
  z-index: 1;
  width: 1.125rem;
  height: 1.125rem;
  transform: translate(-50%, -100%) rotate(-45deg);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  padding: 0;
  background: var(--pin-color, #ffc107);
  box-shadow: 0 .125rem .5rem rgba(33, 37, 41, .28);
}

.dashboard-coordinate-map__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .35rem;
  height: .35rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
}

.dashboard-coordinate-map__pin--online {
  --pin-color: #198754;
}

.dashboard-coordinate-map__pin--degraded {
  --pin-color: #ffc107;
}

.dashboard-coordinate-map__pin--offline {
  --pin-color: #dc3545;
}

.camera-modal-image {
  cursor: pointer;
}

.camera-detail-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #111827;
  border-radius: .375rem;
}

.camera-sensor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem;
}

.camera-sensor-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #111827;
  border-radius: .375rem;
}

.recording-grid-wrap {
  overflow-x: auto;
}

.recording-grid {
  display: grid;
  grid-template-columns: 44px repeat(24, minmax(22px, 1fr));
  gap: 2px;
  min-width: 680px;
  align-items: center;
}

.recording-grid + .recording-grid {
  margin-top: 2px;
}

.recording-grid-header {
  font-size: .6875rem;
  color: #6c757d;
  text-align: center;
}

.recording-grid-day {
  font-size: .75rem;
  color: #495057;
  text-align: right;
  padding-right: .25rem;
}

.recording-cell {
  height: 20px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .12);
}

.recording-cell-always { background: #43b05c; }
.recording-cell-motion { background: #ef3b35; }
.recording-cell-motion-low { background: linear-gradient(135deg, #ef3b35 0 48%, #43b05c 50% 100%); }
.recording-cell-none { background: #111827; }
.recording-cell-unknown { background: #dee2e6; }

.recording-legend {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: .25rem;
  vertical-align: -.2rem;
}

.password-policy {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .75rem;
}

.password-policy-item {
  white-space: nowrap;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:focus {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

.page-section {
  display: none;
}

.page-section.active {
  display: block;
}

.text-tight {
  line-height: 1.15;
}

.text-prewrap {
  white-space: pre-wrap;
}

.crm-lookup-result {
  max-height: 180px;
  overflow: auto;
}

.report-camera-issue-list {
  max-height: 420px;
  overflow: auto;
}

.service-asset-picker {
  min-height: 8rem;
  max-height: 18rem;
  overflow: auto;
}

.service-evidence-preview {
  min-height: 9rem;
  max-height: 18rem;
  overflow: auto;
  white-space: pre-wrap;
}

.thermostat-chart-wrap {
  min-height: 10rem;
}

.thermostat-chart {
  align-items: flex-end;
  border-bottom: 1px solid var(--bs-border-color);
  border-left: 1px solid var(--bs-border-color);
  display: flex;
  gap: 0.2rem;
  height: 9rem;
  padding: 0.5rem 0.5rem 0;
}

.thermostat-chart-bar {
  background: linear-gradient(180deg, #0d6efd, #0aa2c0);
  border-radius: 0.25rem 0.25rem 0 0;
  flex: 1 1 0;
  min-width: 4px;
}

.thermostat-chart-empty {
  align-items: center;
  border: 1px dashed var(--bs-border-color);
  border-radius: 0.5rem;
  display: flex;
  min-height: 9rem;
  justify-content: center;
}

@media (max-width: 991.98px) {
  .app-shell {
    display: block !important;
  }

  .sidebar {
    width: 100%;
    max-width: none;
    flex-basis: auto;
    min-height: auto;
    position: static;
  }

  body.sidebar-collapsed .sidebar {
    width: 100%;
    max-width: none;
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.sidebar-collapsed .sidebar-logo {
    width: 138px;
  }

  .content-pane {
    width: 100%;
  }

  body.sidebar-collapsed .content-pane {
    width: 100%;
  }

  .dashboard-status-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-status-pie {
    justify-self: center;
  }
}