/* This local file is rendered at 125% in the target Edge setup.
   Counter-scale the whole page so it matches Dashboard and Control Climate. */
html { zoom: .8; }
.nutrients-shell { min-height: 125vh; }
.nutrients-dashboard { grid-column: 2; grid-row: 3; min-width: 0; padding: 13px 20px 24px; position: relative; }
.nutrient-note { position: absolute; right: 22px; bottom: 10px; z-index: 5; padding: 6px 11px; border-radius: 12px; background: #fff1bd; color: #815a00; font-size: 11px; font-weight: 700; }
.nutrient-note.online { background: #d9f7d2; color: #18702a; }
.nutrient-note.offline { background: #ffe0e0; color: #a41d1d; }
.nutrient-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; }
.nutrient-period.day { background: #ffd000; color: #222; }
.calibration-fallback { border: 2px solid #168ad1; color: #168ad1 !important; font-size: 11px; font-weight: 700; }

.reservoir-grid { display: grid; grid-template-columns: repeat(3, minmax(360px, 1fr)); gap: 17px; align-items: start; }
.reservoir-column { min-width: 0; }
.reservoir-title { height: 46px; margin: 0 0 9px; display: grid; place-items: center; background: #c9ef9d; font-size: 20px; }
.reservoir-column.nursery .reservoir-title { background: #ffe97a; }
.reservoir-metrics { min-height: 178px; padding: 35px 36px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; background: #f0f0f0; }
.nutrient-meter-card { min-width: 0; text-align: center; }
.nutrient-meter { --meter-color: #27c537; --level: 54%; width: 100px; height: 100px; margin: 0 auto 8px; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--meter-color) 0 var(--level), #aaa var(--level) 100%); }
.nutrient-meter::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: white; }
.nutrient-meter-content { position: relative; z-index: 1; display: grid; place-items: center; gap: 7px; }
.nutrient-meter-symbol { min-height: 28px; display: grid; place-items: center; font-family: Georgia, serif; font-size: 20px; font-weight: 700; }
.nutrient-meter-symbol.temp { font-size: 26px; }
.nutrient-meter-symbol img { display: block; width: 24px; height: 24px; object-fit: contain; }
.nutrient-meter-value {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.nutrient-meter-label { min-height: 35px; font-size: 15px; line-height: 1.2; }

.reservoir-level { height: 67px; padding: 13px 22px; display: grid; grid-template-columns: 32px 105px 1fr; align-items: center; gap: 8px; }
.reservoir-level-icon { color: #4328ff; font-size: 27px; text-align: center; }
.reservoir-level-label { font-size: 14px; white-space: nowrap; }
.reservoir-level-track { height: 13px; border-right: 10px solid #d0d0d0; background: #dedede; overflow: hidden; }
.reservoir-level-fill { width: 0; height: 100%; background: transparent; transition: width .2s ease, background-color .2s ease; }
.reservoir-level-fill.level-unknown { width: 0; background: transparent; }
.reservoir-level-fill.level-0 { width: 24%; background: #ff1010; }
.reservoir-level-fill.level-1 { width: 63%; background: #079447; }
.reservoir-level-fill.level-2 { width: 95%; background: #0e3d77; }
.reservoir-level-fill.level-3 { width: 100%; background: #ff1010; }

.reservoir-recipe {
    min-height: 50px;
    padding: 0 22px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.reservoir-recipe-label {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}
.reservoir-recipe-value {
    width: 154px;
    height: 36px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #242424;
    background: #fff;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nutrient-devices { padding: 10px 20px 0; display: grid; gap: 11px; }
.nutrient-device-row { min-height: 52px; display: grid; grid-template-columns: 52px minmax(155px, 1fr) 52px 56px 59px; align-items: center; gap: 8px; }
.nutrient-device-icon { width: 50px; height: 42px; display: grid; place-items: center; font-size: 21px; font-weight: 700; }
.nutrient-device-icon img { display: block; max-width: 48px; max-height: 40px; object-fit: contain; }
.nutrient-device-name { font-size: 16px; }
.nutrient-mode { width: 43px; height: 43px; padding: 0; display: grid; place-items: center; border: 2px solid white; outline: 2px solid #303033; border-radius: 50%; background: #303033; color: white; font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.nutrient-mode.mode-0 { background: #ed1c24; outline-color: #ed1c24; }
.nutrient-mode.mode-1 { background: #7ed321; outline-color: #7ed321; }
.nutrient-mode.mode-2 { background: #ff8a45; outline-color: #ff8a45; }
.nutrient-mode.mode-3 { background: #303033; outline-color: #303033; }
.nutrient-onoff { font-size: 15px; white-space: nowrap; }
.nutrient-switch { width: 58px; height: 29px; padding: 3px; border: 3px solid #2b2b2b; border-radius: 20px; background: #aaa; cursor: pointer; }
.nutrient-switch::after { content: ""; display: block; width: 17px; height: 17px; border: 3px solid #222; border-radius: 50%; background: #777; }
.nutrient-switch.on { background: #55bd2e; }
.nutrient-switch.on::after { transform: translateX(25px); background: #27c91b; }
.nutrient-mode:disabled,
.nutrient-switch:disabled { opacity: 1; cursor: not-allowed; }
.nutrient-mode.pending,
.nutrient-switch.pending { opacity: .58; cursor: wait; }

@media (max-width: 1350px) {
    .reservoir-grid { grid-template-columns: repeat(3, minmax(330px, 1fr)); }
    .nutrients-dashboard { overflow-x: auto; }
    .reservoir-grid { min-width: 1050px; }
    .reservoir-metrics { gap: 12px; padding-left: 18px; padding-right: 18px; }
    .nutrient-device-row { grid-template-columns: 45px minmax(140px, 1fr) 48px 52px 58px; }
}