/* 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; --card:#111d34;
  --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; --blue-bg-h:#1b2940;
  --danger:#f87171; --danger-bg:#2a1417; --danger-bd:#5c2b30; --danger-bg-h:#3a1a1e;
  --amber:#fbbf24;
  /* Neutral (secondary) button + a couple of surface accents, as variables so the light theme
     can flip them (the dark palette's literals used to be inline). */
  --neutral-bg:#16223a; --neutral-bg-h:#1b2a47; --neutral-text:#cfd6e4; --neutral-text-h:#ffffff;
  --row-hover:rgba(255,255,255,.03); --code-text:#cdd6e3; --link-hover:#cfd6e4;
  --radius:10px; --radius-sm:7px;
}

/* ---- Light theme ----
   Applied automatically when the OS prefers light AND the user hasn't picked a theme, and when the
   user explicitly chooses Light from the nav's appearance menu (sets html[data-theme=light]). The
   topnav keeps its navy gradient in both themes (a branded dark header). The two blocks below MUST
   be kept in sync — CSS can't share one value set between a media query and a plain selector. */
@media (prefers-color-scheme: light){ :root:not([data-theme]){
  color-scheme: light;
  --bg:#eef1f6; --panel:#ffffff; --panel2:#f1f4f9; --card:#ffffff;
  --border:#d8dee9; --border2:#c6cedd;
  --text:#1b2533; --muted:#5b6679; --dim:#8a93a6;
  --accent:#2e8b48; --accent-bg:#e7f4ec; --accent-bg-h:#d8ecdf; --accent-bd:#a9d6b6;
  --blue:#2563eb; --blue-bg:#e9f0fe; --blue-bd:#bcd3fb; --blue-bg-h:#dbe7fd;
  --danger:#d23b3b; --danger-bg:#fdebeb; --danger-bd:#f3bcbc; --danger-bg-h:#f9d8d8;
  --neutral-bg:#eef2f8; --neutral-bg-h:#e2e8f2; --neutral-text:#1b2533; --neutral-text-h:#0a0f17;
  --row-hover:rgba(0,0,0,.04); --code-text:#243044; --link-hover:#0a3d8a;
}}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#eef1f6; --panel:#ffffff; --panel2:#f1f4f9; --card:#ffffff;
  --border:#d8dee9; --border2:#c6cedd;
  --text:#1b2533; --muted:#5b6679; --dim:#8a93a6;
  --accent:#2e8b48; --accent-bg:#e7f4ec; --accent-bg-h:#d8ecdf; --accent-bd:#a9d6b6;
  --blue:#2563eb; --blue-bg:#e9f0fe; --blue-bd:#bcd3fb; --blue-bg-h:#dbe7fd;
  --danger:#d23b3b; --danger-bg:#fdebeb; --danger-bd:#f3bcbc; --danger-bg-h:#f9d8d8;
  --neutral-bg:#eef2f8; --neutral-bg-h:#e2e8f2; --neutral-text:#1b2533; --neutral-text-h:#0a0f17;
  --row-hover:rgba(0,0,0,.04); --code-text:#243044; --link-hover:#0a3d8a;
}
*{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:var(--link-hover)}
.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)}
/* Divider between nav groups (primary tools | settings). Vertical in the desktop
   row; flipped to a horizontal rule when the menu stacks on phones (see media query). */
.topnav .navsep{flex:none; align-self:center; width:1px; height:20px; margin:0 7px; background:var(--border2)}
.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}
/* Appearance control (theme + accent), lives in the navy top nav so its button is light-on-navy. */
.navappr{position:relative; display:flex; align-items:center}
.apprbtn{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#cfd6e4;
  width:30px; height:30px; padding:0; border-radius:8px; font-size:15px; line-height:1; cursor:pointer}
