.ccc-sidebar {
  width: 260px;
  flex-shrink: 0;
}

.logo {
  height: 36px;
  width: auto;
  max-width: 100%;
}

/* The System's Map tab: a tall map filling the content area under the tab bar. */
.ccc-map {
  height: 75vh;
  min-height: 400px;
  border-radius: var(--bs-border-radius);
  /* Leaflet's map panes are absolutely positioned and fall back to the nearest
     positioned ancestor -- none of ours are positioned, so make the container the
     positioning context, and clip its content to its own box. Leaflet sets both of
     these itself at init, but that does not take effect on boosted navigation,
     leaving the map shifted to the viewport origin and overflowing the container. */
  position: relative;
  overflow: hidden;
}

/* Map markers, colored by System status to match the activity badge
   (application_status_badge.html.j2): prepare = info, the run phases = warning, cancel =
   danger, idle = secondary. Offline Systems are greyed out and faded, so a down System
   never reads like an active one. */
.ccc-map-marker {
  /* Width and height are set inline per marker so the dot can scale with the map zoom. */
  display: block;
  border-radius: 50%;
  border: 2px solid var(--bs-body-bg);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  background: var(--bs-secondary);
}

.ccc-map-marker--info {
  background: var(--bs-info);
}

.ccc-map-marker--warning {
  background: var(--bs-warning);
}

.ccc-map-marker--danger {
  background: var(--bs-danger);
}

.ccc-map-marker--idle {
  background: var(--bs-secondary);
}

.ccc-map-marker--offline {
  background: var(--bs-secondary);
  opacity: 0.5;
}

/* Map control panel (zoom, fit), matching the DataMiner map's control visual language. */
.ccc-map-controls {
  background-color: var(--bs-body-bg);
  padding: 6px;
  border-radius: var(--bs-border-radius);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

/* A System's friendly name reads as a clickable name (it opens the details page),
   matching how a polygon name looks in the DataMiner GUI: plain until hovered. */
.system-name-link {
  text-decoration: none;
  color: var(--bs-code-color);
}

.system-name-link:hover {
  text-decoration: underline;
  color: var(--bs-primary-color);
}

/* Briefly highlight a fleet row that changed live (arrived or updated in place),
   fading a subtle accent background back to normal to draw the eye. The animation
   runs on the cells, not the <tr>: Bootstrap paints each cell's own background
   (via --bs-table-bg), which would otherwise cover a row-level background. */
@keyframes fleet-row-flash {
  from {
    background-color: var(--bs-success-bg-subtle);
  }
  to {
    background-color: transparent;
  }
}

.fleet-row-flash > td {
  animation: fleet-row-flash 4s ease-out;
}