/* SPDX-License-Identifier: GPL-3.0-or-later
   modbus-cra update server -- admin console.
   Light operations-console aesthetic: this is security infrastructure, so it
   reads like an instrument panel, not a marketing site.  The ground is a warm
   off-white with a faint green bias rather than pure #FFF -- a paper tone that
   is easier on the eyes over a long session and keeps the green accent
   legible.  Single stylesheet, no framework, no external fonts (system
   stack), so it renders instantly on shared hosting and works offline. */

:root{
  /* Grounds: off-white with a slight green cast so the accent sits in the
     same family as the surface rather than on top of it. */
  --bg:#f4f6f3; --panel:#ffffff; --panel-2:#ecefea; --line:#ccd3c8;
  /* Ink is a very dark green-grey, not black: softer contrast on a pale
     ground, and it keeps the whole page in one hue family. */
  --ink:#1b2320; --muted:#5c6862; --faint:#808c85;
  /* The accent darkens for a light ground -- the bright #3ecf8e that worked
     on near-black fails contrast on off-white. */
  --green:#0e754a; --green-dim:#0b5c3a; --green-glow:rgba(14,117,74,.10);
  --amber:#8a5f10; --red:#be382e; --blue:#1f6f9e;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  background-image:radial-gradient(1100px 520px at 85% -12%,var(--green-glow),transparent);
}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2; margin:0 0 .4em}
h1{font-size:1.5rem; font-weight:650; letter-spacing:-.01em}
h2{font-size:1.05rem; font-weight:600}
code,.mono{font-family:var(--mono); font-size:.88em}

/* ---- top bar ---- */
.topbar{
  display:flex; align-items:center; gap:24px; padding:0 22px; height:56px;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:baseline; gap:9px}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px var(--green-glow); align-self:center}
.brand .bname{font-family:var(--mono); font-weight:600; font-size:.98rem; letter-spacing:-.02em}
.brand .btag{font-size:.72rem; color:var(--faint); text-transform:uppercase; letter-spacing:.12em}
.topbar nav{display:flex; gap:2px; margin-left:8px}
.topbar nav a{color:var(--muted); padding:8px 13px; border-radius:6px; font-size:.9rem}
.topbar nav a:hover{color:var(--ink); background:var(--panel-2); text-decoration:none}
.topbar nav a.on{color:var(--green); background:var(--green-glow)}
.who{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:.85rem; color:var(--muted)}
.who .out{color:var(--muted)}
.who .out:hover{color:var(--red)}

/* ---- layout ---- */
.wrap{max-width:1080px; margin:0 auto; padding:30px 22px 60px}
.foot{max-width:1080px; margin:0 auto; padding:20px 22px 40px; color:var(--faint);
  font-size:.76rem; font-family:var(--mono); border-top:1px solid var(--line)}
.pagehead{display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:22px; flex-wrap:wrap}
.pagehead p{margin:.3em 0 0; color:var(--muted); font-size:.9rem}

/* ---- stat cards ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:26px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:0 1px 2px rgba(27,35,32,.04)}
.card .k{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted)}
.card .v{font-family:var(--mono); font-size:1.9rem; font-weight:600; margin-top:4px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.card .v.green{color:var(--green)} .card .v.amber{color:var(--amber)}
.card .sub{font-size:.78rem; color:var(--faint); margin-top:2px}

/* ---- panels ---- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:22px; overflow:hidden; box-shadow:0 1px 2px rgba(27,35,32,.04)}
.panel-h{padding:14px 18px; border-bottom:1px solid var(--line); display:flex;
  align-items:center; justify-content:space-between; gap:12px}
.panel-h h2{margin:0}
.panel-b{padding:18px}
.panel-b.flush{padding:0}

/* ---- tables ---- */
table{width:100%; border-collapse:collapse; font-size:.9rem}
thead th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:600; padding:11px 16px; border-bottom:1px solid var(--line); background:var(--panel-2)}
tbody td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel-2)}
td .mono,td.mono{font-family:var(--mono); font-size:.86rem}
.tablewrap{overflow-x:auto}
.num{font-variant-numeric:tabular-nums; text-align:right}

