/* portal.css - THE SITE'S LOOK (2026-10-11, user: 'I love the home page - all our other pages, except the admin dashboard, to sit inside
   the main page theme'). The shell (a fixed top bar with the network clock, the banner, the breadcrumb, the footer - drawn by portal.js)
   and the shared parts: panels with dark header bars, buttons, forms, tables, tags. Flat, square, dense; colour only for state. */
:root {
  --bg: #eef1f5; --panel: #ffffff; --line: #d9dfe7; --line2: #e8ecf1; --text: #18212d; --dim: #4a5666; --muted: #7a8696;
  --bar: #1b212c; --head: #2b3242; --head2: #323a4d; --link: #1d5fa6; --soft: #f7f9fb; --hover: #f4f6f9;
  --ok: #1e8a4c; --okbg: #e3f4ea; --warn: #b36b00; --warnbg: #fdf1dc; --bad: #c2352b; --badbg: #fbe7e5; --info: #1d5fa6; --infobg: #e6eef8;
  --amber: #ffbf47; --violet: #6b46c1; --violetbg: #efe9fb;
  --chip: #edf0f4; --infotx: #1a4a7a; --badtx: #8f261e; --oktx: #155f36; --warntx: #7a4a00;
}
/* DARK (2026-10-11, the sun / moon button in the top bar - portal.js; remembered per browser, light by default). The attribute selector
   outranks any page's own :root (bookings keeps a few names of its own - they are set here too). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12161e; --panel: #1b212c; --line: #323a4d; --line2: #2a3141; --text: #e6ebf2; --dim: #b3bfce; --muted: #8592a6;
  --head: #2b3242; --head2: #323a4d; --link: #7fb2f0; --soft: #202736; --hover: #252d3d; --chip: #2a3242;
  --ok: #4cc483; --okbg: rgba(76,196,131,.14); --warn: #f0b257; --warnbg: rgba(240,178,87,.14); --bad: #f07a6f; --badbg: rgba(240,122,111,.15);
  --info: #7fb2f0; --infobg: rgba(127,178,240,.14); --violet: #b39af0; --violetbg: rgba(179,154,240,.15);
  --infotx: #a9cbf5; --badtx: #f5a39b; --oktx: #8fe0b2; --warntx: #f5c98a;
  --panel2: #202736; --green: #4cc483; --blue: #7fb2f0; --red: #f07a6f; --amber: #f0b257; --accent: #2f78c8;
}
:root[data-theme="dark"] .vr-crumb, :root[data-theme="dark"] .vr-foot { border-color: var(--line); }
:root[data-theme="dark"] img[src*="logo"] { filter: none; }
/* the light / dark button, top right */
.vr-theme { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 6px; border: 1px solid #3a4456; border-radius: 3px; background: transparent; color: #c9d2de; cursor: pointer; }
.vr-theme:hover { color: #fff; border-color: #56637c; }
.vr-theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .btn.go, :root[data-theme="dark"] .btn-primary { background: #2f78c8; border-color: #2f78c8; color: #fff; }
:root[data-theme="dark"] .btn.go:hover, :root[data-theme="dark"] .btn-primary:hover { background: #3a86d6; }
:root[data-theme="dark"] .route ol::before { background: var(--muted); }
:root[data-theme="dark"] .route li::before { border-color: var(--muted); }
.vr-theme .sun { display: none; } :root[data-theme="dark"] .vr-theme .sun { display: block; } :root[data-theme="dark"] .vr-theme .moon { display: none; }
* { box-sizing: border-box; }
html { scroll-padding-top: 56px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 Inter, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.wrap.wide { max-width: 1600px; }
svg.i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num, .tnum { font-variant-numeric: tabular-nums; }

/* ---- the shell (portal.js) ---- */
.vr-util { background: var(--bar); color: #c9d2de; font-size: 13px; position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 0 #0f1319; }
.vr-util .wrap { display: flex; align-items: center; height: 42px; gap: 4px; }
.vr-util a { color: #c9d2de; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; height: 42px; white-space: nowrap; }
.vr-util a:hover { color: #fff; background: rgba(255,255,255,.06); text-decoration: none; }
.vr-util a.on { color: #fff; box-shadow: inset 0 -2px #4c8fd6; }
.vr-util .sp { flex: 1; }
.vr-util .acct { display: inline-flex; align-items: center; white-space: nowrap; flex: none; } .vr-util .acct a { font-weight: 600; }
/* a mid-width window (2026-10-11: 'Log in' and 'Register' wrapped onto two lines at ~760px): the clock keeps its time, loses its label */
@media (max-width: 900px) { .vr-util a { padding: 0 9px; } .vr-util .ntime .vr-lbl { display: none; } .vr-util .ntime { margin-right: 4px; } }
.vr-util .ntime { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; color: #8f9bad; font-size: 12px; white-space: nowrap; }
.vr-util .ntime b { font-size: 13.5px; font-weight: 700; color: #ffbf47; background: #11151c; border: 1px solid #3a4456; border-radius: 2px; padding: 1px 8px; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.vr-banner { position: relative; overflow: hidden; background: linear-gradient(180deg, #2a3243, #1f2532); border-bottom: 1px solid #141922; }
.vr-banner svg.track { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; filter: blur(1.2px); }
.vr-banner .wrap { position: relative; display: flex; align-items: center; min-height: 120px; padding-top: 14px; padding-bottom: 14px; }
.vr-banner.tall .wrap { min-height: 168px; }
.vr-banner img { height: 64px; display: block; } .vr-banner.tall img { height: 74px; }
.vr-crumb { background: var(--panel); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vr-crumb .wrap { height: 30px; display: flex; align-items: center; gap: 8px; }
.vr-crumb a { color: var(--muted); } .vr-crumb a:hover { color: var(--text); }
.vr-foot { border-top: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; margin-top: 12px; }
.vr-foot .wrap { padding-top: 16px; padding-bottom: 20px; }
.vr-foot .l { color: var(--dim); font-size: 13px; margin-bottom: 8px; } .vr-foot .l a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.vr-foot p { margin: 4px 0; }

/* ---- page content ---- */
.page { padding-top: 20px; padding-bottom: 32px; }
.page-h { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.page-h h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.page-h p { margin: 2px 0 0; color: var(--dim); }
.page-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.col { display: grid; gap: 20px; min-width: 0; align-content: start; }

.p { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.ph { display: flex; align-items: center; gap: 10px; background: var(--head); color: #f1f4f8; padding: 9px 14px; font-size: 13.5px; font-weight: 600; }
.ph .r { margin-left: auto; font-weight: 500; font-size: 12.5px; color: #b9c4d3; display: flex; gap: 8px; align-items: center; }
.ph a.r, .ph .r a { color: #b9c4d3; } .ph a.r:hover, .ph .r a:hover { color: #fff; }
.pb { padding: 16px; }
.pf { padding: 10px 14px; background: var(--soft); border-top: 1px solid var(--line2); color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); padding: 14px; font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; font: 600 13px Inter, "Segoe UI", sans-serif; border-radius: 3px; border: 1px solid var(--head); background: var(--head); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #3a4458; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.alt, .btn.ghost { background: var(--panel); color: var(--text); border-color: var(--line); } .btn.alt:hover, .btn.ghost:hover { background: var(--hover); border-color: #c3ccd8; }
.btn.go { background: var(--link); border-color: var(--link); } .btn.go:hover { background: #17508d; }
.btn.danger { background: var(--panel); color: var(--bad); border-color: var(--line); } .btn.danger:hover { background: var(--badbg); }
.btn.small, .btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.block { width: 100%; }

.tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; white-space: nowrap; }
.tag.on, .tag.ok { background: var(--okbg); color: var(--ok); } .tag.idle { background: var(--chip); color: var(--dim); } .tag.off, .tag.bad { background: var(--badbg); color: var(--bad); }
.tag.warn { background: var(--warnbg); color: var(--warn); } .tag.info { background: var(--infobg); color: var(--info); } .tag.vio { background: var(--violetbg); color: var(--violet); }

table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line2); background: var(--soft); white-space: nowrap; }
table.t td { padding: 8px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
table.t tbody tr:nth-child(even) td { background: var(--soft); }
table.t tbody tr:last-child td { border-bottom: 0; }

label.f { display: block; font-size: 13px; font-weight: 600; color: var(--dim); margin: 14px 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=time], input[type=date], input[type=number], select, textarea {
  width: 100%; font: 14px Inter, "Segoe UI", sans-serif; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(29,95,166,.14); }
.note { padding: 10px 12px; border-radius: 3px; margin-bottom: 14px; font-size: 13px; border: 1px solid; }
.note.ok { background: var(--okbg); color: var(--oktx); border-color: var(--line); }
.note.warn { background: var(--warnbg); color: var(--warntx); border-color: var(--line); }
.note.bad { background: var(--badbg); color: var(--badtx); border-color: var(--line); }
.note.info { background: var(--infobg); color: var(--infotx); border-color: var(--line); }

@media (max-width: 980px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .vr-util .nav a span, .vr-util .ntime .vr-lbl { display: none; } .vr-util a { padding: 0 9px; }
  .vr-util .acct a + a { display: none; }   /* a phone: Log in only (Register is on the log-in page) */
  .vr-util .ntime { margin-right: 2px; }
  .vr-banner .wrap, .vr-banner.tall .wrap { min-height: 88px; } .vr-banner img, .vr-banner.tall img { height: 48px; }
}

/* a count on a header link (Support: replies waiting) - a <b>, so it stays when the labels hide on a phone */
.vr-util a .vr-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e2554b; color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; margin-left: -2px; }