/* my-dashboard.css - Custom Dashboard Styles */

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
  text-align: center;
  padding: 60px 30px;
  max-width: 500px;
  margin: 60px auto;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.4), rgba(142, 130, 252, 0.4));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-icon i,
.empty-state-icon svg {
  width: 32px;
  height: 32px;
  color: white;
}

.empty-state h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
}

.empty-state p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 8px;
  line-height: 1.6;
}

.configure-btn {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--primary-color);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.configure-btn:hover {
  background: rgba(48, 162, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(48, 162, 255, 0.3);
}

.configure-btn i,
.configure-btn svg {
  width: 18px;
  height: 18px;
}

/* Auto-refresh button active state */
.auto-refresh-btn.active {
  background: rgba(48, 162, 255, 0.2);
  color: #30a2ff;
  border-color: rgba(48, 162, 255, 0.4);
}

.auto-refresh-btn .auto-refresh-countdown {
  font-size: 0.68rem;
  font-family: 'Courier New', monospace;
  color: white;
  margin-left: 2px;
}

/* Widen container on dashboard page to utilise large screens */
.container {
  max-width: 1600px;
  padding: 20px 28px;
}

/* Tighten system-tile grid gap and reduce internal padding from inherited dashboard.css */
.summary-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 4px 0;
}

.summary-grid > .summary-card {
  flex: 1 1 340px;
}

/* Break height:100% chain from dashboard.css so the grid row auto-sizes correctly */
#system-tiles-grid .summary-card {
  height: auto;
}
#system-tiles-grid .stability-grid,
#system-tiles-grid .storage-grid,
#system-tiles-grid .plants-grid {
  height: auto;
}

/* summary-grid is now flexbox — 4-col cap enforced by flex-basis + max-width */

/* Dashboard sections container — uniform gap between all sections */
#dashboard-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* All dashboard maps are non-interactive — ensure touch scrolling passes through */
#dashboard-sections .leaflet-container {
  touch-action: pan-y !important;
}

/* Override glass-card margin and max-width inside dashboard so cards fill the wider container */
#dashboard-sections .glass-card {
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;
}

/* Soften hover lift so cards don't overlap with tight gaps */
#dashboard-sections .glass-card:hover {
  transform: translateY(-2px);
}

/* Section drag-and-drop reordering */
.section-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
  transition: color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

.section-drag-handle:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
}

.section-drag-handle:active {
  cursor: grabbing;
}

/* Sections without size toggles (plantmap, aggregate) still get controls wrapper via addDragHandles */

/* Card-level drag handles (shown on hover) */
.card-drag-handle {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: grab;
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.draggable-card {
  position: relative;
}

.draggable-card:hover .card-drag-handle {
  opacity: 1;
}

.card-drag-handle:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.12);
}

.card-drag-handle:active {
  cursor: grabbing;
}

/* Mini-map cards have white map bg — use dark grab handle */
.mini-map-card .card-drag-handle {
  color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.08);
}

.mini-map-card .card-drag-handle:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.15);
}

/* IC & CN card headers: shift label left on hover to avoid grab icon overlap */
.ic-card-header,
.cn-card-header {
  transition: padding-right 0.2s ease;
}

.ic-card:hover .ic-card-header,
.cn-card:hover .cn-card-header {
  padding-right: 28px;
}

.card-dragging {
  opacity: 0.4;
  transform: scale(0.97);
}

.card-drag-over {
  outline: 2px dashed rgba(48, 162, 255, 0.5);
  outline-offset: -2px;
}

/* Handle for grid sections — now inside .section-controls wrapper, no standalone styles needed */
.section-controls > .section-drag-handle {
  width: auto;
  padding: 3px 8px;
  margin-bottom: 0;
  border-radius: 4px;
}

.section-controls > .section-drag-handle:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Dragging state */
.dashboard-section.section-dragging {
  opacity: 0.4;
  transform: scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Drop target indicator */
.dashboard-section.section-drag-over {
  box-shadow: 0 -2px 0 0 rgba(48, 162, 255, 0.6);
  border-radius: 8px;
}

/* Section controls bar (drag handle + size toggle) — hidden until section hover */
.section-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease;
  grid-column: 1 / -1;
}

.dashboard-section:hover > .section-controls {
  opacity: 1;
  max-height: 40px;
  padding: 4px 0 6px;
}