/* ---- pills / status ---- */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600;
  padding:3px 9px; border-radius:20px; font-family:var(--mono); letter-spacing:.01em}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.ok{color:var(--green); background:var(--green-glow)}
.pill.off{color:var(--faint); background:var(--panel-2)}
.pill.warn{color:var(--amber); background:rgba(138,95,16,.12)}
.pill.pub{color:var(--green); background:var(--green-glow)}
.pill.draft{color:var(--muted); background:var(--panel-2)}
.pill.dev{color:var(--amber); background:rgba(138,95,16,.12)}
.pill.update{color:var(--blue); background:rgba(31,111,158,.12)}

/* ---- forms ---- */
label{display:block; font-size:.82rem; color:var(--muted); margin:0 0 5px; font-weight:500}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); border-radius:6px;
  color:var(--ink); font-family:var(--sans); font-size:.92rem; padding:9px 12px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--green-dim);
  box-shadow:0 0 0 3px var(--green-glow)}
textarea{resize:vertical; min-height:70px; font-family:var(--mono); font-size:.85rem}
.field{margin-bottom:16px}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row .field{flex:1; min-width:180px}
.hint{font-size:.76rem; color:var(--faint); margin-top:5px}

button,.btn{display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--sans); font-size:.9rem; font-weight:600; padding:9px 18px;
  border-radius:6px; border:1px solid transparent}
.btn-primary{background:var(--green); color:#ffffff}
.btn-primary:hover{filter:brightness(1.08); text-decoration:none}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{background:var(--panel-2); text-decoration:none}
.btn-danger{background:transparent; border-color:rgba(190,56,46,.35); color:var(--red)}
.btn-danger:hover{background:rgba(190,56,46,.08); text-decoration:none}
.btn-sm{padding:5px 11px; font-size:.8rem}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* ---- alerts ---- */
.alert{padding:12px 16px; border-radius:6px; margin-bottom:18px; font-size:.9rem;
  border:1px solid transparent; display:flex; gap:10px}
.alert.ok{background:var(--green-glow); border-color:var(--green-dim); color:var(--green)}
.alert.err{background:rgba(190,56,46,.08); border-color:rgba(190,56,46,.35); color:var(--red)}
.alert.info{background:rgba(31,111,158,.08); border-color:rgba(31,111,158,.28); color:var(--blue)}
.alert.warn{background:rgba(138,95,16,.10); border-color:rgba(138,95,16,.32); color:var(--amber)}

/* ---- login / setup ---- */
.gate{min-height:100vh; display:grid; place-items:center; padding:24px}
.gate-card{width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:32px 30px; box-shadow:0 2px 12px rgba(27,35,32,.06)}
.gate-brand{display:flex; align-items:baseline; gap:9px; margin-bottom:6px}
.gate-brand .dot{width:10px; height:10px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px var(--green-glow); align-self:center}
.gate-brand b{font-family:var(--mono); font-size:1.1rem}
.gate h1{font-size:1.25rem; margin:14px 0 4px}
.gate .lede{color:var(--muted); font-size:.88rem; margin:0 0 24px}
.gate button{width:100%; justify-content:center; margin-top:6px}
.gate .foot-note{margin-top:22px; font-size:.76rem; color:var(--faint); text-align:center; line-height:1.5}

/* ---- misc ---- */
.copyrow{display:flex; gap:8px; align-items:center}
.copyrow input{font-family:var(--mono); font-size:.82rem}
.empty{text-align:center; color:var(--faint); padding:40px 20px; font-size:.9rem}
.tag{font-family:var(--mono); font-size:.78rem; color:var(--muted)}
.mono-block{font-family:var(--mono); font-size:.82rem; background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; padding:12px 14px; overflow-x:auto; color:var(--muted); line-height:1.7}
@media(max-width:640px){
  .topbar{gap:10px; padding:0 12px} .topbar .btag{display:none}
  .topbar nav a{padding:8px 9px; font-size:.82rem}
  .wrap{padding:20px 14px 50px}
}