/* DSSPM Dashboard - the only stylesheet. No JavaScript anywhere (CSP). */
:root { --ok: #d9f2dc; --late: #fff0c2; --failed: #f9d0cc; --off: #e4e4e4; --line: #c8c8c8; --ink: #1d1d1d; --muted: #555; --link: #0b4f9c; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, "Segoe UI", sans-serif; color: var(--ink); background: #fff; }
a { color: var(--link); }
a:focus, button:focus, input:focus, select:focus, summary:focus { outline: 3px solid #f0a500; outline-offset: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .25rem .5rem; }
header.site { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: #f6f6f6; }
header.site .brand { font-weight: 700; }
header.site nav { display: flex; gap: 1rem; }
header.site .who { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
main { padding: 1rem; max-width: 110rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.meta, .sub, caption { color: var(--muted); font-size: .85rem; }
.error { color: #8a1c10; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-size: .85rem; }
pre.log { max-height: 30rem; overflow: auto; background: #f6f6f6; padding: .5rem; border: 1px solid var(--line); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; margin: .5rem 0; }
caption { text-align: left; padding-bottom: .25rem; }
th, td { border: 1px solid var(--line); padding: .35rem .5rem; text-align: left; vertical-align: top; }
thead th { background: #f0f0f0; }
tr.group th { background: #fafafa; }
td.cell { padding: 0; min-width: 11rem; }
td.cell a { display: flex; flex-direction: column; padding: .35rem .5rem; color: var(--ink); text-decoration: none; }
td.cell a:hover strong { text-decoration: underline; }
.cell.ok { background: var(--ok); }
.cell.late { background: var(--late); }
.cell.failed { background: var(--failed); }
.cell.off { background: var(--off); }
.cell.no_data, .cell.empty { background: #fff; }
.legend { display: grid; gap: .25rem; }
.legend div { display: flex; gap: .75rem; align-items: center; }
.legend dt { padding: .15rem .5rem; min-width: 6rem; border: 1px solid var(--line); }
.legend dd { margin: 0; }
.status.failed { color: #8a1c10; font-weight: 600; }
.status.running { color: #7a5600; font-weight: 600; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.facts dt { font-size: .85rem; color: var(--muted); }
.facts dd { margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
form.login { display: grid; gap: .4rem; max-width: 20rem; }
input, select, button { font: inherit; padding: .3rem .5rem; }
.pager { display: flex; gap: 1rem; margin-top: .5rem; }
details { margin: .4rem 0; }
summary { cursor: pointer; }