/* ------------------------------------------------------------------ * * Systematic Utility — admin UI stylesheet (base rules + components). * * Design tokens (colors/typography/radii/spacing) are NOT here: they live * in static/ui/themes/.css, generated from themes/manifest_*.py by * `codegen.py -f css` and linked directly from templates/base.html. Theme is * driven by the `data-theme` attribute on . * ------------------------------------------------------------------ */ /* ----------------------------- base ----------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--background); color: var(--on-background); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } code, .mono, .id { font-family: "JetBrains Mono", ui-monospace, monospace; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 .25rem; } h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .25rem; } h3 { font-size: 16px; font-weight: 600; margin: 0; } .label { text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--on-surface-variant); } .muted { color: var(--on-surface-variant); } /* --------------------------- app shell -------------------------- */ .app { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; background: var(--surface-container-low); border-right: 1px solid var(--outline-variant); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; /* brand fixed, nav scrolls, account pinned */ transition: width .15s ease; } /* ---- Collapsed sidebar: an icon-only rail. Toggled by the topbar button (toggleSidebar in base.html) and remembered in localStorage. ---- */ body.sidebar-collapsed .sidebar { width: 64px; } body.sidebar-collapsed .sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; } body.sidebar-collapsed .sidebar .brand > span, body.sidebar-collapsed .sidebar .brand .help-icon, body.sidebar-collapsed .nav-section, body.sidebar-collapsed .nav-link > span, body.sidebar-collapsed .nav-group .twirl, body.sidebar-collapsed .nav-group-row > .twirl, body.sidebar-collapsed .nav-group-row .help-icon, body.sidebar-collapsed .nav-children, body.sidebar-collapsed .account-name { display: none !important; } body.sidebar-collapsed .nav-link, body.sidebar-collapsed .nav-group-row { justify-content: center; } body.sidebar-collapsed .nav-link { padding-left: .5rem; padding-right: .5rem; } body.sidebar-collapsed .account-user { padding-left: 0; padding-right: 0; } body.sidebar-collapsed .account-user h2 { justify-content: center; } body.sidebar-collapsed .sidebar-account { align-items: center; } .sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; font-weight: 600; border-bottom: 1px solid var(--outline-variant); flex-shrink: 0; } /* Manifest help link — a muted question-mark icon shown next to an element (project brand, and later schema/table/column headers). Brightens on hover; pushed to the trailing edge when it sits in the brand row. */ .help-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; /* aligns the icon when it trails an

text run / margin-left: .3rem; / small gap after the label it annotates / color: var(--on-surface-variant); opacity: .6; text-decoration: none; flex-shrink: 0; } .help-icon:hover { opacity: 1; color: var(--primary); } .help-icon i { width: 16px; height: 16px; } / lucide icon inherited onto a form section header (column-group ui_icon) — sized down to sit inline with the small uppercase heading text. / .section-icon { width: 14px; height: 14px; vertical-align: middle; } / lucide icon (column ``ui_icon``) rendered before a column's label in grid headers / form field labels / filter labels. Inherits the label colour. / .col-icon { width: 14px; height: 14px; vertical-align: middle; margin-right: .3rem; } / table ``ui_icon`` before the grid's

title — sized to the 24px heading. / .grid-title-icon { width: 1.25rem; height: 1.25rem; vertical-align: middle; margin-right: .4rem; } .sidebar .brand .help-icon { margin-left: auto; } / the menu is the only scrolling region; brand + account stay put / .sidebar nav { padding: .5rem; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; overflow-y: auto; min-height: 0; } / Account block pinned to the sidebar bottom / .sidebar-account { flex-shrink: 0; border-top: 1px solid var(--outline-variant); padding: .5rem; display: flex; flex-direction: column; gap: 2px; } .account-user { padding: .6rem .75rem; min-width: 0; } / the markup wraps avatar + name in an

; reset its heading defaults and make it a left-aligned row so the avatar comes first with the username inline beside it, both on the same level (vertically centred) / .account-user h2 { margin: 0; font: inherit; display: flex; align-items: center; gap: .6rem; min-width: 0; } .account-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--surface-container); } .account-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; color: var(--on-surface-variant); } .account-avatar-fallback svg { width: 18px; height: 18px; } .account-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-link { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: .375rem; color: var(--on-surface); font-weight: 500; } .nav-link:hover { background: var(--surface-container); text-decoration: none; } .nav-link.active { background: var(--primary); color: var(--on-primary); } .nav-section { padding: .75rem .75rem .25rem; } / expandable nav groups / [x-cloak] { display: none !important; } .nav-group { width: 100%; border: none; background: transparent; cursor: pointer; font: inherit; font-weight: 500; text-align: left; color: var(--on-surface); } .nav-group .twirl { margin-left: auto; display: inline-flex; transition: transform .15s ease; } .nav-group .twirl.open { transform: rotate(90deg); } / Group header row: the toggle button grows to fill, the help ? and the expand twirl trail it (twirl lives outside the button so the help link — an — isn't nested inside a