/* Size toggle button */
.section-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.3);
  padding: 3px 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.section-size-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

/* Section size modes — expanded: single column full-width */
.dashboard-section.section-expanded.plant-tiles-grid > .plant-tile {
  flex: 0 0 100% !important;
  max-width: none !important;
}

.dashboard-section.section-expanded.mini-maps-grid > .mini-map-card {
  flex: 0 0 100% !important;
  max-width: none !important;
}

.dashboard-section.section-expanded.summary-grid > .summary-card {
  flex: 0 0 100% !important;
  max-width: none !important;
}

/* Section size modes — compact: tighter multi-column grid */
.dashboard-section.section-compact.plant-tiles-grid > .plant-tile {
  flex: 1 1 220px !important;
  max-width: 300px !important;
}

.dashboard-section.section-compact.mini-maps-grid > .mini-map-card {
  flex: 1 1 200px !important;
  max-width: 260px !important;
}

.dashboard-section.section-compact.summary-grid > .summary-card {
  flex: 1 1 240px !important;
}

.dashboard-section.section-expanded.ic-maps-grid > .ic-card {
  flex: 0 0 100% !important;
  max-width: none !important;
}

.dashboard-section.section-expanded.cn-maps-grid > .cn-card {
  flex: 0 0 100% !important;
  max-width: none !important;
}

.dashboard-section.section-expanded .maintenance-tiles-grid > .maint-tile {
  flex: 0 0 100% !important;
  max-width: none !important;
}

.dashboard-section.section-compact .maintenance-tiles-grid > .maint-tile {
  flex: 1 1 200px !important;
  max-width: 260px !important;
}

.dashboard-section.section-compact.ic-maps-grid > .ic-card {
  flex: 1 1 160px !important;
  max-width: 180px !important;
}

.dashboard-section.section-compact.cn-maps-grid > .cn-card {
  flex: 1 1 160px !important;
  max-width: 180px !important;
}

/* ============================================
   PLANT MAP TILE
   ============================================ */
.plant-map-card {
  padding: 0 !important;
  overflow: hidden;
}

.plant-map-card .card-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.plant-map-card .card-header h3 {
  flex: 1;
  margin: 0;
  font-size: 1rem;
}

.plant-map-legend-toggle {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.plant-map-legend-toggle:hover {
  opacity: 1;
}

.plant-map-legend-toggle i,
.plant-map-legend-toggle svg {
  width: 16px;
  height: 16px;
}

.plant-map-container {
  height: 400px;
  width: 100%;
  background: #e8e8e8;
  z-index: 1;
}

/* Remove Leaflet default icon bg for custom markers */
.plant-donut-marker,
.plant-dot-marker {
  background: none !important;
  border: none !important;
}

/* Breathe animation for active plant map markers */
@keyframes marker-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.45); opacity: 1; }
}

.plant-dot-wrap {
  display: flex;
}

.plant-dot-wrap.marker-breathe {
  animation: marker-breathe 2.5s ease-in-out infinite;
}

.plant-map-legend {
  padding: 10px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
}

.map-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.8);
}

.map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Leaflet popup overrides */
.plant-map-container .leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.96);
  color: #222;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.plant-map-container .leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.96);
}

.plant-map-container .leaflet-popup-content {
  margin: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #333;
}

.map-popup-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
  color: #111;
}

.map-popup-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.map-popup-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
}

.map-popup-stats .label {
  color: #888;
}

.map-popup-stats .value {
  font-weight: 600;
  text-align: right;
  color: #222;
}

