/* DrainRite black background, dark-blue lines, and softer blue surfaces. */
:root{color-scheme:dark;--dr-bg:#000;--dr-line:#173c70;--dr-card:#304d70;--dr-text:#f4f8ff;--dr-muted:#d1deef;background:var(--dr-bg);color:var(--dr-text)}
body{background:var(--dr-bg);color:var(--dr-text)}
header{background:#000;border-bottom:2px solid var(--dr-line);padding-top:10px;padding-bottom:10px;gap:12px}
header .brand{display:block;flex:0 1 265px;line-height:0;min-width:155px;text-decoration:none}
header .brand-logo{display:block;width:100%;height:auto;max-height:100px;object-fit:contain;object-position:left center}
.metric,.panel,.job{background:var(--dr-card);border-color:var(--dr-line)}
.metric span,.muted,.job p,.field label,.toolbar label,.note{color:var(--dr-muted)}
.note{border-left-color:#537fb9}
.pill,.status{background:#294e80;color:#e6f0ff}
select,input,textarea{background:#0b1729;color:var(--dr-text);border-color:var(--dr-line)}
button,a.button-link{background:#365c87;border-color:var(--dr-line);color:#fff}
button.active,.primary,a.button-link.primary{background:#315e98;border-color:#426ca5}
button:hover,a.button-link:hover{filter:brightness(1.12)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #a6c7ff;outline-offset:3px}
.badge{background:#29476d;color:#eaf3ff}
.badge.warning{background:#73511c;color:#ffdf9d}
.badge.ok{background:#205b4d;color:#a8f1d4}
.job.calendar-plumbing{background:#2d496b;border-color:var(--dr-line);border-left:5px solid #719bd0}
.job.calendar-water{background:#345377;border-color:var(--dr-line);border-left:5px solid #adc5e6}
.job.calendar-plumbing:hover,.job.calendar-water:hover{border-color:#577fb2}
dialog{background:#080f1b;color:var(--dr-text);border-color:var(--dr-line)}
dialog::backdrop{background:#000c}
.part{background:#294568}
.empty{color:var(--dr-muted)}
#accounts article{border-bottom-color:var(--dr-line)}
.app-controls .display-size-control{color:var(--dr-muted)}
@media(max-width:650px){
  header{padding:8px 15px;gap:8px}
  header .brand{flex-basis:180px;min-width:140px;max-width:48%}
  header .brand-logo{max-height:78px}
}

/* Restore original calendar colors */
.job.calendar-plumbing {
    border-left: 5px solid #5badeb;
    background: #172d3d;
}
.job.calendar-water {
    border-left: 5px solid #e77979;
    background: #30252e;
}
.job.calendar-plumbing:hover { border-color: #5badeb; }
.job.calendar-water:hover { border-color: #e77979; }