#sceneCanvas,
#particleField {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#sceneCanvas {
  z-index: 0;
  display: none;
  opacity: 1;
}

#sceneCanvas.is-active {
  display: block;
}

#particleField {
  z-index: 0;
  display: none;
  opacity: 0.5;
}

#particleField.is-active {
  display: block;
}

.dashboard-screen {
  width: 100%;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: clamp(58px, 7.1vh, 74px) minmax(0, 1fr) clamp(25px, 3.2vh, 32px);
  background-image:
    linear-gradient(rgba(126, 177, 177, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 177, 177, 0.018) 1px, transparent 1px);
}

.dashboard-main {
  min-height: 0;
  padding: clamp(8px, 1vw, 18px) clamp(9px, 1.05vw, 20px) clamp(7px, 0.8vw, 14px);
  grid-template-rows: clamp(84px, 10vh, 104px) minmax(0, 1fr);
  gap: clamp(8px, 0.8vh, 12px);
}

.kpi-row,
.monitor-grid,
.column {
  min-width: 0;
  min-height: 0;
}

.kpi-card {
  background: linear-gradient(145deg, rgba(14, 34, 39, 0.66), rgba(8, 23, 27, 0.56));
  border-color: rgba(147, 194, 193, 0.15);
}

.panel {
  background: linear-gradient(145deg, rgba(13, 31, 36, 0.64), rgba(8, 22, 26, 0.56));
  border-color: rgba(147, 194, 193, 0.14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
  backdrop-filter: blur(9px);
}

.panel:before {
  background: linear-gradient(115deg, rgba(76, 174, 157, 0.035), transparent 42%);
}

.kpi-sweep {
  opacity: 0.85;
  background: linear-gradient(100deg, transparent, rgba(172, 255, 231, 0.09), transparent);
}

.kpi-card::after {
  width: 118px;
  height: 118px;
  right: -56px;
  top: -70px;
  border-color: color-mix(in srgb, var(--tone), transparent 58%);
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--tone), transparent 94%), 0 0 30px color-mix(in srgb, var(--tone), transparent 84%);
  animation: metricOrbit 5.6s ease-in-out infinite;
}

.kpi-card:nth-child(2)::after {
  animation-delay: -1.2s;
}

.kpi-card:nth-child(3)::after {
  animation-delay: -2.4s;
}

.kpi-card:nth-child(4)::after {
  animation-delay: -3.6s;
}

.kpi-card:nth-child(5)::after {
  animation-delay: -4.8s;
}

.kpi-card:nth-child(6)::after {
  animation-delay: -2s;
}

.kpi-card > strong {
  text-shadow: 0 0 18px color-mix(in srgb, var(--tone), transparent 78%);
  animation: valueGlow 4.8s ease-in-out infinite;
}

.kpi-card:nth-child(2) > strong {
  animation-delay: -0.8s;
}

.kpi-card:nth-child(3) > strong {
  animation-delay: -1.6s;
}

.kpi-card:nth-child(4) > strong {
  animation-delay: -2.4s;
}

.kpi-card:nth-child(5) > strong {
  animation-delay: -3.2s;
}

.kpi-card:nth-child(6) > strong {
  animation-delay: -4s;
}

.panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 34%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(91, 255, 204, 0.8), rgba(91, 255, 204, 0.12), transparent);
  box-shadow: 0 0 11px rgba(78, 226, 176, 0.34);
  animation: panelScan 7.4s ease-in-out infinite;
}

.column-left .panel:nth-child(2)::after {
  animation-delay: -2.1s;
}

.column-center .capital-panel::after {
  animation-delay: -3.7s;
}

.column-right .inspection-panel::after {
  animation-delay: -1.3s;
}

.energy-chart-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: min(70%, 238px);
  aspect-ratio: 1;
  left: 50%;
  top: 51%;
  border: 1px dashed rgba(78, 226, 176, 0.24);
  border-top-color: rgba(96, 247, 208, 0.78);
  border-radius: 50%;
  filter: drop-shadow(0 0 7px rgba(78, 226, 176, 0.18));
  transform: translate(-50%, -50%) rotateX(58deg);
  animation: energyOrbit 17s linear infinite;
}

.energy-chart-wrap > .chart-box {
  position: relative;
  z-index: 1;
}

.energy-chart-wrap .chart-center-label {
  z-index: 2;
  text-shadow: 0 0 12px rgba(78, 226, 176, 0.2);
}

.asset-cell {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(18, 42, 47, 0.58), rgba(18, 42, 47, 0.35));
}

