/* Alleen indeling en statuskleuren; lettertype en site-opmaak worden geërfd. */
.server-monitor { font: inherit; color: inherit; line-height: 1.5; }
.server-monitor [hidden] { display: none !important; }
.server-monitor .mon-counts, .server-monitor .mon-filters { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-block: 1rem; }
.server-monitor .mon-filters { align-items: end; }
.server-monitor .mon-filters label { display: grid; gap: .25rem; }
.server-monitor input, .server-monitor select, .server-monitor button { font: inherit; max-width: 100%; padding: .35rem .5rem; }
.server-monitor summary { cursor: pointer; padding: .65rem 0; }
.server-monitor summary:focus-visible, .server-monitor input:focus-visible, .server-monitor select:focus-visible, .server-monitor button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.server-monitor .mon-server { border-bottom: 1px solid #8885; }
.server-monitor .mon-server summary > span, .server-monitor .mon-server summary > strong { display: inline-block; margin-right: .8rem; vertical-align: top; }
.server-monitor .mon-status { font-weight: 600; }
.server-monitor .mon-server .mon-status { min-width: 7rem; }
.server-monitor .mon-status--online { color: #218344; }
.server-monitor .mon-status--offline { color: #d13b3b; }
.server-monitor .mon-status--unchecked { color: inherit; }
.server-monitor .mon-status--unknown { color: #a16b00; }
.server-monitor .mon-meta, .server-monitor .mon-lastseen { font-size: .9em; }
.server-monitor .mon-name, .server-monitor dd { overflow-wrap: anywhere; }
.server-monitor .mon-detail { padding: .25rem 1rem 1rem; }
.server-monitor dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .8rem 1.5rem; margin: .5rem 0; }
.server-monitor dt { font-size: .85em; }
.server-monitor dd { margin: 0; }
.server-monitor .mon-group { margin-block: 1.25rem; }
.server-monitor .mon-group h4 { margin-block: .6rem; }
.server-monitor .mon-customers { margin-top: 2rem; border-top: 1px solid #8885; }
.server-monitor footer { margin-top: 1.5rem; }
.server-monitor .mon-history { width: min(35rem, 85vw); max-height: 80vh; overflow: auto; font: inherit; }
.server-monitor .mon-history::backdrop { background: rgb(0 0 0 / 35%); }
.server-monitor .mon-history form { float: right; }
.server-monitor .mon-history h3 { overflow-wrap: anywhere; }
.server-monitor .mon-history table { width: 100%; text-align: left; font-variant-numeric: tabular-nums; }
.server-monitor .mon-history th, .server-monitor .mon-history td { padding: .25rem; }
@media (max-width: 600px) {
    .server-monitor .mon-server summary .mon-meta,
    .server-monitor .mon-server summary .mon-lastseen { display: block; margin-left: 1.1rem; }
    .server-monitor .mon-filters label { width: 100%; }
}