/* ============================================================================
   NetXOrb - admin UI stylesheet (self-hosted, no external deps)
   Professional palette: slate surfaces + a single calm blue primary. No funky
   gradients. Dark (default) + light via [data-theme]; brand accent = blue.
   ========================================================================== */
:root {
  /* brand / accent — one calm professional blue, used solid */
  --pri:#3b82f6; --pri-d:#2f6fe0; --pri-fg:#ffffff;
  --accent:#38bdf8;                    /* sparing secondary (info) */

  /* dark theme (default) — slate/navy, easy on the eyes */
  --bg:#0b1120; --bg2:#0f172a; --card:#141d31; --card2:#1c2740;
  --line:#25314a; --line2:#31405e;
  --txt:#e6ebf4; --muted:#94a3b8; --muted2:#64748b;
  --ok:#26c281; --warn:#e0a83a; --grace:#e08640; --bad:#ef5a6f;
  --ring:rgba(59,130,246,.30);
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 3px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.22);
  --brand-text:#e6ebf4;                /* wordmark text in the sidebar */
  color-scheme: dark;
}

:root[data-theme="light"] {
  --pri:#2563eb; --pri-d:#1d4ed8; --pri-fg:#ffffff;
  --accent:#0891b2;
  --bg:#eef2f8; --bg2:#ffffff; --card:#ffffff; --card2:#f4f6fb;
  --line:#e2e8f0; --line2:#d3dbe7;
  --txt:#0f172a; --muted:#5b6577; --muted2:#8b93a5;
  --ok:#0f9d63; --warn:#a5720a; --grace:#c05a12; --bad:#d33a52;
  --ring:rgba(37,99,235,.25);
  --shadow:0 1px 2px rgba(15,23,42,.06),0 6px 20px rgba(15,23,42,.08);
  --brand-text:#0f172a;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased;
}
a{color:var(--pri)}
a:hover{text-decoration:underline}
small{color:var(--muted); font-weight:400}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.01em}