.asset-cell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -25% auto -25% -75%;
  width: 48%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(125, 255, 219, 0.13), transparent);
  animation: tileScan 8s ease-in-out infinite;
}

.asset-cell:nth-child(2)::after {
  animation-delay: -2s;
}

.asset-cell:nth-child(3)::after {
  animation-delay: -4s;
}

.asset-cell:nth-child(4)::after {
  animation-delay: -6s;
}

.asset-cell > * {
  position: relative;
  z-index: 1;
}

.asset-cell > i {
  box-shadow: 0 0 15px rgba(78, 226, 176, 0.1);
}

.summary-primary > strong {
  text-shadow: 0 0 20px rgba(78, 226, 176, 0.18);
  animation: valueGlow 4.5s ease-in-out infinite;
}

@keyframes metricOrbit {
  0%, 100% { opacity: 0.56; transform: scale(0.92) rotate(-8deg); }
  50% { opacity: 1; transform: scale(1.08) rotate(8deg); }
}

@keyframes valueGlow {
  0%, 100% { filter: brightness(0.94); }
  50% { filter: brightness(1.18); }
}

@keyframes panelScan {
  0%, 12% { opacity: 0; transform: translateX(-110%); }
  22% { opacity: 0.85; }
  66% { opacity: 0.5; }
  88%, 100% { opacity: 0; transform: translateX(330%); }
}

@keyframes energyOrbit {
  from { transform: translate(-50%, -50%) rotateX(58deg) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotateX(58deg) rotate(360deg); }
}

@keyframes tileScan {
  0%, 15% { left: -75%; opacity: 0; }
  25% { opacity: 1; }
  70% { opacity: 0.75; }
  88%, 100% { left: 130%; opacity: 0; }
}

.panel-heading h2 {
  letter-spacing: 0;
}

.topbar,
.statusbar {
  min-width: 0;
}

.topbar,
.statusbar {
  z-index: 2;
}

@media (min-width: 1001px) {
  .kpi-top {
    font-size: 11px;
  }

  .kpi-card > small,
  .energy-legend,
  .today-volume span,
  .asset-cell small,
  .asset-foot,
  .chart-legend,
  .chart-caption,
  .monthly-totals span,
  .data-caption,
  .capital-list > div,
  .summary-primary > span,
  .summary-row,
  .inspection-item,
  .sync-panel small {
    font-size: 9px;
  }

  .panel-index {
    font-size: 10px;
  }

  .panel-heading h2 {
    font-size: 13px;
  }
}

@media (max-width: 1000px) {
  body {
    overflow: hidden;
  }

  .dashboard-screen {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: 60px minmax(0, 1fr) 26px;
  }

  .topbar,
  .statusbar {
    height: auto;
  }

  .dashboard-main {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
  }

  .statusbar {
    min-width: 0;
  }

  #sceneCanvas {
    opacity: 0.9;
  }

  .panel {
    background: linear-gradient(145deg, rgba(13, 31, 36, 0.76), rgba(8, 22, 26, 0.69));
  }

  .kpi-card {
    background: linear-gradient(145deg, rgba(14, 34, 39, 0.79), rgba(8, 23, 27, 0.72));
  }
}

@media (max-width: 620px) {
  .dashboard-screen {
    grid-template-rows: 56px minmax(0, 1fr) 24px;
  }

  .topbar {
    height: 56px;
  }

  .statusbar {
    height: 24px;
  }

  .dashboard-main {
    padding: 8px;
  }

  .kpi-row {
    grid-auto-rows: 82px;
  }

  .monitor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .panel-fuel,
  .asset-panel,
  .panel-main-chart,
  .capital-panel,
  .month-summary,
  .inspection-panel,
  .sync-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .panel-fuel {
    height: 342px;
  }

  .asset-panel,
  .capital-panel {
    height: 210px;
  }

  .panel-main-chart {
    height: 330px;
  }

  .month-summary {
    height: 275px;
  }

  .inspection-panel {
    height: 250px;
  }

  .sync-panel {
    height: 68px;
  }

  .statusbar {
    font-size: 7px;
  }

  .panel {
    background: linear-gradient(145deg, rgba(13, 31, 36, 0.8), rgba(8, 22, 26, 0.74));
  }

  #sceneCanvas {
    opacity: 0.76;
  }
}

@media (max-width: 1000px) {
  .login-screen {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: auto;
  }
}

@media (max-height: 720px) and (min-width: 1001px) {
  .dashboard-main {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .kpi-row {
    grid-auto-rows: 76px;
    margin-bottom: 8px;
  }

  .monitor-grid {
    height: 690px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sceneCanvas {
    opacity: 0.38;
  }
}