/* sipsec console - light/dark, mobile first. 2026-10-13.
   Individual blocks are RED, ranges are PINK, as badges and left borders rather than
   large fills, so both stay readable in either theme. */
:root {
  --bg:#f6f7f9; --card:#fff; --ink:#15181d; --muted:#5b6472; --line:#dde1e7;
  --ip:#b3261e; --ip-bg:#fdecea; --ip-ink:#8c1d18;
  --net:#c2185b; --net-bg:#fde8f1; --net-ink:#9c0f4a;
  --ok:#1b6b3a; --ok-bg:#e8f5ec; --warn:#8a5b00; --warn-bg:#fdf3e0;
  --accent:#1a56b8; --focus:#1a56b8;
}
body[data-theme="dark"], body:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {}
}
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --bg:#13161b; --card:#1b1f26; --ink:#e7eaef; --muted:#9aa4b2; --line:#2b313a;
    --ip:#ff8a80; --ip-bg:#3a1f1d; --ip-ink:#ffb4ab;
    --net:#ff8ab8; --net-bg:#3a1f2d; --net-ink:#ffb1cf;
    --ok:#7bd99f; --ok-bg:#16301f; --warn:#f0c070; --warn-bg:#33280f;
    --accent:#8ab4ff; --focus:#8ab4ff;
  }
}
body[data-theme="dark"] {
  --bg:#13161b; --card:#1b1f26; --ink:#e7eaef; --muted:#9aa4b2; --line:#2b313a;
  --ip:#ff8a80; --ip-bg:#3a1f1d; --ip-ink:#ffb4ab;
  --net:#ff8ab8; --net-bg:#3a1f2d; --net-ink:#ffb1cf;
  --ok:#7bd99f; --ok-bg:#16301f; --warn:#f0c070; --warn-bg:#33280f;
  --accent:#8ab4ff; --focus:#8ab4ff;
}

* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
header { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5 }
.brand { font-weight:700; letter-spacing:.02em; text-decoration:none; color:var(--ink) }
header nav { display:flex; align-items:center; gap:.75rem; margin-left:auto; flex-wrap:wrap }
header nav a { color:var(--accent); text-decoration:none }
header nav .who { color:var(--muted); font-size:.85rem }
#themer { background:none; border:1px solid var(--line); color:var(--ink); border-radius:999px;
  width:2rem; height:2rem; cursor:pointer; font-size:1rem; line-height:1 }
main { padding:1rem; max-width:1100px; margin:0 auto }
footer { padding:1.5rem 1rem; color:var(--muted); font-size:.8rem; text-align:center }

h1 { font-size:1.3rem; margin:.2rem 0 1rem }
h2 { font-size:1.05rem; margin:1.5rem 0 .6rem }
a { color:var(--accent) }

/* summary tiles */
.tiles { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); margin-bottom:1rem }
.tile { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.7rem .8rem }
.tile b { display:block; font-size:1.5rem; line-height:1.2 }
.tile span { color:var(--muted); font-size:.8rem }
.tile.ip b { color:var(--ip) } .tile.net b { color:var(--net) }

/* badges */
.badge { display:inline-block; padding:.12rem .5rem; border-radius:999px; font-size:.78rem;
  font-weight:600; white-space:nowrap }
.badge.ip  { background:var(--ip-bg);  color:var(--ip-ink);  border:1px solid var(--ip) }
.badge.net { background:var(--net-bg); color:var(--net-ink); border:1px solid var(--net) }
.badge.ok  { background:var(--ok-bg);  color:var(--ok) }
.badge.warn{ background:var(--warn-bg);color:var(--warn) }

/* list: table on wide screens, cards on narrow */
.rows { display:flex; flex-direction:column; gap:.5rem }
.row { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--ip);
  border-radius:10px; padding:.7rem .8rem; display:grid; gap:.35rem }
.row.net { border-left-color:var(--net) }
.row .cidr { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1rem; font-weight:600 }
.row .meta { color:var(--muted); font-size:.85rem }
.row .acts { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.2rem }
@media (min-width:760px) {
  .row { grid-template-columns: 13rem 1fr 10rem auto; align-items:center; gap:.75rem }
  .row .acts { margin-top:0; justify-content:flex-end }
}

/* forms and buttons */
form.inline { display:inline }
button, .btn { font:inherit; padding:.4rem .8rem; border-radius:8px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block }
button:hover, .btn:hover { border-color:var(--accent) }
button.danger { border-color:var(--ip); color:var(--ip) }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff }
input[type=text], input[type=email], input[type=password], input[type=search], select {
  font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--ink); width:100% }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px }
label { display:block; margin:.6rem 0 .2rem; color:var(--muted); font-size:.85rem }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; max-width:26rem }
.card.wide { max-width:none }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem }
.filters input[type=search] { max-width:18rem }
.filters select { max-width:11rem }

.msg-good { background:var(--ok-bg); color:var(--ok); padding:.6rem .8rem; border-radius:8px; margin:.5rem 0 }
.msg-bad  { background:var(--ip-bg); color:var(--ip-ink); padding:.6rem .8rem; border-radius:8px; margin:.5rem 0 }
.msg-warn { background:var(--warn-bg); color:var(--warn); padding:.6rem .8rem; border-radius:8px; margin:.5rem 0 }
table { width:100%; border-collapse:collapse; font-size:.9rem }
th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); vertical-align:top }
th { color:var(--muted); font-weight:600 }
code, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
.pager { display:flex; gap:.5rem; margin-top:1rem; align-items:center }

/* reveal / hide control on password fields */
.pw-wrap { position:relative; display:block }
.pw-wrap input { padding-right:4.2rem }
.pw-toggle { position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  padding:.2rem .5rem; font-size:.8rem; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); color:var(--muted); cursor:pointer; line-height:1.4 }
.pw-toggle:hover { color:var(--ink); border-color:var(--accent) }
.forgot { margin-top:.4rem; font-size:.9rem }

/* clickable summary tiles */
a.tile { text-decoration:none; color:inherit; display:block }
a.tile:hover { border-color:var(--net); }
a.tile:focus-visible { outline:2px solid var(--focus); outline-offset:2px }
a.tile span { text-decoration:underline; text-underline-offset:2px }