/* Styles for the portal. Lives in its own file so the page can run under a
   Content-Security-Policy of default-src 'self' with no 'unsafe-inline'
   exception for style. */
:root { --accent: #1565c0; --bg: #fafafa; --card: #ffffff; --text: #1a1a1a; --muted: #666; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
header { background: var(--accent); color: #fff; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; }
header h1 { font-size: 18px; margin: 0; }
main { max-width: 760px; margin: 32px auto; padding: 0 16px; }
.card { background: var(--card); border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.card h2 { margin-top: 0; font-size: 16px; }
button { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 10px 18px; font-size: 14px; cursor: pointer; }
button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
button[disabled] { opacity: .6; cursor: default; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.badge.ok { background: #e8f5e9; color: #1b5e20; }
/* Darkened from #e65100, which was about 3.4:1 on its own background at 12px.
   These badges carry the words "configuration outdated" and "switched off". */
.badge.warn { background: #fff3e0; color: #9a3412; }
.badge.none { background: #eeeeee; color: var(--muted); }
/* The config is the one long unbreakable string on this page and the manual
   fallback for getting it off the screen, so it wraps rather than scrolling
   sideways: on a phone, drag-to-scroll and drag-to-select are the same gesture. */
pre.conf { background: #263238; color: #eceff1; padding: 16px; border-radius: 6px;
  white-space: pre-wrap; word-break: break-all; font-size: 13px; }
.muted { color: var(--muted); font-size: 13px; }
.tiles { display: flex; gap: 12px; flex-wrap: wrap; }
.tile { border: 1px solid #e0e0e0; border-radius: 6px; padding: 12px 16px; min-width: 180px; }
.tile a { color: var(--accent); text-decoration: none; font-size: 15px; }
.tile a:hover { text-decoration: underline; }
.tile.locked { background: #f5f5f5; border-style: dashed; }
.tile.locked strong { color: var(--muted); font-weight: 600; }
input[type=text] { padding: 8px; border: 1px solid #bbb; border-radius: 6px; width: 220px; }
#qr { margin: 12px 0; }
header .nav { display: flex; gap: 16px; align-items: center; }
header .nav a { color: #fff; text-decoration: none; font-size: 14px; opacity: .8; cursor: pointer; }
header .nav a:hover { opacity: 1; text-decoration: underline; }
header .nav a.active { opacity: 1; font-weight: 600; text-decoration: underline; }
.navform { margin: 0; display: flex; }
header .nav button.navlink { background: none; border: 0; padding: 0;
  color: #fff; font: inherit; font-size: 14px; opacity: .8; cursor: pointer; }
header .nav button.navlink:hover { opacity: 1; text-decoration: underline; }
main.wide { max-width: 1100px; }
.tablewrap { overflow-x: auto; }
table.admin { border-collapse: collapse; width: 100%; font-size: 13px; }
table.admin th, table.admin td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
table.admin th { color: var(--muted); font-weight: 600; white-space: nowrap; }
table.admin td.num { text-align: right; font-variant-numeric: tabular-nums; }
code.v { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
details.os { border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; }
details.os summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.os ol { margin: 10px 0 0; padding-left: 20px; }
details.os li { margin-bottom: 6px; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.errbox { background: #fff3e0; border: 1px solid #ffcc80; border-radius: 6px; padding: 12px 14px; margin: 12px 0; }
/* Phones. There was no @media rule at all, so the first thing a phone user met
   was a header that overflowed its own width. */
@media (max-width: 600px) {
  header { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  header .nav { flex-wrap: wrap; gap: 12px 16px; }
  /* 14px text in a 17px-tall anchor is not a tap target. */
  header .nav a, header .nav button.navlink { padding: 6px 0; }
  main { margin: 20px auto; }
  .card { padding: 16px; }
  .tile { min-width: 100%; }
  .btnrow button { width: 100%; }
}

/* Utility classes, last on purpose. `.hidden` is a single class, so anything
   above that sets `display` at higher specificity silently outranks it: a
   `header .nav form` rule once did exactly that, and the logged-out page
   rendered a Sign out button to anonymous visitors. Everything that competes
   with it is written as a class too (see `.navform`), which leaves source
   order to settle it, and source order puts this last. */
.hidden { display: none; }