/* SPDiag. Layout: dense support tool, thin header, one content column, tables first, log viewer full width.
   Shared by all pages; reuse these classes instead of adding page-specific CSS. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --bg:#f4f6f8; --surface:#ffffff; --fg:#1a2230; --muted:#5b6676; --line:#dbe0e7; --accent:#1d5c99; --accent-fg:#ffffff; --hover:#eef3f9;
  --ok:#17703f; --ok-bg:#e2f2e8; --err:#b3261e; --err-bg:#fbe9e7; --warn:#8f5600; --warn-bg:#fcf1d8; --neu:#56606e; --neu-bg:#e9edf1;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#10141a; --surface:#171c24; --fg:#e3e7ed; --muted:#9aa4b1; --line:#2a313c; --accent:#72aee9; --accent-fg:#0c1118; --hover:#1e2631;
  --ok:#62c98f; --ok-bg:#15301f; --err:#ff8f80; --err-bg:#3a1916; --warn:#f2b552; --warn-bg:#352711; --neu:#aab3bf; --neu-bg:#232a35;
  color-scheme:dark } }
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 var(--sans)}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num,.mono{font-variant-numeric:tabular-nums}
.mono,code{font-family:var(--mono);font-size:.92em}
h1{font-size:1.35rem;font-weight:600;margin:0;text-wrap:balance}
h2{font-size:1rem;font-weight:600;margin:0}
.label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500}
.muted{color:var(--muted)}

header.top{background:var(--surface);border-bottom:1px solid var(--line)}
.topin{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-block:10px}
.brand{font-weight:600;font-size:1.05rem;color:var(--fg);text-decoration:none;letter-spacing:.01em}
.brand span{color:var(--muted);font-weight:400}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--muted);padding:5px 10px;border-radius:6px}
nav.main a[aria-current="page"]{color:var(--fg);background:var(--hover);font-weight:500}
.who{margin:0 0 0 auto;color:var(--muted);font-size:.9rem}
.linkbtn{font:inherit;background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer}

main{padding-block:20px 48px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spread{justify-content:space-between}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.pad{padding:14px 16px}
.flash{border-radius:6px;padding:8px 12px;margin-bottom:12px;background:var(--ok-bg);color:var(--ok)}
.flash.error{background:var(--err-bg);color:var(--err)}

input,select,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:6px 8px;min-width:0}
.btn{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:6px;padding:6px 12px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.danger{color:var(--err);border-color:var(--err)}
.btn.danger.solid{background:var(--err);color:var(--surface)}
.btn.small{padding:3px 8px;font-size:.85rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px;align-items:end}
.filters label{display:flex;flex-direction:column;gap:3px}
.filters .actions{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:721px){.filters .actions{grid-column:span 2}}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-weight:500;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--hover)}
td.num,th.num{text-align:right}
a.rowlink{color:inherit;text-decoration:none}
.sub{display:block;font-size:.85rem;color:var(--err)}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.8rem;font-weight:500;white-space:nowrap;background:var(--neu-bg);color:var(--neu)}
.pill.COMPLETED,.pill.on{background:var(--ok-bg);color:var(--ok)}
.pill.FAILED{background:var(--err-bg);color:var(--err)}
.pill.CANCELLED,.pill.off{background:var(--neu-bg);color:var(--neu)}
.bulk{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-top:1px solid var(--line)}
.confirm{background:var(--err-bg);color:var(--err);border-radius:6px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pager{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pager [aria-current="page"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}

.bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--neu-bg);min-width:120px}
.bar i{display:block}
.bar .c{background:var(--ok)} .bar .f{background:var(--err)} .bar .x{background:var(--neu)}
a.count{text-decoration:none;font-weight:500}
a.count.zero{color:var(--muted);font-weight:400}

.headline{display:flex;flex-direction:column;gap:6px}
.headline .result{font-size:1.15rem;font-weight:600;color:var(--neu)}
.headline .result.FAILED{color:var(--err)} .headline .result.COMPLETED{color:var(--ok)}
.leftover{background:var(--warn-bg);color:var(--warn);border-radius:6px;padding:8px 12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.grid2>*{min-width:0}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:10px 0 0}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
ul.steps{list-style:none;margin:0;padding:0}
ul.steps li.bad{color:var(--err);font-weight:500}
ul.steps li.bad::before{content:"✗ "}
.copy{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
pre.json{font-family:var(--mono);font-size:12.5px;margin:10px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}

.logbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.jumps{display:flex;flex-wrap:wrap;gap:6px}
.jump{font-size:.82rem;border-radius:999px;padding:1px 9px;text-decoration:none}
.jump.ERROR{background:var(--err-bg);color:var(--err)}
.jump.WARN{background:var(--warn-bg);color:var(--warn)}
.log{font-family:var(--mono);font-size:12.5px;line-height:1.55;overflow-x:auto;border-top:1px solid var(--line)}
.log .l{display:flex;white-space:pre;padding:0 12px}
.log .n{color:var(--muted);width:3.6em;flex:none;text-align:right;padding-right:1em;user-select:none}
.log .l.ERROR{background:var(--err-bg);color:var(--err)}
.log .l.WARN{background:var(--warn-bg);color:var(--warn)}
.log .l.RESULT,.log .l.SUCCESS{font-weight:500}
.log .l:target{outline:2px solid var(--accent);outline-offset:-2px}
/* "Nur Fehler und Warnungen": checkbox #only-err anywhere in the same .logpanel */
.logpanel:has(#only-err:checked) .log .l:not(.ERROR):not(.WARN){display:none}

.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.formgrid label{display:flex;flex-direction:column;gap:3px}
.tok{font-family:var(--mono);font-size:.88rem;overflow-wrap:anywhere}
.subnav{display:flex;gap:6px;flex-wrap:wrap}
.subnav a{text-decoration:none;padding:4px 10px;border-radius:6px;color:var(--muted);border:1px solid var(--line)}
.subnav a[aria-current="page"]{color:var(--fg);background:var(--surface);font-weight:500}

.login{max-width:360px;margin:40px auto 0}
.login form{display:flex;flex-direction:column;gap:12px}
.login label{display:flex;flex-direction:column;gap:3px}

@media (max-width:720px){
  table.rt thead{display:none}
  table.rt, table.rt tbody, table.rt tr, table.rt td{display:block}
  table.rt tr{border-bottom:1px solid var(--line);padding:8px 0}
  table.rt td{border:0;padding:2px 10px;display:flex;gap:10px}
  table.rt td::before{content:attr(data-l);color:var(--muted);min-width:7.5em;flex:none}
  table.rt td.cb::before{content:none}
  table.rt td.num{text-align:left}
}