/* KNMS additions on top of the CMMS style.css */
.banner.warn { background: var(--warn-soft); color: var(--warn); }
a.banner { text-decoration: none; }
.ver { padding: 12px 8px 0; }
.crumbs { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
.h1sub { font-size: 16px; font-weight: 500; }
.nowrap { white-space: nowrap; }
.btn.small { font-size: 12px; padding: 2px 10px; margin-left: 10px; vertical-align: middle; font-weight: 500; }
form.inline { display: inline; margin: 0; }
form.inline select { width: auto; padding: 2px 6px; font-size: 12px; }
label.radio { display: block; margin: 2px 0; }
tr.dim td { opacity: .6; }
.tag.bad { background: var(--bad-soft); color: var(--bad); }

/* status dots */
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; flex-shrink: 0; }
h1 .sdot { width: 14px; height: 14px; vertical-align: 1px; }
.sdot.up { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.sdot.down { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.sdot.warn { background: #d99a00; box-shadow: 0 0 0 3px var(--warn-soft); }
.sdot.off { background: var(--border); }

/* overview */
.ovgrid { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(360px, 1.2fr); gap: 18px; align-items: start; max-width: 1500px; }
@media (max-width: 1100px) { .ovgrid { grid-template-columns: 1fr; } }
.ovside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.card h2 { margin: 0 0 10px; }
.cardhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.cardhead h2 { margin: 0; flex: 1; }
.cardhead input[type=search] { width: 200px; padding: 5px 9px; }
.tree details.site { border-bottom: 1px solid var(--border); }
.tree details.site:last-child { border-bottom: 0; }
.tree summary { cursor: pointer; padding: 6px 4px; list-style: none; display: flex; align-items: center; gap: 4px; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before { content: "+"; width: 14px; color: var(--muted); font-weight: 700; }
.tree details[open] summary::before { content: "\2212"; }
.tree summary:hover { background: var(--accent-soft); border-radius: 6px; }
.tree summary .muted { margin-left: auto; }
.tree ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 34px; }
.tree li { padding: 3px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tree li .mono { font-size: 12px; }
.events td { vertical-align: top; }
.events tr.sev4 td:last-child { color: var(--warn); }
.events tr.sev5 td:last-child { color: var(--bad); font-weight: 600; }

/* utilization bars */
.utilcell { white-space: nowrap; font-size: 12px; color: var(--text-2); width: 110px; }
.util { display: inline-block; width: 60px; height: 8px; background: var(--surface-2); border: 1px solid var(--border);
        border-radius: 4px; margin-right: 6px; vertical-align: 0; overflow: hidden; }
.util i { display: block; height: 100%; background: var(--accent); min-width: 1px; }
.pingstats { min-width: 260px; }
.gstats { min-width: 340px; }
.rangebtn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
label.radio input, .kv input[type=checkbox], .kv input[type=radio] { width: auto; margin-right: 6px; vertical-align: -1px; }
.card table.grid { width: 100%; }
.card { min-width: 0; overflow-x: auto; }
.events td:last-child { word-break: break-word; }
.sdot.site-warn { background: #d99a00; box-shadow: 0 0 0 3px var(--warn-soft); }
form .cols { margin-top: 6px; }
.events td:last-child, .card .list td:nth-child(2) { white-space: normal; }
.events td:first-child { width: 1%; }
.graphbar { display: flex; align-items: center; gap: 4px; margin: 18px 0 0; position: sticky; top: 49px; z-index: 4;
            background: var(--bg); padding: 6px 0; }
.graphbar .rangebox { margin-left: 8px; }
.uplinkpick select { font-size: 12px; font-weight: 400; margin-left: 10px; max-width: 320px; }
.uplinkrow { align-items: flex-start; }
.uplinkrow .chart { margin-top: 0; }
.porttools { margin: 6px 0 8px; }
.porttools input[type=search] { width: 240px; padding: 5px 9px; }
.bulkbar { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.bulkbtns { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 12.5px; }
.bulkbtns .btn { padding: 3px 12px; }
th.cb, td.cb { width: 28px; text-align: center; padding-left: 8px; padding-right: 0; }
td.cb input, th.cb input { width: auto; margin: 0; cursor: pointer; }
.grid tr.sel td { background: var(--accent-soft); }
select.mon-on { border-color: var(--ok); }
.countpick { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.countpick select, .cardhead select { width: auto; padding: 3px 6px; font-size: 12.5px; }
.cardhead input#evq { width: 150px; padding: 4px 8px; }
.allclear { margin: 0; padding: 4px 2px; color: var(--ok); }
/* outage banner on the overview */
.downbar { background: var(--bad-soft); border: 1px solid var(--bad); border-radius: var(--radius); padding: 10px 16px;
           margin: 0 0 16px; max-width: 1500px; }
.downhead { display: flex; align-items: center; gap: 4px; color: var(--bad); font-size: 15px; }
.downhead .muted { margin-left: 8px; }
.downbar ul { list-style: none; margin: 6px 0 0; padding: 0; }
.downbar li { padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); display: flex;
              flex-wrap: wrap; gap: 6px; align-items: baseline; }
.downbar li:first-child { border-top: 0; }
.downbar li > b { color: var(--bad); min-width: 82px; }
.downfor { margin-left: auto; color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
@keyframes flash { from { background: var(--bad-soft); } to { background: transparent; } }
.tree details.flash > summary { animation: flash 1.6s ease-out; border-radius: 6px; }
.treesep { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
           padding: 10px 4px 4px; border-bottom: 1px solid var(--border); }
.treesep.down { color: var(--bad); padding-top: 2px; }