.apprbtn:hover{background:rgba(255,255,255,.12); color:#fff}
.apprmenu{position:absolute; top:calc(100% + 8px); right:0; min-width:172px; background:var(--panel);
  border:1px solid var(--border2); border-radius:10px; padding:10px; box-shadow:0 12px 30px rgba(0,0,0,.4);
  display:none; z-index:40}
.apprmenu.show{display:block}
.apprmenu .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:2px 2px 6px}
.apprseg{display:flex; gap:4px; margin-bottom:11px}
.apprseg button{flex:1; width:auto; padding:6px 0; font-size:12px; font-weight:600; border-radius:7px;
  border:1px solid var(--border2); background:var(--neutral-bg); color:var(--neutral-text)}
.apprmenu .apprseg button:hover{background:var(--neutral-bg-h); color:var(--neutral-text-h)}
.apprseg button.on{background:var(--accent-bg); color:var(--accent); border-color:var(--accent-bd)}
.apprsw{display:flex; gap:8px}
.apprsw .sw{width:24px; height:24px; padding:0; border-radius:50%; border:2px solid transparent; cursor:pointer}
.apprsw .sw:hover{filter:brightness(1.12)}
.apprsw .sw.on{border-color:var(--text)}
/* 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)}}

/* Hamburger toggle: hidden on desktop, shown on phones to collapse the nav links. */
.topnav .navtoggle{display:none; margin-left:auto; width:42px; height:34px; cursor:pointer;
  align-items:center; justify-content:center; font-size:19px; line-height:1; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid var(--border); border-radius:8px}
.topnav .navtoggle:hover{background:rgba(255,255,255,.14)}

/* Phone nav: portrait phones (narrow) OR landscape phones (short + touch). The links and the
   account row collapse behind the hamburger and drop down as a full-width stacked menu, instead
   of wrapping into a narrow column down the middle. Tablets/desktop keep the inline bar. */
@media (max-width:720px), (max-height:520px) and (pointer:coarse){
  .topnav{flex-wrap:wrap; height:auto; min-height:56px; padding:0 16px; gap:0}
  .topnav .brand{height:56px}
  .topnav .navtoggle{display:inline-flex}
  .topnav .navlinks, .topnav .navuser{display:none; flex-basis:100%; width:100%;
    flex-direction:column; align-items:stretch; gap:2px; margin-left:0}
  .topnav.open .navlinks, .topnav.open .navuser{display:flex}
  .topnav .navlinks{padding:4px 0}
  .topnav .navsep{width:auto; height:1px; align-self:stretch; margin:6px 12px}
  .topnav .navlinks a{font-size:15px; padding:12px 12px}
  .topnav .navuser{padding:6px 0 12px; gap:2px; border-top:1px solid var(--border); margin-top:4px}
  .topnav .navuser .who, .topnav .navuser .signout{font-size:15px; padding:12px}
}

/* ---- 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}
/* On phones the header controls (search / filters / buttons) wrap onto their own
   rows instead of overflowing the viewport. Shared by every admin page. */
@media (max-width:720px){
  main,.wrap{padding:18px 14px}
  .page-head{flex-wrap:wrap; gap:10px 12px; margin-bottom:16px}
  .page-head .spacer{display:none}
  .page-head label{font-size:12px}
}
.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:var(--link-hover)}

/* ---- 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:var(--neutral-bg); color:var(--neutral-text)}
.btn:hover{background:var(--neutral-bg-h); color:var(--neutral-text-h)}
.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:var(--blue-bg-h); color:var(--blue)}
.btn-danger{background:var(--danger-bg); color:var(--danger); border-color:var(--danger-bd)}
.btn-danger:hover{background:var(--danger-bg-h); 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:var(--neutral-bg); color:var(--neutral-text); border-color:var(--border2)}
button.sec:hover{background:var(--neutral-bg-h); color:var(--neutral-text-h)}

/* ---- 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:var(--row-hover)}

/* ---- 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:var(--code-text)}
.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}