/* MyRemoting shared theme — single source of truth for the control site.
   Matches iownsoftware.com: navy gradient + green accent. */
:root{
  color-scheme: dark;
  --bg:#0f1a2e; --grad1:#0f1a2e; --grad2:#1B365D;
  --panel:#14213a; --panel2:#0b1424;
  --border:#21304b; --border2:#2a3a59;
  --text:#e6e6e6; --muted:#8a93a6; --dim:#6b7280;
  --accent:#4CAF50; --accent-bg:#11261c; --accent-bg-h:#163524; --accent-bd:#1f5c43;
  --blue:#60a5fa; --blue-bg:#141d2e; --blue-bd:#285085;
  --danger:#f87171; --danger-bg:#2a1417; --danger-bd:#5c2b30;
  --amber:#fbbf24;
  --radius:10px; --radius-sm:7px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:15px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
}
a{color:var(--blue); text-decoration:none}
a:hover{color:#cfd6e4}
.muted{color:var(--muted)} .dim{color:var(--dim)}

/* ---- Top navigation (rendered by nav.js into <div id="nav">) ---- */
.topnav{
  display:flex; align-items:center; gap:20px; padding:0 24px; height:56px;
  background:linear-gradient(135deg,var(--grad1),var(--grad2));
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30;
}
.topnav .brand{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:600; font-size:16px}
.topnav .brand:hover{color:var(--text)}
.topnav .logo{
  width:32px; height:32px; border-radius:9px; color:#fff; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1B365D,#2C5F8A); border:1px solid rgba(255,255,255,.18);
}
.topnav .navlinks{display:flex; gap:4px; flex-wrap:wrap}
.topnav .navlinks a{color:#aeb8cc; font-size:14px; padding:7px 13px; border-radius:8px; font-weight:500}
.topnav .navlinks a:hover{color:#fff; background:rgba(255,255,255,.06)}
.topnav .navlinks a.active{color:#fff; background:rgba(255,255,255,.12)}
.topnav .navuser{margin-left:auto; display:flex; align-items:center; gap:14px}
.topnav .navuser .who{color:#aeb8cc; font-size:13px}
.topnav .navuser .signout{color:#aeb8cc; font-size:13px}
.topnav .navuser .signout:hover{color:#fff}
/* Alert badge on a nav tab (e.g. a server update is available). Amber to read as
   "action needed" and a gentle pulse so it's noticeable without being loud. */
.navbadge{display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; margin-left:6px; border-radius:9px;
  background:var(--amber); color:#1a1205; font-size:11px; font-weight:800;
  line-height:1; vertical-align:middle; box-shadow:0 0 0 0 rgba(251,191,36,.6);
  animation:navbadgePulse 2s ease-out infinite}
@keyframes navbadgePulse{
  0%{box-shadow:0 0 0 0 rgba(251,191,36,.55)}
  70%{box-shadow:0 0 0 6px rgba(251,191,36,0)}
  100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}}

/* ---- Layout ---- */
main,.wrap{max-width:1100px; margin:0 auto; padding:26px 24px}
.wrap.narrow{max-width:720px}
.page-head{display:flex; align-items:center; gap:14px; margin:2px 0 22px}
.page-head h1{font-size:21px; margin:0; font-weight:600}
.page-head .count{color:var(--muted); font-size:13px}
.page-head .spacer{margin-left:auto}
.section{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:26px 0 12px; font-weight:600}
.backlink{color:var(--muted); font-size:13px}
.backlink:hover{color:#cfd6e4}

/* ---- Cards ---- */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px}
.card+.card{margin-top:16px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.stat .v{font-size:26px; font-weight:600}
.stat .l{color:var(--muted); font-size:13px; margin-top:2px}
.stat .v.green{color:var(--accent)} .stat .v.blue{color:var(--blue)}

/* ---- Buttons ---- */
.btn{display:inline-block; border-radius:8px; padding:8px 15px; font-size:13px; font-weight:600;
  cursor:pointer; text-decoration:none; border:1px solid var(--border2); background:#16223a; color:#cfd6e4}
.btn:hover{background:#1b2a47; color:#fff}
.btn-accent{background:var(--accent-bg); color:var(--accent); border-color:var(--accent-bd)}
.btn-accent:hover{background:var(--accent-bg-h); color:var(--accent)}
.btn-blue{background:var(--blue-bg); color:var(--blue); border-color:var(--blue-bd)}
.btn-blue:hover{background:#1b2940; color:var(--blue)}
.btn-danger{background:var(--danger-bg); color:var(--danger); border-color:var(--danger-bd)}
.btn-danger:hover{background:#3a1a1e; color:var(--danger)}
.btn-sm{padding:5px 11px}
.btn:disabled{opacity:.55; cursor:default}
/* Bare <button> defaults to the primary (green) action; .sec is the neutral one. */
button{font:inherit; border-radius:8px; padding:8px 15px; font-size:13px; font-weight:600; cursor:pointer;
  border:1px solid var(--accent-bd); background:var(--accent-bg); color:var(--accent)}
button:hover{background:var(--accent-bg-h)}
button:disabled{opacity:.55; cursor:default}
button.sec{background:#16223a; color:#cfd6e4; border-color:var(--border2)}
button.sec:hover{background:#1b2a47; color:#fff}

/* ---- Forms ---- */
input,select,textarea{width:100%; padding:9px 11px; background:var(--panel2); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue-bd)}
input[type=checkbox]{width:auto}
label.field{display:block; margin-top:14px; font-size:13px; color:var(--muted)}
label.field>span{display:block; margin-bottom:5px}

/* ---- Tables ---- */
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border)}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em}
tbody tr:hover td{background:rgba(255,255,255,.03)}

/* ---- Status + misc ---- */
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle}
.online .dot{background:var(--accent); box-shadow:0 0 6px #4CAF5088} .online{color:var(--accent)}
.offline .dot{background:#4b5563} .offline{color:var(--muted)}
.ip{font-family:ui-monospace,monospace}
code{background:var(--panel2); padding:1px 6px; border-radius:4px; font-family:ui-monospace,monospace; font-size:.92em}
pre{background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:14px;
  overflow-x:auto; font:12.5px/1.5 ui-monospace,monospace; color:#cdd6e3}
.notice{background:var(--accent-bg); border:1px solid var(--accent-bd); border-radius:var(--radius); padding:16px}
.notice b{color:var(--accent)}
.err{background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-bd); border-radius:var(--radius-sm); padding:10px 12px}
.ok{background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-bd); border-radius:var(--radius-sm); padding:10px 12px}
.hide{display:none}

/* ---- Shared modal dialogs (mrConfirm / mrPrompt / mrAlert from nav.js) ---- */
.mrmodal-bg{position:fixed; inset:0; background:rgba(7,12,22,.72); display:none; align-items:center; justify-content:center; z-index:1000}
.mrmodal-bg.show{display:flex}
.mrmodal{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:22px 24px; max-width:420px; width:92%}
.mrmodal h3{margin:0 0 8px; font-size:17px}
.mrmodal p{margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.5; white-space:pre-wrap}
.mrmodal-row{display:flex; gap:10px; justify-content:flex-end}
.mrmodal-row button{width:auto}
.mrmodal-row button.danger{background:var(--danger-bg); color:var(--danger); border-color:var(--danger-bd)}

/* ---- Auth (pre-login, centered card) ---- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(135deg,var(--grad1),var(--grad2))}
.auth-card{width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:30px 26px}
.auth-card .logo{width:46px; height:46px; border-radius:12px; margin:0 auto 14px; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:16px; color:#fff;
  background:linear-gradient(135deg,#1B365D,#2C5F8A); border:1px solid rgba(255,255,255,.18)}
.auth-card h1{text-align:center; font-size:19px; margin:0 0 6px}
.auth-card .tagline{text-align:center; color:var(--muted); font-size:13px; margin:0 0 18px}
.auth-card button{width:100%; margin-top:18px}