/* portwatch/static/style.css — dark Kokiris-style dashboard */
:root{--bg:#0b1220;--bg2:#08101f;--card:#111a2e;--line:#1e293b;--txt:#e2e8f0;--mut:#94a3b8;
      --red:#ef4136;--redbg:#3a1114;--grn:#22c55e;--grnbg:#0f2a1a;--amb:#f59e0b;--blu:#60a5fa;--vio:#9b59b6}
*{box-sizing:border-box}
body{font:14px/1.45 Inter,system-ui,sans-serif;margin:0;background:var(--bg);color:var(--txt)}
a{color:var(--blu)}
header.top{display:flex;justify-content:space-between;align-items:center;background:var(--bg2);padding:10px 22px;border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.5px}.brand .logo{color:var(--red);margin-right:6px}.brand .sub{font-weight:400;color:var(--mut);margin-left:10px;font-size:12px}
header.top nav a{margin-left:16px;text-decoration:none;color:var(--txt);opacity:.85}header.top nav a:hover{opacity:1}
main{padding:18px 22px;max-width:1300px;margin:auto}
h1,h2{margin:0 0 10px 0;font-weight:600}h2 .count{background:var(--red);color:#fff;border-radius:10px;padding:0 8px;font-size:12px;margin-left:6px}

/* hero / tiles */
.hero{margin-bottom:16px}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.tile .n{font-size:24px;font-weight:700;line-height:1.1}.tile .l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.tile.new .n{color:var(--red)}.tile.closed .n{color:var(--mut)}.tile.bad .n{color:var(--amb)}.tile.todo{border-color:var(--red)}.tile.todo .n{color:var(--red)}
.runinfo{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;color:var(--mut)}
.actions{display:flex;gap:14px;align-items:center}
button{background:#1e293b;color:var(--txt);border:1px solid #334155;border-radius:6px;padding:6px 12px;cursor:pointer;font:inherit}
button:hover{background:#273449}button:disabled{opacity:.5;cursor:default}
#scan-now{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}#scan-now:hover{background:#d8382e}
.filters{display:flex;gap:4px}.flt{padding:4px 10px;font-size:12px}.flt.on{background:var(--vio);border-color:var(--vio);color:#fff}
.st{font-family:ui-monospace,monospace;font-size:11px;padding:1px 6px;border-radius:4px;background:#1e293b}
.st-finished{color:var(--grn)}.st-partial{color:var(--amb)}.st-error{color:var(--red)}.st-running{color:var(--blu);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.5}}
.progress-wrap{margin-top:10px}
.progress-bar{height:8px;background:#1e293b;border-radius:5px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--vio),var(--blu));transition:width .5s ease}
.progress-txt{color:var(--mut);font-size:12px;margin-top:4px}

/* todo box */
.todo-box{background:var(--redbg);border:1px solid var(--red);border-radius:8px;padding:12px 14px;margin-bottom:16px}
.todo-list{list-style:none;margin:0;padding:0}.todo-list li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.todo-list li:last-child{border-bottom:0}.todo-list .why{color:var(--mut);font-size:12px;flex:1}

/* table */
/* no overflow:hidden here: it would clip the absolutely-positioned port tooltips */
table.hosts{border-collapse:collapse;width:100%;background:var(--card);border:1px solid var(--line);border-radius:8px}
table.hosts th{background:var(--bg2);color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:1px;text-align:left;padding:8px 12px}
table.hosts td{border-top:1px solid var(--line);padding:8px 12px;vertical-align:top}
.hostrow.hide{display:none}
tbody.hide-noopen .hostrow.noopen{display:none}
.hostcell{width:320px}.host{font-weight:600}.ip{font-family:ui-monospace,monospace;color:var(--mut);font-size:12px}
.host.up{color:var(--grn)}
.host .icmp{font-family:ui-monospace,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--grn);border:1px solid #166534;background:var(--grnbg);border-radius:3px;padding:0 4px;margin-left:6px;vertical-align:middle}
.ip .ptr{color:#7dd3fc}
.rescan-btn{font-size:11px;line-height:1;padding:1px 6px;margin-left:6px;vertical-align:middle;background:#1e293b;border:1px solid #334155;color:var(--mut);border-radius:4px;cursor:pointer}
.rescan-btn:hover{background:#273449;color:var(--txt)}
.hostrow.rescanning .rescan-btn{animation:spin 1s linear infinite;pointer-events:none;opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
.rescan-live{margin-left:6px;font-size:11px;color:var(--blu)}
.ports{line-height:2.1}.none{color:var(--mut);font-style:italic}
.warn{color:var(--amb)}.err{color:var(--red)}

/* port badges */
.port{position:relative;display:inline-block;font-family:ui-monospace,monospace;font-size:12.5px;background:#1e293b;border:1px solid #2b3a52;padding:1px 8px;border-radius:4px;margin:0 4px 2px 0;cursor:default}
.port.new{background:var(--redbg);border-color:var(--red);color:#fecaca;font-weight:600}
.port.new .lbl::before{content:"● ";color:var(--red)}
.port.closed{text-decoration:line-through;color:var(--mut);border-style:dashed;opacity:.8}
.port.ack-expected{background:var(--grnbg);border-color:#166534;color:#bbf7d0;font-weight:400}
.port.ack-expected .lbl::before{content:"✓ ";color:var(--grn)}
.port.ack-expected.new .lbl::before{content:"✓ "}
.port.flag,.port.ack-unexpected{background:var(--redbg);border-color:var(--amb);color:#fde68a;font-weight:600}
.port.flag .lbl::before,.port.ack-unexpected .lbl::before{content:"⚠ ";color:var(--amb)}
.port.hide{display:none}

/* tooltip (pure CSS). It sits flush against the badge (top:100%, no gap) and stays open while
   either the badge OR the tip itself is hovered; a transparent ::before bridges the 1-2px seam
   so moving the cursor down into the popup to click normal/anormal never loses the hover. */
.tip{display:none;position:absolute;left:0;top:100%;z-index:20;min-width:300px;max-width:420px;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.6);font-family:Inter,system-ui,sans-serif;font-size:12.5px;color:var(--txt);text-decoration:none;font-weight:400;line-height:1.5;cursor:auto;white-space:normal}
.tip::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.port:hover .tip,.tip:hover{display:block}
.tip-h{margin-bottom:4px}.tag{font-style:normal;font-size:11px;padding:0 6px;border-radius:4px;margin-left:4px;background:#1e293b}
.svc{font-family:ui-monospace,monospace;font-size:12px;color:#c7d2fe;margin:4px 0}
.tls{margin:6px 0 2px 0;padding:6px 8px;background:#0b1220;border:1px solid #1e293b;border-radius:6px}
.tls-h{color:#bbf7d0;font-size:12px;margin-bottom:2px}.tls-l{color:var(--mut);font-size:11.5px;word-break:break-word}
.port.detailed .lbl{text-decoration:underline dotted #475569;text-underline-offset:2px}
.tag.new{background:var(--red);color:#fff}.tag.closed{color:var(--mut)}.tag.stable{color:var(--mut)}.tag.ack-expected{background:#166534;color:#bbf7d0}.tag.ack-unexpected{background:var(--amb);color:#000}
.since{color:var(--mut)}.note{color:#fde68a;margin:2px 0}
.hist{margin:6px 0 2px 0;letter-spacing:2px}.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:3px;vertical-align:middle}
.dot.on{background:var(--grn)}.dot.off{background:transparent;border:1.5px solid #475569}
.hist-l{color:var(--mut);font-size:11px}
.ackbtns{margin-top:8px;display:flex;gap:6px}.ackbtns button{font-size:12px;padding:3px 8px}
.ackbtns button[data-status=expected]{border-color:#166534}.ackbtns button[data-status=unexpected]{border-color:var(--amb)}

/* settings + targets forms */
.flash{padding:8px 12px;border-radius:6px;margin:8px 0;font-size:13px}
.flash.ok{background:var(--grnbg);border:1px solid #166534;color:#bbf7d0}
.flash.err{background:var(--redbg);border:1px solid var(--red);color:#fecaca}
.cfg-form{max-width:720px}
.cfg-form fieldset{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:12px 16px;margin:0 0 16px 0}
.cfg-form legend{color:var(--mut);text-transform:uppercase;font-size:11px;letter-spacing:1px;padding:0 6px}
.cfg-form label{display:block;margin:10px 0;font-size:13px}
.cfg-form .hint{color:var(--mut);font-size:11.5px;font-weight:400}
.cfg-form input,.cfg-form select{display:block;margin-top:4px;width:100%;max-width:360px;padding:7px 9px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:var(--txt);font:inherit}
.cfg-form button,.targets-area+.runinfo button{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.targets-area{width:100%;background:#0f172a;border:1px solid #334155;border-radius:8px;color:var(--txt);font-family:ui-monospace,monospace;font-size:12.5px;padding:12px;line-height:1.6;resize:vertical}
code{font-family:ui-monospace,monospace;background:#1e293b;padding:0 4px;border-radius:3px}

/* history page */
.runs{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.runs li{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 10px}
.runs a{text-decoration:none;font-weight:600}.runs a.cur{color:var(--red)}.runs .date{color:var(--mut);margin:0 8px;font-size:12px}

/* login */
.login{max-width:340px;margin:60px auto}.login form{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px}
.login input{display:block;width:100%;margin:8px 0;padding:8px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:var(--txt)}
.login button{width:100%;margin-top:8px;background:var(--red);border-color:var(--red);color:#fff}

@media (max-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}.hostcell{width:auto}}