*{box-sizing:border-box}
:root{
  --bg:#f2f5f7;--panel:#fff;--text:#111820;--muted:#687581;--line:#d8e0e5;
  --teal:#1d6976;--teal-dark:#183944;--appt-line:#6f8792;
  --good:#2f7d55;--warn:#c18a2c;--bad:#b44343;
}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.app-header{background:var(--teal-dark);color:#fff;padding:20px 0 18px}
.app-header h1,.app-header p{width:min(100%,920px);margin-left:auto;margin-right:auto}
.app-header h1{margin-top:0;margin-bottom:4px;font-size:24px;font-weight:800}
.app-header p{margin-top:0;margin-bottom:0;font-size:12px}
.app-shell{width:min(100%,920px);margin:0 auto;padding:16px 0 28px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
button{border:0;border-radius:6px;background:var(--teal);color:#fff;padding:8px 11px;font-size:11px;font-weight:800;cursor:pointer}
button.secondary{background:#e9eef1;color:var(--text)}
button.danger{background:#f1dddd;color:#8a2929}
#weekLabel{font-size:13px;font-weight:800}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px}
.panel h2{margin:0 0 12px;font-size:20px}
.calendar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;overflow:auto}
.day{min-width:150px;min-height:445px;background:#fbfcfd;border:1px solid var(--line);border-radius:8px;padding:8px}
.day-title{font-weight:800;font-size:12px;padding-bottom:7px;border-bottom:1px solid #e3e8eb;margin-bottom:6px}
.inspector{margin-top:9px}.inspector-name{font-size:11px;font-weight:800;margin-bottom:4px}
.inspector-name .off{font-size:9px;font-weight:700;color:var(--bad);margin-left:4px}
.open{font-size:10px;color:#7c8991}
.appointment{background:#fff;border-left:3px solid var(--appt-line);border-radius:5px;padding:7px;margin:5px 0;cursor:pointer}
.time{font-size:12px;font-weight:800}.address{font-size:9px;color:var(--muted);line-height:1.25;margin-top:3px}
.notice{background:#fff9e9;border:1px solid #ecd997;border-radius:6px;padding:10px;font-size:10px;line-height:1.4;margin-bottom:12px}
.search-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.field label,label{display:block;font-size:10px;font-weight:800;margin-bottom:4px}
input,select{width:100%;padding:8px 9px;border:1px solid #cbd5da;border-radius:6px;font-size:12px;background:#fff}
.search-actions{margin-top:10px}
.day-results{margin-top:12px;border:1px solid var(--line);border-radius:8px;padding:10px;background:#fbfcfd}
.day-results h3{margin:0 0 8px;font-size:14px}
.result{border:1px solid var(--line);border-left:4px solid var(--good);border-radius:7px;padding:10px;margin-top:8px;background:#fff}
.result.backup{border-left-color:var(--warn)}.result.bad{border-left-color:var(--bad)}
.result .big{font-size:14px;font-weight:800;margin:4px 0}
.pill{display:inline-block;background:#edf2f4;border-radius:14px;padding:3px 7px;font-size:9px;font-weight:800}
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:7px}
.metric{background:#f7f9fa;border-radius:5px;padding:6px}.metric b{display:block;font-size:9px}.metric span{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.small{font-size:10px;color:var(--muted);line-height:1.35}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}
.modal.hidden{display:none}
.modal-card{background:#fff;border-radius:10px;padding:18px;width:min(700px,100%);max-height:90vh;overflow:auto}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.settings-grid{display:grid;gap:12px}
.inspector-settings{border:1px solid var(--line);border-radius:8px;padding:10px;background:#fbfcfd}
.inspector-settings h3{margin:0 0 8px;font-size:14px}
.weekday-checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.weekday-checks label{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;border:1px solid var(--line);border-radius:5px;padding:5px 7px;background:#fff}
.weekday-checks input{width:auto}
@media(max-width:760px){
  .calendar{grid-template-columns:repeat(5,180px)}
  .search-grid,.form-grid{grid-template-columns:1fr}
  .result-grid{grid-template-columns:1fr 1fr}
}