.map-popup-bar {
  margin-top: 6px;
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.map-popup-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ============================================
   INTERCONNECTOR MINI-MAP CARDS (individual)
   ============================================ */
.ic-maps-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ic-maps-grid > .ic-card {
  flex: 1 1 180px;
  max-width: 200px;
}

.ic-card {
  border-radius: 14px;
  overflow: hidden;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.ic-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ic-card-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

.ic-card-country {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ic-card-map {
  height: 160px;
  width: 100%;
  background: #f0f0f0;
  z-index: 1;
}

.ic-card-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ic-card-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.ic-card-stat:last-child {
  border-right: none;
}

.ic-card-stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 2px;
}

.ic-card-stat-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.ic-dot-marker {
  background: none !important;
  border: none !important;
}

/* Animated flow lines for IC maps */
@keyframes dash-animation-import {
  0% { stroke-dashoffset: 48; }
  100% { stroke-dashoffset: 0; }
}

@keyframes dash-animation-export {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -48; }
}

.ic-card-map .animated-flow.import-flow {
  animation: dash-animation-import 2s linear infinite;
}

.ic-card-map .animated-flow.export-flow {
  animation: dash-animation-export 2s linear infinite;
}

/* ============================================
   CONSTRAINT MINI-MAP CARDS (individual)
   ============================================ */
.cn-maps-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.cn-maps-grid > .cn-card {
  flex: 1 1 220px;
  max-width: 280px;
}

.cn-card {
  border-radius: 14px;
  overflow: hidden;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.cn-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-card-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

.cn-card-mode {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 10px;
}

.cn-mode-live {
  background: #ef4444;
  color: #fff;
}

.cn-mode-planned {
  background: #3b82f6;
  color: #fff;
}

.cn-card-map {
  height: 160px;
  width: 100%;
  background: #f0f0f0;
  z-index: 1;
}

.cn-card-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-card-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-card-stat:last-child {
  border-right: none;
}

.cn-card-stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 2px;
}

.cn-card-stat-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

/* Constraint badges in configurator */
.cn-badge {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 8px;
  vertical-align: middle;
  margin-left: 4px;
}

.cn-badge-live {
  background: #ef4444;
  color: #fff;
}

.cn-badge-planned {
  background: #3b82f6;
  color: #fff;
}

.cn-flow-arrow {
  background: none !important;
  border: none !important;
}

@keyframes cn-arrow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.35); opacity: 1; }
}

.cn-arrow-pulse {
  animation: cn-arrow-pulse 2s ease-in-out infinite;
}

/* ============================================
   MINI MAP CARDS
   ============================================ */
.mini-maps-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.mini-maps-grid > .mini-map-card {
  flex: 1 1 280px;
  max-width: 350px;
}

.mini-map-card {
  border-radius: 14px;
  overflow: hidden;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mini-map-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

/* Map area — the Leaflet map + donut overlay */
.mini-map-map-area {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.mini-map-leaflet {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Spinning outer ring animation for active plants */
@keyframes ring-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ring-spin {
  animation: ring-spin 3s linear infinite;
}

/* Ring overlay centred on the map */
.mini-map-ring-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

/* Gradient fade at bottom of map blending into info panel */
.mini-map-gradient-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15));
  z-index: 3;
  pointer-events: none;
}

/* Info panel below the map */
.mini-map-info {
  padding: 12px 14px 14px;
}

.mini-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.mini-map-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Stats row */
.mini-map-stats {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
}

.mini-map-stat {
  flex: 1;
  text-align: center;
}

.mini-map-stat-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  line-height: 1.3;
}

.mini-map-stat-label {
  display: block;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mini-map-stat-output .mini-map-stat-value {
  font-size: 1.05rem;
}

/* Utilisation bar */
.mini-map-bar-wrap {
  margin-top: 2px;
}

.mini-map-bar-bg {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.mini-map-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* Leaflet tooltip override */
.plant-map-tooltip {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #222 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.plant-map-tooltip::before {
  border-top-color: rgba(255, 255, 255, 0.95) !important;
}

.system-tile {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  overflow: hidden;
  position: relative;
  animation: fade-in 0.5s ease forwards;
}

.system-tile:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.system-tile .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: none;
}

.system-tile .card-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.system-tile .card-icon i,
.system-tile .card-icon svg {
  width: 16px;
  height: 16px;
  color: var(--primary-color);
}

.system-tile h3 {
  margin: 0;
  font-size: 0.95rem;
  color: white;
}

.system-tile .tile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}

.system-tile .tile-stat {
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
  border-radius: 6px;
}

.system-tile .tile-stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

.system-tile .tile-stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: white;
}

.system-tile .tile-chart {
  height: 60px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 4px;
  position: relative;
}

.system-tile .tile-chart-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-top: 2px;
}

/* ============================================
   PLANT TILES GRID
   ============================================ */
.plant-tiles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.plant-tiles-grid > .plant-tile {
  flex: 1 1 300px;
  max-width: 400px;
}

.plant-tile {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  overflow: hidden;
  position: relative;
  animation: fade-in 0.5s ease forwards;
}