/* ---- Layout --------------------------------------------------------------- */
.app{display:flex; min-height:100vh}
.sidebar{
  width:236px; flex:0 0 236px; background:var(--bg2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:.6rem; padding:1.15rem; font-weight:750; font-size:1.05rem; border-bottom:1px solid var(--line); color:var(--brand-text)}
.brand img{border-radius:7px}
.sidebar nav{padding:.6rem .55rem; display:flex; flex-direction:column; gap:2px; flex:1; overflow:auto}
.sidebar nav a{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--radius-sm);
  color:var(--muted); font-weight:550; text-decoration:none; transition:.12s; border-left:3px solid transparent;
}
.sidebar nav a:hover{background:var(--card2); color:var(--txt); text-decoration:none}
.sidebar nav a.active{background:var(--card2); color:var(--txt); border-left-color:var(--pri)}
.sidebar nav a.active svg{color:var(--pri)}
.sb-foot{border-top:1px solid var(--line); padding:.6rem; display:flex; align-items:center; gap:.4rem}
.who{display:flex; align-items:center; gap:.6rem; flex:1; padding:.35rem; border-radius:var(--radius-sm); color:var(--txt); text-decoration:none}
.who:hover{background:var(--card2); text-decoration:none}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--pri); color:#fff; display:grid; place-items:center; font-weight:700}
.who-txt{display:flex; flex-direction:column; line-height:1.2; overflow:hidden}
.who-txt strong{font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px}
.who-txt small{font-size:.72rem; text-transform:capitalize}
.logout{color:var(--muted); padding:.5rem; border-radius:var(--radius-sm)}
.logout:hover{background:var(--card2); color:var(--bad)}
.theme-toggle{background:none;border:1px solid var(--line2);color:var(--muted);width:32px;height:32px;border-radius:var(--radius-sm);cursor:pointer;display:grid;place-items:center;transition:.15s}
.theme-toggle:hover{color:var(--txt);border-color:var(--pri)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{padding:1.1rem 1.6rem; border-bottom:1px solid var(--line); background:var(--bg2); display:flex; align-items:center; justify-content:space-between; gap:1rem}
.topbar h1{font-size:1.3rem}
.topbar-actions{display:flex;align-items:center;gap:.6rem}
.page{padding:1.5rem 1.6rem; max-width:1200px; width:100%}

/* ---- Cards ---------------------------------------------------------------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; margin-bottom:1.2rem; box-shadow:var(--shadow)}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:1rem}
.card-head h2{font-size:1.05rem}
.card-accent{border-color:var(--pri); box-shadow:0 0 0 1px var(--pri) inset,var(--shadow)}
.card-danger{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.grid-2 .card{margin-bottom:0}

/* ---- Stats --------------------------------------------------------------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.2rem}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.15rem; position:relative; overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pri);opacity:.9}
.stat-k{color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em}
.stat-v{font-size:1.9rem; font-weight:700; margin-top:.15rem}
.stat-v small{font-size:.9rem; color:var(--muted); font-weight:500}
.stat-s{color:var(--muted2); font-size:.78rem; margin-top:.1rem}

/* ---- Tables -------------------------------------------------------------- */
.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th{text-align:left; color:var(--muted); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; padding:.55rem .7rem; border-bottom:1px solid var(--line)}
.tbl td{padding:.65rem .7rem; border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--card2)}
.tbl .empty{text-align:center; color:var(--muted); padding:1.6rem}
.lnk{font-weight:600; color:var(--pri)}
.mono,.code,pre{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.sm{font-size:.82rem}
.muted{color:var(--muted)}

/* ---- Badges + dots ------------------------------------------------------- */
.badge{display:inline-block; padding:.15rem .5rem; border-radius:6px; font-size:.72rem; font-weight:650; letter-spacing:.02em}
.b-ok{background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok)}
.b-warn{background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn)}
.b-grace{background:color-mix(in srgb,var(--grace) 16%,transparent); color:var(--grace)}
.b-bad{background:color-mix(in srgb,var(--bad) 15%,transparent); color:var(--bad)}
.b-muted{background:var(--card2); color:var(--muted)}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:.35rem; vertical-align:middle}
.dot-on{background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.dot-off{background:var(--muted2)}

/* ---- Forms --------------------------------------------------------------- */
label{display:flex; flex-direction:column; gap:.3rem; font-size:.82rem; font-weight:600; color:var(--muted)}
input,select,textarea{
  background:var(--bg); border:1px solid var(--line2); color:var(--txt);
  padding:.55rem .65rem; border-radius:var(--radius-sm); font:inherit; width:100%;
}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{background:#fff}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--pri); box-shadow:0 0 0 3px var(--ring)}
textarea{resize:vertical; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85rem}
.form-row{display:flex; gap:.9rem; align-items:flex-end; flex-wrap:wrap}
.form-row label{flex:1; min-width:140px}
.form-row button{flex:0 0 auto}
.form-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem}
.form-grid .col-2{grid-column:span 2}
.form-grid .form-actions{grid-column:1/-1}
.form-grid .form-full{grid-column:1/-1}
.form-actions{margin-top:.3rem}
/* Licensed-feature checklist */
.feature-grid{display:flex; flex-direction:column; gap:.7rem}
.feature-group{border:1px solid var(--line,rgba(128,140,160,.22)); border-radius:8px; padding:.5rem .9rem .7rem; margin:0}
.feature-group legend{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:0 .35rem}
.feature-items{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.1rem .9rem}
.feature-item{display:flex; flex-direction:row; align-items:center; gap:.55rem; font-size:.82rem; font-weight:500; padding:.3rem 0; cursor:pointer; min-width:0; text-align:left}
.feature-item input{flex:0 0 auto; margin:0; width:15px; height:15px}
.feature-item span{min-width:0}
.action-row{display:flex; gap:.7rem; flex-wrap:wrap}
.action-row form{margin:0}

/* ---- Buttons (solid, professional) --------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--card2); color:var(--txt);
  border:1px solid var(--line2); padding:.5rem .85rem; border-radius:var(--radius-sm);
  font:inherit; font-weight:600; cursor:pointer; transition:.12s; text-decoration:none; white-space:nowrap;
}
.btn:hover{border-color:var(--pri); text-decoration:none}
.btn-primary{background:var(--pri); border:1px solid var(--pri); color:#fff}
.btn-primary:hover{background:var(--pri-d); border-color:var(--pri-d)}
.btn-danger{background:transparent; border-color:color-mix(in srgb,var(--bad) 55%,transparent); color:var(--bad)}
.btn-danger:hover{background:color-mix(in srgb,var(--bad) 12%,transparent)}
.btn-warn{border-color:color-mix(in srgb,var(--grace) 55%,transparent); color:var(--grace)}
.btn-warn:hover{background:color-mix(in srgb,var(--grace) 12%,transparent)}
.btn-sm{padding:.32rem .6rem; font-size:.8rem}
.btn-block{width:100%; justify-content:center; margin-top:.4rem}

/* ---- KV tables ----------------------------------------------------------- */
.kv{width:100%; border-collapse:collapse; font-size:.9rem}
.kv th{text-align:left; color:var(--muted); font-weight:600; padding:.4rem .6rem .4rem 0; width:130px; vertical-align:top}
.kv td{padding:.4rem 0}

/* ---- Flash --------------------------------------------------------------- */
.flash{padding:.7rem 1rem; border-radius:var(--radius-sm); margin:0 1.6rem 1rem; font-weight:550}
.page .flash,.login-card .flash{margin:0 0 1rem}
.flash-ok{background:color-mix(in srgb,var(--ok) 12%,transparent); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.flash-err{background:color-mix(in srgb,var(--bad) 12%,transparent); color:var(--bad); border:1px solid color-mix(in srgb,var(--bad) 30%,transparent)}

/* ---- Device page --------------------------------------------------------- */
.dev-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.2rem; gap:1rem}
.dev-head h2{font-size:1.3rem}
.lic-msg{padding:.6rem .8rem; border-radius:var(--radius-sm); font-weight:550; margin:.2rem 0 1rem}
.lic-ok{background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--ok)}
.lic-warn{background:color-mix(in srgb,var(--warn) 10%,transparent); color:var(--warn)}
.lic-grace{background:color-mix(in srgb,var(--grace) 10%,transparent); color:var(--grace)}
.lic-restricted,.lic-none{background:color-mix(in srgb,var(--bad) 10%,transparent); color:var(--bad)}
.spark{width:100%; height:60px}
.code{background:var(--bg); border:1px solid var(--line2); border-radius:var(--radius-sm); padding:.9rem; font-size:.85rem; white-space:pre-wrap; word-break:break-all; color:var(--txt)}

