/* Match the target Edge setup used by Control Nutrients and Help.
   Edge renders the local file at 125%, so counter-scale back to the
   same apparent size as Dashboard and Control Climate. */
html { zoom: .8; }
.setting-shell { min-height: 125vh; }
.setting-page { grid-column: 2; grid-row: 3; min-width: 0; padding: 7px 8px 16px; position: relative; overflow: auto; }
.setting-canvas { min-width: 1240px; display: grid; grid-template-columns: minmax(395px, 1fr) minmax(395px, 1fr) minmax(420px, 1.02fr); gap: 8px; align-items: stretch; }
.setting-period { min-width: 88px; height: 35px; display: grid; place-items: center; border-radius: 20px; background: #173c78; color: #fff; font-size: 12px; font-weight: 700; }
.setting-period.day { background: #ffd000; color: #222; }
.setting-panel { min-width: 0; border: 1px solid #aeb4b7; background: #f2f2f2; }
.setting-panel-title { min-height: 52px; padding: 6px 8px; display: grid; grid-template-columns: 1fr 1.15fr auto; align-items: center; gap: 8px; color: #079447; font-size: 20px; }
.setting-device-title { display: flex; align-items: center; justify-content: center; gap: 8px; color: #707070; white-space: nowrap; }
.setting-device-title img { width: 44px; height: 36px; object-fit: contain; filter: grayscale(1); opacity: .7; }
.setting-save { min-width: 54px; height: 28px; border: 1px solid #52a81d; border-radius: 15px; background: #7ed321; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.setting-save:disabled { background: #9ca3af; border-color: #777; cursor: wait; }
.setting-save.pending { background: #f5b700; }
.setting-schedule-grid { padding: 4px 7px 7px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; align-content: start; }
.reservoir-setting .setting-schedule-grid { grid-template-rows: repeat(16, 54px); grid-auto-flow: column; }
.reservoir-setting .setting-slot { min-height: 54px; grid-template-rows: 15px 32px; }
.setting-schedule-grid.single-column { grid-template-columns: 1fr; padding: 5px 6px 8px; }
.setting-slot { min-width: 0; min-height: 61px; padding: 2px 3px 5px; display: grid; grid-template-columns: minmax(61px, 1fr) minmax(61px, 1fr) 46px; grid-template-rows: 17px 34px; column-gap: 3px; background: rgba(255,255,255,.16); }
.setting-slot-label { align-self: end; text-align: center; font-family: Georgia, serif; font-size: 12px; }
.setting-slot-label.used-label { grid-column: 3; }
.setting-time { min-width: 0; display: grid; grid-template-columns: 1fr 7px 1fr; align-items: center; background: #dedede; }
.setting-time input { width: 100%; min-width: 0; height: 32px; padding: 0 2px; border: 0; background: transparent; font-family: Consolas, monospace; font-size: 17px; text-align: center; font-variant-numeric: tabular-nums; }
.setting-time span { text-align: center; font-weight: 700; }
.setting-used { position: relative; display: grid; place-items: center; cursor: pointer; }
.setting-used input { position: absolute; opacity: 0; pointer-events: none; }
.setting-used-mark { width: 42px; height: 36px; display: grid; place-items: center; border: 1px solid #555; background: #eef0ff; }
.setting-used-mark::after { content: ""; width: 22px; height: 12px; border-left: 7px solid transparent; border-bottom: 7px solid transparent; transform: rotate(-45deg); }
.setting-used input:checked + .setting-used-mark::after { border-color: #4db08e; }
.setting-used input:focus-visible + .setting-used-mark { outline: 3px solid #2d78c4; outline-offset: 1px; }
.setting-used input:disabled + .setting-used-mark { opacity: .6; }
.setting-topic { display: none; }
.setting-right-column { min-width: 0; display: grid; grid-template-rows: auto auto; gap: 8px; align-content: start; }
.nursery-setting-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 8px; }
.nursery-setting { background: #ffffef; }
.nursery-title { min-height: 48px; grid-template-columns: 1fr auto; background: #9df6ae; text-align: center; }
.nursery-setting .setting-slot { grid-template-columns: minmax(58px, 1fr) minmax(58px, 1fr) 43px; min-height: 64px; }
.nursery-setting .setting-time input { font-size: 15px; }
.nursery-setting .setting-used-mark { width: 39px; }
.time-lamp-setting { background: #ffffef; }
.time-lamp-title { min-height: 38px; padding: 2px 8px; grid-template-columns: 1fr auto; background: #8ef598; text-align: center; }
.time-lamp-grid { padding: 5px 9px 8px; display: grid; gap: 3px; }
.time-lamp-row { min-height: 54px; display: grid; grid-template-columns: 105px minmax(72px, 1fr) minmax(72px, 1fr) 43px; grid-template-rows: 16px 34px; column-gap: 5px; align-items: center; }
.time-lamp-name { grid-row: 1 / 3; align-self: center; color: #079447; font-size: 16px; text-align: center; white-space: nowrap; }
.time-lamp-row .setting-slot-label { grid-row: 1; }
.time-lamp-row .setting-slot-label.used-label { grid-column: 4; }
.time-lamp-row .setting-time,
.time-lamp-row .setting-used { grid-row: 2; }
.time-lamp-row .setting-time input { font-size: 15px; }
.time-lamp-row .setting-used-mark { width: 39px; }
@media (max-width: 1500px) {
    .setting-canvas { min-width: 1210px; grid-template-columns: 395px 395px 410px; }
    .setting-panel-title { font-size: 18px; }
    .setting-slot { grid-template-columns: minmax(58px, 1fr) minmax(58px, 1fr) 43px; }
    .setting-time input { font-size: 15px; }
}

@media (max-width: 900px) {
    .setting-page { padding: 8px; }
    .setting-canvas { min-width: 0; grid-template-columns: 1fr; }
    .setting-period { display: none; }
    .setting-schedule-grid,
    .reservoir-setting .setting-schedule-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
    .nursery-setting-grid { grid-template-columns: 1fr; }
    .time-lamp-row { grid-template-columns: 100px minmax(72px, 1fr) minmax(72px, 1fr) 43px; }
}