/* nirusdev dashboard — mobile-first, CSS-var theming */
:root{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#f0f2f6; --text:#1c2330; --muted:#67728a;
  --border:#e2e7ef; --accent:#3b82f6; --accent-ink:#fff;
  --ok:#16a34a; --down:#dc2626; --warn:#d97706;
  --pub:#16a34a; --prv:#64748b;
  --shadow:0 1px 3px rgba(20,30,50,.08),0 1px 2px rgba(20,30,50,.06);
  --radius:12px;
}
@media (prefers-color-scheme:dark){:root[data-theme="auto"]{
  --bg:#0e1117; --panel:#171b22; --panel2:#1d222b; --text:#e6e9ef; --muted:#8b94a7;
  --border:#262c37; --accent:#60a5fa; --accent-ink:#0e1117;
  --shadow:0 1px 3px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{
  --bg:#0e1117; --panel:#171b22; --panel2:#1d222b; --text:#e6e9ef; --muted:#8b94a7;
  --border:#262c37; --accent:#60a5fa; --accent-ink:#0e1117;
  --shadow:0 1px 3px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--accent);text-decoration:none}
h1{font-size:1.5rem;margin:.2em 0 .6em}
h2{font-size:1.15rem;margin:1.4em 0 .4em}
h3{font-size:.95rem;margin:1em 0 .5em}
h3.cat{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;margin:.9em 0 .4em}
.muted{color:var(--muted)} .small{font-size:.82em} .right{text-align:right} .nowrap{white-space:nowrap}
code{background:var(--panel2);padding:.05em .35em;border-radius:5px;font-size:.85em}

/* topbar */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.55rem .9rem;background:var(--panel);border-bottom:1px solid var(--border)}
.brand{font-weight:700;color:var(--text);display:flex;align-items:center;gap:.4rem}
.brand .logo{color:var(--accent)}
.nav{display:flex;gap:.2rem;flex-wrap:wrap}
.nav a{color:var(--muted);padding:.3rem .55rem;border-radius:8px}
.nav a:hover{background:var(--panel2);color:var(--text)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.who{color:var(--muted);font-size:.85rem}

.container{max-width:1000px;margin:0 auto;padding:1rem .9rem 3rem}
section{margin-bottom:.5rem}

/* buttons */
.btn{display:inline-block;background:var(--panel2);color:var(--text);border:1px solid var(--border);
  border-radius:8px;padding:.4rem .7rem;font-size:.85rem;cursor:pointer;line-height:1}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-sm{padding:.3rem .55rem;font-size:.8rem}
.btn-xs{padding:.22rem .5rem;font-size:.74rem}
.btn-danger{color:var(--down)} .btn-danger:hover{border-color:var(--down)}
.iconbtn{background:none;border:1px solid var(--border);border-radius:8px;width:34px;height:34px;
  cursor:pointer;color:var(--text);font-size:1rem;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.iconbtn.stale{color:var(--warn);border-color:var(--warn)}

/* cards & grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.8rem}
.card.pad{padding:1rem} .card.dim{opacity:.85}
.svc{display:flex;flex-direction:column;gap:.15rem}
.svc-top{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.svc .status{font-size:.7rem;color:var(--muted)}
.svc .status.up{color:var(--ok)} .svc .status.down{color:var(--down)}
.svc .status.localonly{color:var(--warn)}
.svc-dns.dns-localonly{color:var(--warn);border-color:var(--warn)}
.svc-dns{font-size:.6rem;font-weight:700;letter-spacing:.04em;padding:.04rem .3rem;border-radius:5px;
  border:1px solid var(--border);color:var(--muted);line-height:1.3}
.svc-dns:empty{display:none}
.svc-dns.dns-local{color:var(--ok);border-color:var(--ok)}
.svc-dns.dns-public{color:var(--warn);border-color:var(--warn)}
.svc-name{font-weight:600} .svc-url{color:var(--muted);font-size:.78rem;word-break:break-all}
.proj{display:flex;flex-direction:column;gap:.4rem}
.proj-name{font-weight:600;color:var(--text);word-break:break-word}
.proj-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.subprojects{display:flex;gap:.3rem;flex-wrap:wrap}

.pill{font-size:.7rem;padding:.12rem .45rem;border-radius:999px;border:1px solid var(--border);color:#fff}
.pill-pub{background:var(--pub);border-color:var(--pub)}
.pill-prv{background:transparent;color:var(--prv);border-color:var(--prv)}
.pill-sub{background:var(--panel2);color:var(--text)}
.pill-legacy{background:var(--down);border-color:var(--down);color:#fff}

/* project cards (admin Projects list) */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.7rem}
.proj-card{display:flex;flex-direction:column;gap:.5rem}
/* red outline for any project card running legacy (mysql_*) code */
.card.proj-old{border-color:var(--down);box-shadow:0 0 0 1px var(--down)}
.proj-card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.proj-card-head .proj-name{font-weight:600;word-break:break-word}
.proj-kv{width:100%;border-collapse:collapse}
.proj-kv td{padding:.18rem 0;border:0;vertical-align:top;font-size:.82rem}
.proj-kv td.k{color:var(--muted);width:32%;white-space:nowrap}
.proj-kv .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.dbdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.35rem;vertical-align:middle}
.dbdot.ok{background:var(--ok)}
.proj-actions{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:auto;padding-top:.2rem}