/* ---- Misc ---------------------------------------------------------------- */
.pager{display:flex; gap:.3rem; margin-top:1rem; flex-wrap:wrap}
.inline-reset{display:inline-block; position:relative}
.inline-reset summary{list-style:none; display:inline-flex}
.inline-reset summary::-webkit-details-marker{display:none}
.reset-pop{position:absolute; right:0; top:110%; background:var(--card2); border:1px solid var(--line2); padding:.6rem; border-radius:var(--radius-sm); display:flex; gap:.4rem; z-index:5; box-shadow:var(--shadow)}
.reset-pop input{width:150px}

/* ---- Login --------------------------------------------------------------- */
.login-body{display:grid; place-items:center; min-height:100vh; background:var(--bg)}
.login-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:2rem; width:360px; box-shadow:var(--shadow)}
.login-brand{text-align:center; margin-bottom:1.4rem}
.login-brand img{margin-bottom:.6rem}
.login-brand h1{font-size:1.5rem; color:var(--txt)}
.login-brand p{color:var(--muted); margin:.3rem 0 0; font-size:.85rem}
.login-card label{margin-bottom:.9rem}

/* ---- Charts (analytics) -------------------------------------------------- */
.chart{width:100%;height:200px;display:block}
.chart-axis{stroke:var(--line2);stroke-width:1}
.chart-line{fill:none;stroke:var(--pri);stroke-width:2}
.chart-area{fill:color-mix(in srgb,var(--pri) 14%,transparent);stroke:none}
.chart-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}

/* ---- Responsive ---------------------------------------------------------- */
@media(max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .sidebar{position:fixed; z-index:20; transform:translateX(-100%); transition:.2s}
  .app{display:block}
  .form-grid,.stat-grid{grid-template-columns:1fr}
  .page{padding:1rem}
}