/* ============================================================ 1. Reset & base ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap'); :root { color-scheme: light; font-family: 'Montserrat', Helvetica, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: #f5f9f2; color: #1f3d1f; } /* ============================================================ 2. Layout primitives ============================================================ */ .container { max-width: 1200px; margin: 0 auto; padding: 40px 24px 60px; } /* ============================================================ 3. Navbar ============================================================ */ /* Scoped to `body > header` so the sticky navbar rule only hits the actual navbar, not any nested

(e.g. the `

` inside `.admin-page`). Without this scoping, every inner

becomes sticky at top: 0 and stacks on top of the navbar — which is exactly what made /admin/users render the page title over the navbar. */ body > header { position: sticky; top: 0; /* High enough that injected utility classes (Tailwind v4, third- party widgets) can't out-stack the navbar. The Drive picker dialog also lives below this value. */ z-index: 2147483000; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1rem 2rem; background-color: #fff; color: #2E7D32; border-bottom: 2px solid #FFB343; /* Solid background guarantees the navbar paints over any underlying content during scroll. Without this, even with z-index set, a translucent body could show through if any child element paints during scroll. */ background-clip: padding-box; } /* Belt-and-braces: a Tailwind v4 utility or an ancestor `transform` can demote sticky to static (sticky is computed against the nearest scroll container — if a parent sets `transform`, `filter`, or `will-change`, that parent becomes the container). Keep and clean so the navbar pins regardless of injected utility classes from Vite. */ html, body { overflow-x: clip; } body { /* `isolation: isolate` creates a new stacking context without introducing the `transform` / `filter` family that breaks sticky. Keeps the navbar's z-index relative to the page only. */ isolation: isolate; } header h1, .navbar-logo { margin: 0; font-size: 1.6rem; font-weight: bold; } .navbar-brand { display: flex; align-items: center; gap: 0.75rem; } img.navbar-logo-image { width: 42px; height: 42px; max-width: 100%; display: block; object-fit: contain; border-radius: 8px; background: transparent; } nav { display: flex; justify-content: flex-end; } nav ul { display: flex; align-items: center; flex-wrap: wrap; list-style: none; gap: 1rem; margin: 0; padding: 0; } nav li { display: inline-flex; align-items: center; white-space: nowrap; } nav a { color: #2E7D32; text-decoration: none; font-size: 1rem; display: inline-flex; align-items: center; } nav a:hover { color: #ddd; } nav a[href="/login"] { background-color: #2E7D32; color: white; padding: 0.5rem 1rem; border-radius: 4px; font-weight: 700; } /* Admin navbar dropdown — `.navbar-dropdown` replaces the four flat public-page links for admin-tier users with a single trigger that reveals the same four pages on hover / focus. Mirrors the structure of `.public-export-dropdown` (lines 2636-2703) but with the menu opening below the trigger rather than to the side, so it matches the navbar's horizontal rhythm. No JS: reveal is driven by `:hover` on the parent

and `:focus-within` so keyboard users tabbing into the menu still see the options. The trigger is a real pointing at the default page (Physical Targets), so no-JS / non-hover devices still get to one of the four pages by clicking the label. */ .navbar-dropdown { position: relative; } .navbar-dropdown__trigger { cursor: pointer; gap: 4px; } .navbar-dropdown__caret { font-size: 0.75em; line-height: 1; margin-left: 2px; display: inline-block; transition: transform 0.15s ease; } .navbar-dropdown:hover .navbar-dropdown__caret, .navbar-dropdown:focus-within .navbar-dropdown__caret { transform: translateY(1px); } .navbar-dropdown__menu { position: absolute; /* Sit flush against the trigger's bottom edge so the cursor never leaves the parent