/* admin.css - lane R110-CONTROL1: the Backups tab (public), the Admin tab (signed in) and the ops banner of the status page.
   Theme tokens of index.html only (no literal colour); light / dark follow the page. */
.admbtn { background:var(--pane); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font:600 13px system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
.admbtn:hover { border-color:var(--c0); }
.admwho { font-size:12px; color:var(--muted); white-space:nowrap; }
.opsbar { display:flex; gap:8px 14px; align-items:center; flex-wrap:wrap; padding:10px 14px; margin:0 0 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); background:color-mix(in srgb, var(--warn) 12%, var(--pane)); font-size:13px; }
.opsbar.info { border-color:color-mix(in srgb, var(--c0) 40%, transparent); background:color-mix(in srgb, var(--c0) 9%, var(--pane)); }
.opsbar b { font-weight:600; }
.agrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:14px; }
.agrid > .panel, .bgrid > .panel { min-width:0; }
.abody { padding:12px 16px; font-size:13px; }
.abody p { margin:0 0 8px; color:var(--muted); }
.arow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:6px 0; }
.arow > label { font-size:12px; color:var(--muted); display:inline-flex; gap:6px; align-items:center; }
.ainput { background:var(--well); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:13px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; min-width:0; }
.ainput.wide { flex:1 1 200px; }
.ainput.num { width:90px; }
.abtn { background:var(--sel); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:6px 12px; font:600 13px system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
.abtn:hover { border-color:var(--c0); }
.abtn.go { background:color-mix(in srgb, var(--c0) 22%, var(--pane)); border-color:color-mix(in srgb, var(--c0) 50%, transparent); }
.abtn.danger { color:var(--crit); border-color:color-mix(in srgb, var(--crit) 45%, transparent); }
.abtn:disabled { opacity:.5; cursor:default; }
.amsg { font-size:12px; min-height:1.4em; margin-top:4px; overflow-wrap:anywhere; }
.amsg.ok { color:var(--ok); } .amsg.bad { color:var(--crit); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px; }
.kv > span:nth-child(odd) { color:var(--muted); }
.lock { color:var(--faint); font-size:11px; }
.pbar { height:8px; border-radius:4px; background:var(--well); overflow:hidden; margin:6px 0; }
.pbar > i { display:block; height:100%; background:var(--c2); }
.gbar { position:relative; height:16px; border-radius:4px; background:var(--well); margin:3px 0 8px; overflow:hidden; }
.gbar > i { position:absolute; left:0; top:0; bottom:0; background:var(--c0); opacity:.75; }
.gbar > i.over { background:var(--crit); }
.gbar > b { position:absolute; top:0; bottom:0; width:2px; background:var(--warn); }
.glbl { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.list { font-size:13px; }
.list > div { padding:6px 16px; border-bottom:1px solid var(--line); display:flex; gap:8px; justify-content:space-between; align-items:center; min-width:0; }
.list > div:last-child { border-bottom:0; }
.list > div > span { overflow-wrap:anywhere; min-width:0; }
/* backups */
.bgrid { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:14px; align-items:start; }
.snap { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:8px 16px; border-bottom:1px solid var(--line); font-size:13px; }
.snap:last-child { border-bottom:0; }
.snap .sub { grid-column:1 / -1; color:var(--muted); font-size:12px; }
.ver { padding:8px 16px; border-bottom:1px solid var(--line); font-size:13px; display:grid; grid-template-columns:auto 1fr auto; gap:4px 10px; align-items:baseline; }
.ver:last-child { border-bottom:0; }
.ver .chunks { grid-column:1 / -1; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.ver input { margin:0; }
.pv { position:relative; width:100%; max-width:512px; aspect-ratio:1 / 1; background:var(--well); border-radius:8px; overflow:hidden; margin:8px auto; }
.pv img, .pv canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.pv .top { clip-path:inset(0 0 0 50%); }
.pv .lbl { position:absolute; top:6px; padding:2px 6px; border-radius:6px; background:var(--tip); border:1px solid var(--line); font-size:11px; }
.pv .lbl.a { left:6px; } .pv .lbl.b { right:6px; }
.pv .msg { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:13px; padding:16px; text-align:center; }
.pvs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.reqtext { width:100%; min-height:110px; font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; background:var(--well); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:8px; resize:vertical; }
.atable td, .atable th { padding:6px 10px; font-size:12px; }
.atable td.wrap { white-space:normal; overflow-wrap:anywhere; min-width:160px; }
@media (max-width: 900px) { .bgrid { grid-template-columns:1fr; } }
@media (max-width: 760px) { .agrid { grid-template-columns:1fr; } .pvs { grid-template-columns:1fr; } .ainput.wide { flex-basis:100%; } }