:root {
  /* Palette sampled from the Hosted Companies Ltd logo (green padlock,
     teal-to-blue cloud, blue "companies" wordmark). */
  --ink: #16202a;
  --muted: #5b6b78;
  --border: #d7dee4;
  --panel: #ffffff;
  --bg: #f4f8f8;
  --brand: #00a4e4;
  --brand-dark: #076a94;
  --brand-green: #43b14f;
  --brand-teal: #14b8a6;
  --danger: #b3261e;
  --ok: #2f9e4f;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.wrap { max-width: 960px; margin: 0 auto; padding: 2rem 1.2rem; }
.narrow { max-width: 460px; }

h1, h2, h3 { line-height: 1.2; }

a { color: var(--brand); }

.topbar {
  background: var(--panel);
  color: var(--ink);
  padding: 0.7rem 1.2rem;
  /* Content centers within the same 1180px zone as the marketing site's
     .wrap (2026-08-03, Paul: logo/menu sat too far to the edges on wide
     screens compared to the main site) - grows the side padding instead
     of adding a wrapper <div>, since .topbar's markup is repeated
     verbatim across ~40 pages with no shared header include to edit
     once. The bar's own background still spans full width, exactly like
     the marketing site's .nav does around its own centered .wrap.
     First attempt used max(1.2rem, calc(...)) - picking whichever was
     bigger - but .wrap actually ADDS its own clamp(1.25rem,4vw,3rem)
     padding on top of the centering margin, not instead of it, so the
     two diverge at viewport widths just past 1180px (confirmed: Paul's
     side-by-side screenshots from a freshly-installed, never-configured
     Chrome still showed a gap at ~1200px CSS width). This replicates the
     marketing site's actual two-part formula exactly instead of
     approximating it. */
  padding-inline: calc(clamp(1.25rem, 4vw, 3rem) + max(0px, (100% - 1180px) / 2));
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sticky, matching the marketing site's own .nav (2026-08-03: bringing
     the portal's "feel" in line with hostedcompanies.co.uk's design
     system - the colour palette/fonts/logo were already identical by
     design, this was the one real, visible gap the rest of it flagged). */
  position: sticky;
  top: 0;
  z-index: 500;
}
.topbar .brand {
  font-weight: 700; color: var(--ink); text-decoration: none;
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2;
}
.topbar .brand img { height: 34px; width: auto; display: block; flex: none; }
.topbar .brand .role-label {
  font-weight: 500; font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem;
}
.topbar nav a { color: var(--muted); text-decoration: none; margin-left: 1.1rem; font-size: 0.92rem; }
.topbar nav a:hover { color: var(--ink); }
.topbar button {
  background: transparent; border: 1px solid var(--border); color: var(--ink);
  border-radius: var(--radius); padding: 0.35rem 0.8rem; cursor: pointer;
}

.nav-dropdown { position: relative; display: inline-block; margin-left: 1.1rem; }
.topbar .nav-dropdown-toggle {
  background: transparent; border: none; color: var(--ink); cursor: pointer;
  font-size: 0.92rem; font-weight: 600; padding: 0; font-family: inherit;
  appearance: none; -webkit-appearance: none; opacity: 1;
}
.topbar .nav-dropdown-toggle:hover { color: var(--brand); text-decoration: underline; }
/* Click-to-open, not :hover (see js/api.js) - a hover-based menu here used
   to close mid-click: the menu sits below the toggle with a visible gap
   for spacing, but since it's absolutely positioned that gap isn't part
   of .nav-dropdown's hoverable box, so moving the mouse diagonally toward
   an item crossed a dead zone and lost the hover state. Click-to-open
   sidesteps that entirely, and also means desktop/mobile can share one
   open/close mechanism instead of two different ones. */
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 0.5rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.4rem; min-width: 170px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  /* Leaflet's own map panes (tiles/markers/popups) go up to z-index 700,
     so 20 was nowhere near enough on any page with a map (Installations,
     for every role) - the dropdown was rendering underneath it. Pitched
     below 1000 deliberately, so it still stays under a genuine modal/
     lightbox overlay if one's open at the same time. */
  z-index: 900;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; color: var(--ink); text-decoration: none;
  padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.88rem;
}
.nav-dropdown-menu a:hover { background: var(--bg); }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin-bottom: 1.2rem;
}

.form-row { margin-bottom: 0.9rem; }
.form-row label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.3rem; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 0.55rem 0.65rem; border: 1px solid var(--border);
  border-radius: 8px; font-size: 0.95rem; background: #fff; color: var(--ink);
}

/* Pill-shaped, matching the marketing site's .nav-cta/.btn treatment
   (2026-08-03) - was 8px/square before; this is the one detail that made
   the portal read as a visibly different product from the marketing
   site despite sharing the same colour palette/fonts already. */
button.primary, input[type="submit"] {
  background: var(--brand); color: #fff; border: none; border-radius: 999px;
  padding: 0.6rem 1.3rem; font-size: 0.95rem; cursor: pointer; font-weight: 600;
}
button.primary:hover { background: var(--brand-dark); }
button.secondary {
  background: #fff; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 999px; padding: 0.55rem 1.2rem; font-size: 0.9rem; cursor: pointer;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
th { color: var(--muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; }

.message { padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.9rem; margin-bottom: 1rem; }
.message.error { background: #fbe9e7; color: var(--danger); }
.message.ok { background: #e6f4ea; color: var(--ok); }

.badge {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; background: #e6edf4; color: var(--brand-dark);
}

.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 0.6rem; }
.row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }

/* Mobile nav - hidden hamburger on desktop, collapses the topbar's <nav>
   behind it below a breakpoint. .menu-toggle is inserted once per page
   (each page's HTML is self-contained, no shared header include) and
   wired up generically in js/api.js - don't wire it per-page. */
.menu-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border); color: var(--ink);
  border-radius: var(--radius); padding: 0.3rem 0.65rem; cursor: pointer;
  font-size: 1.15rem; line-height: 1;
}

@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; }
  .menu-toggle { display: block; }
  .topbar .brand { flex: 1; min-width: 0; }
  .topbar nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 0.8rem;
    gap: 0.3rem;
  }
  .topbar nav.nav-open { display: flex; }
  .topbar nav a, .topbar nav > button { margin-left: 0; width: 100%; text-align: left; }
  .nav-dropdown { margin-left: 0; width: 100%; }
  /* Each dropdown expands inline in place (accordion-style) when tapped,
     rather than every dropdown being permanently expanded - with 4 groups
     now (Clients/Jobs/Admin/Referrers) "always all open" ate most of the
     screen. Same .open class/toggle JS as desktop (see js/api.js). */
  .nav-dropdown-menu {
    position: static; box-shadow: none; margin-top: 0.3rem; width: 100%; padding-left: 0.6rem;
  }
}