/* Główny panel: paleta i układ. Motyw można zmienić, nadpisując te zmienne. */
:root {
  --gd-panel:#f4f1ea;
  --gd-panel-strong:#d9d0bf;
  --gd-border:#c9bfa9;
  --gd-control-border:#b8ad94;
  --gd-control-text:#4a4334;
  --gd-accent:#976;
  --gd-muted:#6b6354;
  --gd-light:#fff;
  --gd-axis-text:#fff;
  --gd-yellow:#ffcc00;
  --gd-success:#00cc33;
  --gd-danger:#c50000;
}

.gd-forecast-grid {
  display:flex;
  gap:4px;
  align-items:flex-start;
  width:100%;
}

.gd-forecast-grid__item {
  flex:1;
  min-width:0;
}

.chart-container {
  margin-bottom:20px;
}

.gd-section-separator {
  border:0;
  border-top:1px solid rgba(255,255,255,.1);
  margin:2px 0;
}
/* Zegary, fazy i konfiguracja */
.main-layout {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:4px;
  padding:5px;
  max-width:100%;
}

.gauges-column {
  margin-top:2px;
  flex-grow:1;
  display:flex;
  flex-direction:column;
}

.dashboard {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
}

.gauge-container {
  margin:1px 3px;
  text-align:center;
}

.gauge,.status-indicator {
  width:120px;
  height:120px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.01);
  box-sizing:border-box;
}

.gauge::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:12px;
  background:conic-gradient(var(--color-gradient));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 0);
  transition:background .8s ease;
}

.status-indicator {
  border:12px solid var(--color);
  transition:all .5s ease;
}

.gauge-container.mini .gauge,.gauge-container.mini .status-indicator {
  width:70px;
  height:70px;
}

.gauge-container.mini .gauge::before {
  padding:6px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 0);
}

.gauge-container.mini .status-indicator {
  border-width:7px;
}

.gauge-value {
  position:relative;
  z-index:1;
  text-shadow:0 0 5px #000;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.value-number {
  font-size:20px;
  color:var(--gd-light);
  font-weight:bold;
}

.value-unit {
  font-size:11px;
  color:var(--gd-light);
  line-height:1.1;
  margin-top:2px;
}

.value-arrow {
  font-size:13px;
}

.status-text {
  color:var(--gd-light);
  text-shadow:0 0 5px #000;
  font-size:15px;
  text-align:center;
  font-weight:bold;
  line-height:1.1;
}

.label {
  margin-top:3px;
  font-size:13px;
  color:#000;
  opacity:.9;
}

.percent {
  font-size:12px;
  margin-top:2px;
  color:var(--gd-light);
}

.gauge-container.mini .value-number {
  font-size:14px;
}

.gauge-container.mini .status-text {
  font-size:10px;
}

.gauge-container.mini .percent {
  display:none;
}

.status-on {
  --color:var(--gd-success);
}

.status-off {
  --color:var(--gd-danger);
}

.histogram {
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  height:50px;
  margin:4px auto 0;
  overflow:hidden;
  width:120px;
}

.histogram-bar {
  width:1px;
  height:100%;
  position:relative;
}

.bar-fill {
  position:absolute;
  left:0;
  width:100%;
  background-color:var(--color);
}

.multi-gauge {
  width:120px;
  height:120px;
  position:relative;
  background:rgba(255,255,255,.01);
  border-radius:50%;
  margin:0 auto;
}

.ring-layer {
  position:absolute;
  inset:0;
  border-radius:50%;
  transition:all .8s ease;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-width)),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-width)),#000 0);
}

.multi-value-center {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:5;
  pointer-events:auto;
  line-height:1;
}

.multi-val-item {
  cursor:help;
  pointer-events:auto!important;
  position:relative;
  font:bold 15px/.9 monospace;
  text-shadow:0 0 3px rgba(0,0,0,.7);
}

.multi-val-item[data-tooltip]:hover::after {
  content:attr(data-tooltip);
  position:absolute;
  bottom:140%;
  left:50%;
  transform:translate(-50%,0);
  background:rgba(30,30,30,.8);
  color:var(--gd-light);
  padding:6px 12px;
  border-radius:6px;
  font-size:13px;
  white-space:nowrap;
  z-index:9999;
  pointer-events:none;
}

.phase-sidebar {
  display:block;
  width:170px;
  flex-shrink:0;
  background:rgba(0,0,0,.3);
  padding:10px;
  border-radius:12px;
  color:var(--gd-light);
  font-family:monospace;
  border:1px solid rgba(255,255,255,.2);
  margin:-20px 2px 2px;
  height:fit-content;
  align-self:flex-start;
}

.phase-table--config {
  margin-top:15px;
}

.phase-table h4 {
  margin:4px 0 2px;
  font-size:12px;
  color:var(--gd-yellow);
  text-transform:uppercase;
  letter-spacing:1px;
  border-bottom:1px solid rgba(255,204,0,.1);
}

.phase-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.f-label {
  color:#aaa;
  font-weight:bold;
  width:20px;
}

