/* Bootstrap 4 colors, declared explicitly for consistent status rendering. */
body{background:#f8f9fa;color:#212529;font-family:Arial,Helvetica,sans-serif}
.monitor-container{max-width:1320px;margin:0 auto}
.page-title{font-weight:600;letter-spacing:-.025em}
.overline{letter-spacing:.11em;opacity:.82}
.muted-on-blue{opacity:.9}
.card{background:#fff;border:1px solid #dee2e6;border-radius:5px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.metric{border-left:4px solid #007bff}.metric-success{border-left-color:#28a745}
.metric-danger{border-left-color:#dc3545}.metric-secondary{border-left-color:#6c757d}
.metric-value{font-size:1.85rem;font-weight:700;line-height:1.2;margin-top:4px}
.table td,.table th{vertical-align:middle}.site-link{font-weight:600;overflow-wrap:anywhere}
.site-url{font-size:.83rem;color:#6c757d;overflow-wrap:anywhere}
.site-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.site-actions a{font-size:12px}
.small-note{color:#6c757d;font-size:.85rem}
.monitor-summary{gap:8px 23px}
.status-label{display:inline-block;min-width:95px;padding:6px 10px;font-size:12px;font-weight:700;text-align:center;border-radius:4px;box-sizing:border-box}
.badge.status-label.badge-success{background-color:#28a745!important;color:white!important}
.badge.status-label.badge-danger{background-color:#dc3545!important;color:white!important}
.badge.status-label.badge-secondary{background-color:#6c757d!important;color:white!important}
.badge.status-label.badge-info{background-color:#17a2b8!important;color:white!important}
.badge.status-label.badge-warning{background-color:#ffc107!important;color:#212529!important}
.connection-label{color:#6c757d}.connection-label.offline{color:#dc3545;font-weight:700}
.history-popup{position:fixed;z-index:1200;width:530px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);overflow-y:auto;padding:14px;background:#fff;border:1px solid #ced4da;border-radius:5px;box-shadow:0 8px 25px rgba(0,0,0,.25)}
.history-popup[hidden]{display:none!important}
.history-title{font-weight:700;margin-bottom:3px}.history-note{font-size:12px;color:#6c757d;margin-bottom:8px}
.history-legend{display:flex;gap:16px;font-size:12px;margin:9px 0}
.history-key{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.history-scroll{overflow-x:auto;overflow-y:hidden;background:#f8f9fa;border:1px solid #e9ecef;padding:6px 2px 0}
.history-bars{display:flex;align-items:flex-end;gap:2px;width:max-content;min-width:100%;height:124px;border-bottom:1px solid #adb5bd}
.history-bar{flex:0 0 7px;min-height:4px;border-radius:2px 2px 0 0;cursor:help}.history-bar:hover{outline:2px solid #212529}
.history-up{background:#28a745}.history-down{background:#dc3545}.history-unknown{background:#6c757d}
.history-axis{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#6c757d;margin-top:6px}
/* Small fallback for the primary layout if Bootstrap CSS has not been copied. */
.bg-primary{background:#007bff!important}.text-white{color:#fff!important}.text-success{color:#28a745!important}.text-danger{color:#dc3545!important}.text-muted{color:#6c757d!important}

.history-averages{background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;padding:8px;margin:8px 0;font-size:12px}
.history-averages-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}
.history-yearly{border-top:1px solid #dee2e6;margin-top:7px;padding-top:7px;max-height:135px;overflow-y:auto}
.history-yearly-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0}

/* Section headings for configuration-defined website groups. */
.website-group-row th{background:#e9ecef;color:#343a40;font-weight:700;padding:11px 14px;border-top:2px solid #ced4da!important;border-bottom:1px solid #ced4da;letter-spacing:.015em}
.website-group-name{font-size:14px}
.website-group-count{display:inline-block;margin-left:12px;padding:2px 7px;border-radius:10px;background:#dee2e6;color:#495057;font-size:11px;font-weight:600;letter-spacing:0}