.dashboard-shell { min-height: 100vh; }
.dashboard-page { grid-column: 2; grid-row: 3; min-width: 0; padding: 28px 28px 24px; position: relative; overflow-x: auto; }
.dashboard-canvas { min-width: 1390px; display: grid; gap: 26px; }
.dashboard-period { min-width: 88px; height: 35px; display: grid; place-items: center; margin-left: 14px; border-radius: 20px; background: #173c78; color: white; font-size: 12px; font-weight: 700; }
.dashboard-period.day { background: #ffd000; color: #222; }
.dashboard-data-status { position: fixed; right: 18px; bottom: 14px; z-index: 10; padding: 7px 12px; border-radius: 13px; font-size: 11px; font-weight: 700; }
.dashboard-data-status.waiting { background: #fff1bd; color: #815a00; }
.dashboard-data-status.online { background: #d9f7d2; color: #18702a; }
.dashboard-data-status.offline { background: #ffe0e0; color: #a41d1d; }

.dashboard-top { display: grid; grid-template-columns: minmax(430px, 2.2fr) repeat(4, minmax(205px, 1fr)); gap: 24px; align-items: stretch; }
.trend-panel { height: 240px; border: 2px solid #67a6dc; position: relative; overflow: hidden; background: #fbffff; }
.trend-title { position: absolute; top: 7px; left: 12px; z-index: 2; display: grid; pointer-events: none; }
.trend-title strong { font-size: 14px; }
.trend-title span { color: #667; font-size: 10px; }
#dashboardTrend { display: block; width: 100%; height: 100%; }
.trend-grid { stroke: #bde9e7; stroke-width: 1; }
.trend-axis-text { fill: #557; font-size: 10px; }
.trend-empty { fill: #777; font-size: 14px; text-anchor: middle; }
.trend-legend { font-size: 10px; font-weight: 700; }

.summary-card { min-width: 0; min-height: 225px; background: #f4faec; }
.summary-card h2 { height: 30px; margin: 0; display: grid; place-items: center; background: #c9ef9d; font-size: 16px; }
.summary-card h3 { margin: 12px 8px 20px; font-size: 18px; font-weight: 400; text-align: center; }
.summary-card dl { margin: 0; padding: 0 18px; display: grid; gap: 16px; font-size: 16px; }
.summary-card dl div { display: grid; grid-template-columns: minmax(105px, 1fr) minmax(65px, auto); gap: 8px; }
.summary-card dd { margin: 0; text-align: right; white-space: nowrap; }
.summary-card dd span { display: inline-block; min-width: 28px; text-align: right; }
.climate-summary-card { background: #e6f5f7; }
.climate-summary-card h2 { background: #94bee9; }
.nursery-summary { background: #fffbea; }
.nursery-summary h2 { background: #ffc796; }

.climate-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 84px; padding: 15px 58px 5px; }
.dashboard-meter-card { display: grid; justify-items: center; gap: 6px; }
.dashboard-ring { --ring-color: #27c537; --ring-level: 0%; width: 145px; height: 145px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring-color) 0 var(--ring-level), #aaa var(--ring-level) 100%); transition: background .2s ease; }
.dashboard-ring.red { --ring-color: #ff1010; }
.dashboard-ring.neutral { --ring-color: #27c537; }
.dashboard-ring-core { width: 121px; height: 121px; display: grid; place-items: center; align-content: center; gap: 10px; border-radius: 50%; background: white; }
.dashboard-ring-icon { min-height: 43px; display: grid; place-items: center; font-size: 27px; font-weight: 700; }
.dashboard-ring-icon.co2 { min-height: 0; padding: 5px 8px; border: 3px solid #111; border-radius: 50%; font-size: 22px; }
.dashboard-ring-core strong,
.dashboard-ring-core output {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dashboard-meter-label { width: 158px; height: 51px; display: flex; align-items: center; justify-content: center; border: 5px solid #7ed321; border-radius: 28px; background: white; font-size: 19px; }
.dashboard-meter-label.light { gap: 8px; }
.dashboard-meter-label i { width: 28px; height: 28px; border: 2px solid #444; border-radius: 50%; background: #555; }
.dashboard-meter-label i.on { background: #69cc35; }

.dashboard-reservoirs { display: grid; grid-template-columns: repeat(3, minmax(390px, 1fr)); gap: 50px; }
.dashboard-reservoir { min-width: 0; }
.dashboard-reservoir h2 { height: 41px; margin: 0 0 4px; display: grid; place-items: center; background: #c9ef9d; font-size: 19px; }
.dashboard-reservoir.nursery h2 { background: #ffc796; }
.dashboard-reservoir-body { min-height: 185px; padding: 29px 32px 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; background: #f0f0f0; }
.dashboard-reservoir-metric { min-width: 0; display: grid; justify-items: center; align-content: start; }
.dashboard-small-ring { --ring-color: #27c537; --ring-level: 0%; width: 105px; height: 105px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring-color) 0 var(--ring-level), #aaa var(--ring-level) 100%); }
.dashboard-small-ring.aqua { --ring-color: #42d6cb; }
.dashboard-small-ring-core { width: 85px; height: 85px; display: grid; place-items: center; align-content: center; gap: 6px; border-radius: 50%; background: white; }
.dashboard-small-ring-core span { min-height: 28px; display: grid; place-items: center; font-family: Georgia, serif; font-size: 19px; font-weight: 700; }
.dashboard-small-ring-core span img { display: block; width: 24px; height: 24px; object-fit: contain; }
.dashboard-small-ring-core strong,
.dashboard-small-ring-core output {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dashboard-reservoir-metric > span { margin-top: 8px; font-size: 15px; text-align: center; white-space: nowrap; }
.dashboard-level { min-height: 87px; padding: 36px 7px 0; display: grid; grid-template-columns: auto 130px 1fr; align-items: center; gap: 10px; }
.dashboard-level-icon { color: #4328ff; font-size: 26px; }
.dashboard-level-label { font-size: 14px; white-space: nowrap; }
.dashboard-level-track { height: 14px; border-right: 11px solid #d0d0d0; background: #dedede; overflow: hidden; }
.dashboard-level-fill { width: 0; height: 100%; background: #0e3d77; transition: width .2s ease, background-color .2s ease; }
.dashboard-level-fill[data-level="unknown"] { background: transparent; }
.dashboard-level-fill[data-level="0"] { background: #ff1010; }
.dashboard-level-fill[data-level="1"] { background: #079447; }
.dashboard-level-fill[data-level="2"] { background: #0e3d77; }
.dashboard-level-fill[data-level="3"] { background: #ff1010; }
.dashboard-level-value { grid-column: 3; justify-self: end; margin-top: -31px; font-size: 11px; }

@media (max-width: 1500px) {
    .dashboard-page { padding-left: 18px; padding-right: 18px; }
    .dashboard-canvas { min-width: 1320px; }
    .dashboard-top { gap: 16px; grid-template-columns: minmax(390px, 2fr) repeat(4, minmax(190px, 1fr)); }
    .summary-card dl { padding: 0 12px; }
    .climate-kpis { gap: 50px; }
    .dashboard-reservoirs { gap: 30px; }
}

@media (max-width: 900px) {
    .dashboard-page { padding: 16px; overflow-x: auto; }
    .dashboard-canvas { min-width: 1220px; }
    .dashboard-period { display: none; }
}