.f-val {
  font-weight:bold;
  color:var(--gd-light);
  flex:1;
  text-align:right;
  margin-right:4px;
}

.f-unit {
  font-size:9px;
  color:#bbb;
  font-weight:normal;
  width:12px;
}

.total-row {
  margin-top:6px;
  padding:6px 4px!important;
  border-top:2px solid rgba(255,255,255,.2)!important;
  background:rgba(255,255,255,.08);
  border-radius:4px;
}

.total-row .f-label,.phase-total-input {
  color:var(--gd-yellow)!important;
}

.total-row .f-val {
  font-size:14px;
  color:#00ff00;
}

.phase-total-output {
  color:#22d700!important;
}

.config-row {
  display:flex;
  flex-direction:column;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.c-label {
  font-size:10px;
  color:#ccc;
  text-transform:uppercase;
}

.c-ctrl {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.c-ctrl button {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:var(--gd-light);
  border-radius:4px;
  height:24px;
  cursor:pointer;
  font-size:11px;
  padding:0;
}

.c-ctrl button:active {
  background:var(--gd-yellow);
  color:#000;
}

.c-ctrl button.btn-coarse {
  width:25px;
  color:var(--gd-yellow);
  font-weight:bold;
}

.c-ctrl button.btn-fine {
  width:21px;
}

.c-val {
  color:var(--gd-yellow);
  font:bold 14px monospace;
  min-width:45px;
  text-align:center;
}
/* Osie generowane przez axes.js */
.axis-wrapper {
  --animation-duration:5s;
}

.axis-track {
  position:relative;
  width:92%;
  max-width:900px;
  height:30px;
  margin:-2px auto;
  text-align:center;
}

.axis-line {
  position:absolute;
  top:50%;
  left:20px;
  width:calc(100% - 40px);
  height:4px;
  transform:translateY(-50%);
  background:var(--gd-light);
  border-radius:2px;
  box-shadow:0 0 2px rgba(0,0,0,.4);
  z-index:1;
}

.axis-dot {
  position:absolute;
  top:50%;
  width:var(--axis-dot-size,12px);
  height:var(--axis-dot-size,12px);
  background:var(--gd-light);
  border-radius:50%;
  z-index:2;
}

.axis-dot--start {
  left:20px;
  transform:translate(-50%,-50%);
}

.axis-dot--end {
  left:calc(100% - 20px);
  transform:translate(-50%,-50%);
}

.axis-values {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.axis-end-label {
  position:absolute;
  top:7px;
  right:-30px;
  color:var(--gd-axis-text);
  font-size:12px;
  font-weight:bold;
  text-shadow:0 0 2px #000;
  z-index:100;
}

.axis-legend {
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.axis-legend-item {
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--gd-axis-text);
}

.axis-legend-swatch {
  width:10px;
  height:10px;
  background:var(--legend-color);
  border-radius:2px;
}

.axis-legend-label {
  font-size:11px;
  opacity:.8;
}

.data-bar {
  position:absolute;
  top:50%;
  left:0;
  height:var(--axis-bar-height,20px);
  border-radius:5px;
  background-color:var(--bar-color);
  z-index:var(--axis-z-index);
  box-shadow:0 0 2px rgba(0,0,0,.4);
  transition:transform var(--animation-duration) ease-in-out,width var(--animation-duration) ease-in-out;
  will-change:transform;
  box-sizing:border-box;
  backface-visibility:hidden;
}

.value-label {
  position:absolute;
  top:50%;
  left:0;
  color:var(--gd-axis-text);
  font-size:13px;
  font-weight:bold;
  text-shadow:0 0 2px #000;
  z-index:var(--axis-z-index);
  text-align:center;
  transition:transform var(--animation-duration) ease-in-out;
  will-change:transform;
  white-space:nowrap;
  pointer-events:none;
}
/* Sterowanie wykresem, histogram i tabela podsumowania */
.gd-chart-panel {
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--gd-panel);
  border:1px solid var(--gd-border);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.gd-chart-row,.gd-chart-group {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

.gd-chart-row {
  gap:14px;
}

.gd-chart-group {
  gap:5px;
}

.gd-chart-label {
  font-size:11px;
  font-weight:600;
  color:var(--gd-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-right:2px;
}

.gd-chart-btn,.gd-chart-select {
  border:1px solid var(--gd-control-border);
  border-radius:6px;
  background:var(--gd-light);
  color:var(--gd-control-text);
  font-size:13px;
  cursor:pointer;
}

.gd-chart-btn {
  padding:5px 11px;
  line-height:1;
  transition:all .15s;
  user-select:none;
}

.gd-chart-btn:hover {
  background:#e9e2d2;
  border-color:var(--gd-accent);
}

.gd-chart-btn:active {
  transform:translateY(1px);
}

.gd-chart-btn.active {
  background:var(--gd-accent);
  border-color:var(--gd-accent);
  color:var(--gd-light);
  font-weight:600;
}

.gd-chart-btn.gd-icon {
  padding:5px 9px;
  font-size:15px;
}

.gd-chart-select {
  padding:5px 8px;
}

.gd-chart-status {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:20px;
  white-space:nowrap;
}

.gd-chart-status.live {
  background:#e3f6e3;
  color:#1a7a1a;
}

.gd-chart-status.hist {
  background:#fdeede;
  color:#9a5b00;
}

.gd-status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}

.gd-chart-status.live .gd-status-dot {
  background:#1a7a1a;
  animation:gd-pulse 1.5s infinite;
}

.gd-chart-status.hist .gd-status-dot {
  background:#9a5b00;
}

.gd-chart-range-info {
  font-size:12px;
  color:var(--gd-muted);
  margin-top:8px;
  padding-top:6px;
  border-top:1px dashed var(--gd-border);
}

.gd-chart-wrapper {
  position:relative;
}

.gd-chart-canvas {
  width:100%;
  height:500px;
  background:var(--gd-panel-strong);
  border-radius:8px;
  border:1px solid #aaa;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gd-chart-loading {
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  background:rgba(217,208,191,.5);
  border-radius:8px;
  display:none;
}

.gd-chart-loading.gd-visible {
  display:flex;
}

.gd-spinner {
  width:34px;
  height:34px;
  border:4px solid var(--gd-border);
  border-top-color:var(--gd-accent);
  border-radius:50%;
  animation:gd-spin .8s linear infinite;
}

.mini-hist {
  cursor:pointer;
}

.mini-hist__bars {
  display:flex;
  align-items:flex-end;
  height:25px;
  width:var(--histogram-width);
  gap:var(--histogram-gap);
  padding:2px;
  overflow:hidden;
}

.mini-hist__bar {
  flex:1;
  height:var(--histogram-height);
  background:var(--histogram-color,currentColor);
  opacity:.8;
  min-width:1px;
}

.historical-summary-table {
  width:100%;
  border-collapse:collapse;
  text-align:right;
}

.historical-summary-table__head-main {
  background:#e0e0e0;
}

.historical-summary-table__head-sub {
  background:#f0f0f0;
}

.historical-summary-table__trend {
  background:#f9f9f9;
  height:30px;
}

.historical-summary-table__trend-label {
  font-size:9px;
  text-align:center;
  color:#888;
}

.historical-summary-table__label {
  text-align:left;
  font-weight:bold;
}

.historical-summary-table__metric {
  color:var(--summary-color);
  font-weight:bold;
}

.historical-summary-table__total {
  background:#908082;
  font-size:1.1em;
  font-weight:bold;
  color:var(--gd-light);
}

#hist-popup {
  position:fixed;
  z-index:9999;
  pointer-events:none;
  display:none;
  background:rgba(255,255,255,.5);
  border-radius:8px;
  border:1px solid #444;
  box-shadow:0 4px 15px rgba(0,0,0,.3);
  padding:10px;
}

#hist-canvas {
  background:rgba(255,255,255,.85);
  display:block;
}
/* Mini-kamery dołączane przez główny panel. */
.camera-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-bottom:2px;
}

.camera-box {
  background:#000;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  aspect-ratio:16/9;
}

.camera-box iframe {
  width:100%;
  height:100%;
  border:0;
  pointer-events:none;
  transform-origin:center;
}

.chinczyk iframe {
  transform:scaleX(1.45);
}

.fullscreen {
  position:fixed!important;
  inset:0;
  width:100vw!important;
  height:100vh!important;
  z-index:9999;
  aspect-ratio:auto!important;
}

.fullscreen iframe {
  width:100%;
  height:100%;
}

.fullscreen.chinczyk iframe {
  transform:scaleX(1)!important;
}

@keyframes pulse-up {
  0% {
    box-shadow:0 0 0 0 rgba(0,255,0,.65);
  }
  70% {
    box-shadow:0 0 0 15px rgba(0,255,0,0);
  }
}

@keyframes pulse-down {
  0% {
    box-shadow:0 0 0 0 rgba(255,0,0,.65);
  }
  70% {
    box-shadow:0 0 0 15px rgba(255,0,0,0);
  }
}

@keyframes critical-pulse {
  0%,100% {
    filter:drop-shadow(0 0 2px rgba(255,0,0,.5));
    transform:scale(1);
  }
  50% {
    filter:drop-shadow(0 0 15px rgba(255,0,0,.9));
    transform:scale(1.02);
  }
}

@keyframes critical-alert-bg {
  0%,100% {
    background:rgba(255,0,0,.05);
  }
  50% {
    background:rgba(255,0,0,.2);
  }
}

.critical-alert {
  animation:critical-alert-bg 1s infinite,critical-pulse 1s infinite!important;
}

@keyframes gd-pulse {
  0%,100% {
    opacity:1;
  }
  50% {
    opacity:.3;
  }
}

@keyframes gd-spin {
  to {
    transform:rotate(360deg);
  }
}

@media(max-width:640px) {
  .main-layout,.gd-forecast-grid {
    flex-direction:column;
  }
  .phase-sidebar {
    width:auto;
    align-self:stretch;
    margin-top:2px;
  }
  .gd-chart-status {
    margin-left:0;
  }
  .gd-chart-row {
    gap:8px;
  }
  .gd-chart-canvas {
    height:360px;
  }
}