/* network badge */
.netbadge{display:flex;align-items:center;gap:.7rem;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:.7rem .9rem;box-shadow:var(--shadow)}
.netbadge.inline{margin-bottom:.6rem}
.netbadge .dot{width:11px;height:11px;border-radius:50%;flex:none}
.netbadge.is-local .dot{background:var(--ok);box-shadow:0 0 0 4px rgba(22,163,74,.15)}
.netbadge.is-remote .dot{background:var(--warn);box-shadow:0 0 0 4px rgba(217,119,6,.15)}
.netbadge small{display:block;color:var(--muted)}

/* expandable network badge (<details>) */
.netbadge-x{display:block;padding:0}
.netbadge-x summary{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;cursor:pointer;list-style:none}
.netbadge-x summary::-webkit-details-marker{display:none}
.netbadge-x summary::marker{content:""}
.netbadge-x summary:hover .netbadge-caret{color:var(--text)}
.netbadge-caret{margin-left:auto;color:var(--muted);transition:transform .15s;font-size:.8rem}
.netbadge-x[open] .netbadge-caret{transform:rotate(180deg)}
.netbadge-debug{padding:.2rem .9rem .8rem;border-top:1px solid var(--border)}
.netbadge-debug h4{margin:.8rem 0 .15rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.netbadge-debug .kv td{font-size:.8rem;word-break:break-all}
.netbadge-debug .kv td.k{width:38%;white-space:nowrap;color:var(--muted)}

/* forms / tables */
label{display:flex;flex-direction:column;gap:.2rem;font-size:.82rem;color:var(--muted)}
label.chk{flex-direction:row;align-items:center;gap:.35rem}
input,select{font:inherit;padding:.45rem .55rem;background:var(--bg);color:var(--text);
  border:1px solid var(--border);border-radius:8px}
.row{display:flex;gap:.6rem;align-items:flex-end}
.row.wrap{flex-wrap:wrap}
.inline-form{display:inline}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border);padding:.4rem .5rem}
.tbl td{border-bottom:1px solid var(--border);padding:.4rem .5rem;vertical-align:middle}
.contents{display:contents}
.alert{background:rgba(220,38,38,.12);color:var(--down);border:1px solid var(--down);
  border-radius:8px;padding:.5rem .7rem;margin-bottom:.6rem;font-size:.85rem}

/* flash messages */
.flash{border-radius:8px;padding:.55rem .75rem;margin-bottom:.6rem;font-size:.86rem;border:1px solid var(--border)}
.flash-ok{background:rgba(22,163,74,.12);color:var(--ok);border-color:var(--ok)}
.flash-error{background:rgba(220,38,38,.12);color:var(--down);border-color:var(--down)}
.flash-secret{background:rgba(217,119,6,.12);color:var(--warn);border-color:var(--warn);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}

/* key/value detail table */
.kv{width:100%;border-collapse:collapse;font-size:.88rem}
.kv td{border-bottom:1px solid var(--border);padding:.4rem .5rem;vertical-align:top}
.kv td.k{color:var(--muted);width:34%}
.stack{display:flex;flex-direction:column;gap:.5rem}
textarea{font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;padding:.5rem;width:100%;
  background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;resize:vertical}

/* login */
.login-wrap{max-width:380px;margin:6vh auto 0;display:flex;flex-direction:column;gap:1rem}
.login-card{display:flex;flex-direction:column;gap:.7rem}
.login-card label{color:var(--text)}
.login-card .btn{margin-top:.3rem}

.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:1.4rem;border-top:1px solid var(--border)}

@media (max-width:560px){
  .nav{order:3;width:100%} .container{padding:.8rem .7rem 3rem}
  .row{flex-wrap:wrap} .row label{flex:1 1 45%}
}