.plant-tile:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.plant-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.plant-tile-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.plant-tile-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plant-tile-icon i,
.plant-tile-icon svg {
  width: 18px;
  height: 18px;
  color: white;
}

.plant-tile-name {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plant-tile-badge {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Fuel type badge colors (solid backgrounds) */
.badge-nuclear { background: #7a2e10; color: #ff9800; }
.badge-gas { background: #7a5e08; color: #ffc107; }
.badge-wind-offshore { background: #0a4a6b; color: #4fc3f7; }
.badge-wind-onshore { background: #0a5c5c; color: #4dd0e1; }
.badge-battery { background: #5a1a6b; color: #ce93d8; }
.badge-biomass { background: #2a5a2e; color: #81c784; }
.badge-pumped { background: #283070; color: #9fa8da; }
.badge-hydro { background: #1a4a44; color: #4db6ac; }
.badge-pv { background: #7a6a10; color: #fff176; }
.badge-ocgt { background: #7a4a0a; color: #ffb74d; }
.badge-peaker { background: #6a1530; color: #f48fb1; }
.badge-vpp { background: #4a3028; color: #bcaaa4; }
.badge-sync-comp { background: #3a4a52; color: #b0bec5; }

/* Fuel type icon backgrounds */
.icon-nuclear { background: linear-gradient(135deg, rgba(255, 87, 34, 0.7), rgba(255, 152, 0, 0.7)); }
.icon-gas { background: linear-gradient(135deg, rgba(255, 193, 7, 0.7), rgba(255, 152, 0, 0.7)); }
.icon-wind-offshore { background: linear-gradient(135deg, rgba(3, 169, 244, 0.7), rgba(0, 188, 212, 0.7)); }
.icon-wind-onshore { background: linear-gradient(135deg, rgba(0, 188, 212, 0.7), rgba(38, 166, 154, 0.7)); }
.icon-battery { background: linear-gradient(135deg, rgba(156, 39, 176, 0.7), rgba(103, 58, 183, 0.7)); }
.icon-biomass { background: linear-gradient(135deg, rgba(76, 175, 80, 0.7), rgba(56, 142, 60, 0.7)); }
.icon-pumped { background: linear-gradient(135deg, rgba(63, 81, 181, 0.7), rgba(48, 63, 159, 0.7)); }
.icon-hydro { background: linear-gradient(135deg, rgba(0, 150, 136, 0.7), rgba(0, 121, 107, 0.7)); }
.icon-pv { background: linear-gradient(135deg, rgba(255, 235, 59, 0.7), rgba(255, 193, 7, 0.7)); }
.icon-ocgt { background: linear-gradient(135deg, rgba(255, 152, 0, 0.7), rgba(245, 124, 0, 0.7)); }
.icon-peaker { background: linear-gradient(135deg, rgba(233, 30, 99, 0.7), rgba(194, 24, 91, 0.7)); }
.icon-vpp { background: linear-gradient(135deg, rgba(121, 85, 72, 0.7), rgba(93, 64, 55, 0.7)); }
.icon-sync-comp { background: linear-gradient(135deg, rgba(96, 125, 139, 0.7), rgba(69, 90, 100, 0.7)); }

/* Plant tile body */
.plant-tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plant-tile-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.plant-tile-stat {
  flex: 1;
  text-align: center;
}

.plant-tile-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  line-height: 1.2;
}

.plant-tile-stat-value.positive { color: #4caf50; }
.plant-tile-stat-value.negative { color: #f44336; }

.plant-tile-stat-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Sparkline container */
.plant-tile-sparkline {
  height: 60px;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 4px;
  margin-top: auto;
}

.plant-tile-sparkline canvas {
  width: 100% !important;
  height: 100% !important;
}

.sparkline-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-top: 2px;
}

/* Utilisation bar */
.plant-tile-utilisation-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.plant-tile-utilisation {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  flex: 1;
}

.plant-tile-utilisation-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease, background 0.3s ease;
  background: rgba(255, 255, 255, 0.85);
}

.plant-tile-utilisation-fill.charging {
  background: linear-gradient(90deg, #4caf50, #81c784);
}

.plant-tile-utilisation-fill.exporting {
  background: rgba(255, 255, 255, 0.85);
}

.plant-tile-utilisation-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Loading shimmer for tiles */
.plant-tile-loading {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.05) 25%, 
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Maintenance warning badge */
.plant-tile-maintenance {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: rgba(244, 67, 54, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plant-tile-maintenance i,
.plant-tile-maintenance svg {
  width: 12px;
  height: 12px;
  color: white;
}

/* ============================================
   FUEL MIX CHART
   ============================================ */
.fuelmix-card {
  padding: 0;
  overflow: hidden;
}

.fuelmix-card .card-header {
  padding: 16px 20px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fuelmix-period {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 500;
  color: #fff;
  background: #30a2ff;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.03em;
}

.fuelmix-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 0 16px 6px;
}

.fuelmix-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease;
}

.fuelmix-stats .stat-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.fuelmix-stats .stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.fuelmix-stats .stat-icon svg {
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.5);
}

.fuelmix-stats .stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fuelmix-stats .stat-label {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fuelmix-stats .stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

.fuelmix-content {
  height: 340px;
  padding: 4px 14px 0;
}

.fuelmix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fuelmix-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #fff;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease;
}

.fuelmix-legend-item:hover {
  background: rgba(255, 255, 255, 0.14);
}

.fuelmix-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fuelmix-legend-name {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.fuelmix-legend-mw {
  color: #fff;
  font-weight: 600;
  font-size: 0.73rem;
}

.fuelmix-legend-pct {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.66rem;
}

/* ============================================
   UNPLANNED MAINTENANCE
   ============================================ */
.maintenance-tiles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.maintenance-tiles-grid > .maint-tile {
  flex: 1 1 260px;
  max-width: 340px;
}

.maintenance-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px;
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  width: 100%;
}

.maintenance-empty svg {
  width: 20px;
  height: 20px;
  color: #22c55e;
}

.maint-summary-tile {
  width: 100%;
  padding: 12px 20px;
  margin: 0;
  text-align: center;
}

.maint-summary-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
}

.maint-summary-header svg {
  width: 16px;
  height: 16px;
  color: #f59e0b;
}

.maint-summary-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #ef4444;
}

.maint-summary-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

.maint-tile {
  padding: 14px 16px;
  margin: 0;
}

.maint-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.maint-tile-name {
  font-weight: 600;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
}

.maint-tile-fuel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.maint-tile-fuel svg {
  width: 12px;
  height: 12px;
}

.maint-tile-meter {
  margin-bottom: 10px;
}

.maint-tile-meter-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.maint-tile-meter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.maint-tile-meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
}

.maint-tile-capacity {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  margin-bottom: 8px;
}

.maint-cap-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 2px 0;
}

.maint-cap-row span:last-child {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.maint-cap-unavail span:last-child {
  color: #f44336;
  font-weight: 600;
}

.maint-tile-cause {
  font-size: 0.72rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  padding-bottom: 6px;
}

.maint-tile-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 6px;
}

.maint-tile-bmu {
  font-size: 0.65rem;
  font-family: 'Courier New', monospace;
  color: rgba(255, 255, 255, 0.3);
}

.maint-tile-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
}

/* ============================================
   AGGREGATE SUMMARY
   ============================================ */
.aggregate-summary .card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agg-plant-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 500;
  color: #fff;
  background: #30a2ff;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.03em;
}

.aggregate-summary .aggregate-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 0 16px;
}

.aggregate-summary .stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease;
}

.aggregate-summary .stat-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.aggregate-summary .stat-item.stat-highlight {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.aggregate-summary .stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.aggregate-summary .stat-highlight .stat-icon {
  background: rgba(255, 255, 255, 0.06);
}

.aggregate-summary .stat-icon svg {
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.5);
}

.aggregate-summary .stat-highlight .stat-icon svg {
  color: rgba(255, 255, 255, 0.5);
}

.aggregate-summary .stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.aggregate-summary .stat-label {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aggregate-summary .stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

.aggregate-summary .stat-highlight .stat-value {
  color: rgba(255, 255, 255, 0.95);
}

.aggregate-utilisation-section {
  padding: 14px 16px 0;
}

.agg-util-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.agg-util-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.agg-util-pct {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.aggregate-utilisation-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.aggregate-utilisation-fill {
  height: 100%;
  background: linear-gradient(90deg, #30a2ff, #60d4ff);
  border-radius: 4px;
  transition: width 0.6s ease;
  width: 0%;
}

.aggregate-fuel-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 16px 16px;
}

.agg-fuel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.72rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease;
}

.agg-fuel-badge:hover {
  background: rgba(255, 255, 255, 0.14);
}

.agg-fuel-badge strong {
  color: white;
  font-weight: 600;
}

.agg-fuel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================
   CONFIGURATOR DRAWER
   ============================================ */
.configurator-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.configurator-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.configurator-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, #667eea 0%, #5a4fa0 50%, #764ba2 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1600;
  display: flex;
  flex-direction: column;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
}

.configurator-drawer.open {
  right: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.drawer-header h2 {
  margin: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}

.drawer-header h2 i,
.drawer-header h2 svg {
  width: 20px;
  height: 20px;
  color: white;
}

.drawer-close-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: none;
}

.drawer-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: none;
  box-shadow: none;
}

.drawer-close-btn i,
.drawer-close-btn svg {
  width: 16px;
  height: 16px;
}

/* Search */
.drawer-search {
  padding: 12px 20px;
  position: relative;
  flex-shrink: 0;
}

.drawer-search .search-icon {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.drawer-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: white;
  font-size: 0.9rem;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.drawer-search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.drawer-search input:focus {
  border-color: rgba(48, 162, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(48, 162, 255, 0.15);
}

/* Scrollable body (single scroll container for all sections) */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.drawer-body::-webkit-scrollbar {
  width: 6px;
}

.drawer-body::-webkit-scrollbar-track {
  background: transparent;
}

.drawer-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* Sections — each sizes to its content, no flex growth */
.drawer-section {
  flex-shrink: 0;
}

.drawer-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.95), rgba(90, 79, 160, 0.95));
}

.drawer-section-header:hover {
  background: rgba(0, 0, 0, 0.15);
}

.drawer-section-header > i:first-child,
.drawer-section-header > svg:first-child {
  width: 18px;
  height: 18px;
  color: white;
  flex-shrink: 0;
}

.drawer-section-header > span:first-of-type {
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  letter-spacing: 0.02em;
}

.section-count {
  margin-left: auto;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: white !important;
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
}

.section-chevron {
  transition: transform 0.3s ease;
  color: white !important;
}

.drawer-section-header.collapsed .section-chevron {
  transform: rotate(-90deg);
}

.drawer-section-content {
  padding: 4px 12px;
}

.drawer-section-content.collapsed {
  display: none;
}

/* Fuel type group in drawer */
.fuel-type-group {
  margin-bottom: 2px;
}

.fuel-type-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease;
  user-select: none;
}

.fuel-type-group-header:hover {
  background: rgba(0, 0, 0, 0.15);
}

.fuel-type-group-header .fuel-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fuel-type-group-header .fuel-icon i,
.fuel-type-group-header .fuel-icon svg {
  width: 12px;
  height: 12px;
  color: white;
}

.fuel-type-group-header .fuel-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: white;
  flex: 1;
}

.fuel-type-group-header .fuel-count {
  font-size: 0.68rem;
  color: white;
  background: rgba(0, 0, 0, 0.2);
  padding: 1px 7px;
  border-radius: 8px;
}

.fuel-type-group-header .fuel-chevron {
  width: 14px;
  height: 14px;
  color: white;
  transition: transform 0.3s ease;
}

.fuel-type-group-header.collapsed .fuel-chevron {
  transform: rotate(-90deg);
}

.fuel-type-group-sites {
  padding-left: 16px;
}

.fuel-type-group-sites.collapsed {
  display: none;
}

/* Site option (individual selectable plant/group) */
.site-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
}

@media (hover: hover) {
  .site-option:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

.site-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.site-option .site-name {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-option .site-bmu-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

/* Tile option (system tiles) */
.tile-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
}

@media (hover: hover) {
  .tile-option:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

.tile-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tile-option-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-option-icon i,
.tile-option-icon svg {
  width: 14px;
  height: 14px;
  color: white;
}

/* Tile option checked state */
.tile-option:has(input:checked) {
  background: rgba(48, 162, 255, 0.12);
  border-left: 3px solid var(--primary-color);
  padding-left: 9px;
}

.tile-option:has(input:checked) .tile-option-icon {
  background: rgba(48, 162, 255, 0.25);
}

/* Site option checked state */
.site-option:has(input:checked) {
  background: rgba(48, 162, 255, 0.12);
  border-left: 3px solid var(--primary-color);
  padding-left: 9px;
}

.tile-option span:last-child {
  font-size: 0.85rem;
  color: white;
  font-weight: 500;
}

/* Drawer Footer */
.drawer-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.drawer-footer-primary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.drawer-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drawer-action-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: white;
}

.drawer-action-btn svg {
  width: 14px;
  height: 14px;
}


.apply-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--primary-color);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.apply-btn:hover {
  background: rgba(48, 162, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(48, 162, 255, 0.3);
}

.apply-btn i,
.apply-btn svg {
  width: 16px;
  height: 16px;
}

.clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 14px;
  background: #7a2020;
  border: 1px solid #943030;
  border-radius: 10px;
  color: #ffb4b4;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.clear-btn:hover {
  background: #8a2828;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.clear-btn i,
.clear-btn svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   FAB BUTTON
   ============================================ */
.fab-configure {
  position: fixed;
  right: 24px;
  bottom: 90px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(48, 162, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
  border: none;
  padding: 0;
}

.fab-configure:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 24px rgba(48, 162, 255, 0.5);
}

.fab-configure i,
.fab-configure svg {
  width: 22px;
  height: 22px;
}

/* ============================================
   SHARE MODAL
   ============================================ */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: share-modal-fade-in 0.25s ease;
}
@keyframes share-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.share-modal {
  background: rgba(20, 24, 40, 0.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  animation: share-modal-slide-up 0.3s ease;
}
@keyframes share-modal-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.share-modal-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(48, 162, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.share-modal-icon svg {
  width: 24px;
  height: 24px;
  color: #30a2ff;
}

.share-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.share-modal-text {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 16px;
}

.share-modal-url {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
  color: rgba(255, 255, 255, 0.7);
  word-break: break-all;
  max-height: 60px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.share-modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 32px;
  border-radius: 8px;
  background: #30a2ff;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.share-modal-close-btn:hover {
  background: #1b8ce6;
}

/* ============================================
   AUTO-HIDE BOTTOM NAV
   ============================================ */
body.nav-auto-hide .bottom-nav {
  transform: translateY(calc(100% - 6px));
  transition: transform 0.3s ease;
}
body.nav-auto-hide .bottom-nav:hover {
  transform: translateY(0);
}
/* Invisible hover zone above the nav so users can easily trigger reveal */
body.nav-auto-hide .bottom-nav::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 30px;
}

/* Active state for Hide Nav button */
.drawer-action-btn.nav-hide-active {
  background: rgba(48, 162, 255, 0.2);
  border-color: #30a2ff;
  color: #30a2ff;
}

/* Active state for Performance Mode button */
.drawer-action-btn.perf-mode-active {
  background: rgba(48, 162, 255, 0.2);
  border-color: #30a2ff;
  color: #30a2ff;
}

/* ============================================
   PERFORMANCE MODE
   ============================================ */

/* Disable backdrop-filter on all dashboard elements */
.perf-mode .system-tile,
.perf-mode .plant-tile,
.perf-mode .ic-card,
.perf-mode .cn-card,
.perf-mode .mini-map-card,
.perf-mode .glass-card,
.perf-mode .configurator-overlay,
.perf-mode .configurator-drawer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Replace transition: all with specific properties */
.perf-mode .system-tile,
.perf-mode .plant-tile {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.perf-mode .ic-card,
.perf-mode .cn-card,
.perf-mode .mini-map-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Pause all infinite CSS animations */
.perf-mode .marker-breathe,
.perf-mode .animated-flow,
.perf-mode .cn-arrow-pulse,
.perf-mode .ring-spin {
  animation-play-state: paused !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .plant-tiles-grid > .plant-tile {
    flex: 0 0 100%;
    max-width: none;
  }
  .plant-tiles-grid {
    gap: 15px;
  }
  
  .system-tiles-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .fab-configure {
    right: 16px;
    bottom: 80px;
    width: 48px;
    height: 48px;
  }
  
  .configurator-drawer {
    width: 100%;
    max-width: 100vw;
    right: -100vw;
  }

  .drawer-footer {
    padding-bottom: 36px;
  }
}

/* plant-tiles-grid is now flexbox — 1200px+ handled by base flex rule */

@media (min-width: 1800px) {
  .container {
    max-width: 1800px;
  }
}