/* Shared look for the account pages (login, users, user log). Same colours as the other Argos 2.0 pages. */
:root { color-scheme:dark; --bg:var(--h-0d1117); --surf:var(--h-161b22); --surf2:var(--h-21262d); --surf3:var(--h-2d333b); --border:var(--h-30363d); --text:var(--h-e6edf3); --muted:var(--h-8b949e); --text2:var(--h-c9d1d9);
  --green:var(--h-3fb950); --red:var(--h-f85149); --yellow:var(--h-d29922); --blue:var(--h-58a6ff); --brand:#1f6feb; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { background:var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; font-size:13px; display:flex; flex-direction:column; }
.hdr { display:flex; align-items:center; min-height:46px; background:var(--surf); border-bottom:1px solid var(--border); padding:0 14px; gap:10px; flex-shrink:0; flex-wrap:wrap; }
.hdr-title { font-size:15px; font-weight:700; flex:1; white-space:nowrap; }
.hdr a { color:var(--muted); text-decoration:none; font-size:12px; }
.hdr a:hover { color:var(--blue); }
.hdr a.here { color:var(--text); font-weight:700; }
main { flex:1; min-height:0; overflow:auto; padding:14px; }
.panel { background:var(--surf); border:1px solid var(--border); border-radius:8px; padding:14px; margin-bottom:14px; }
.narrow { max-width:460px; margin:30px auto; }
h2 { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; display:flex; align-items:center; gap:4px; }
h2 .grow, .grow { flex:1; }
p.lead { color:var(--text2); line-height:1.6; margin-bottom:12px; }
button, .btn { background:var(--surf2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:0 12px; height:32px; cursor:pointer; font:inherit; font-weight:600; }
button:hover:not(:disabled) { border-color:var(--blue); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.pri { background:rgba(31,111,235,.18); border-color:var(--brand); color:var(--blue); }
button.danger { border-color:var(--red); color:var(--red); }
button.small { height:26px; padding:0 9px; font-size:11px; }
input[type=text], input[type=password], input[type=search], input[type=date], input[type=datetime-local], input[type=number], select, textarea { height:32px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); padding:0 8px; font:inherit; width:100%; }
input:focus, select:focus { outline:none; border-color:var(--blue); }
label.f { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; margin:10px 0 4px; }
label.chk { display:flex; align-items:center; gap:8px; margin:8px 0; color:var(--text2); }
.actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.err { color:var(--red); font-size:12px; min-height:16px; margin-top:8px; }
.okmsg { color:var(--green); font-size:12px; }
.muted { color:var(--muted); }
table { width:100%; border-collapse:collapse; }
th { background:var(--surf2); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0; }
td { padding:7px 10px; border-bottom:1px solid var(--surf2); vertical-align:middle; }
td.ts { white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--text2); }
.tag { font-size:10px; font-weight:800; padding:2px 8px; border-radius:8px; white-space:nowrap; background:var(--surf3); color:var(--text2); }
.tag.green { background:rgba(63,185,80,.14); color:var(--green); } .tag.red { background:rgba(248,81,73,.18); color:var(--red); }
.tag.yellow { background:rgba(210,153,34,.18); color:var(--yellow); } .tag.blue { background:rgba(88,166,255,.16); color:var(--blue); }
.bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.bar input, .bar select { width:auto; }
.scroll { overflow:auto; }
dialog { background:var(--surf); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:20px 22px; width:520px; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); margin:auto; overflow:auto; }
dialog::backdrop { background:rgba(0,0,0,.65); }
dialog h2 { font-size:13px; color:var(--blue); }
.sbar { height:26px; background:var(--surf2); border-top:1px solid var(--border); display:flex; align-items:center; padding:0 14px; gap:16px; font-size:11px; color:var(--muted); flex-shrink:0; }
.hide { display:none !important; }

/* From / To calendar boxes beside a Period list */
.dates { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.dates input { color-scheme:dark; max-width:100%; }
.dates .bad { color:var(--red); }