*,
*::before,
*::after {
box-sizing: border-box;
}
/* Root only, not body - see the matching note near the end of this file: on
body, overflow-x:hidden forces overflow-y to `auto`, making body a scroll
container that position:sticky would anchor to and never stick against. */
html {
overflow-x: hidden;
}
/* Hide custom translated labels during page initialization to prevent FOUT */
body.loading-terminology [data-translate] {
visibility: hidden !important;
}
/* The document itself is the app's one intentional scroll region (#sidebar
is `position: fixed` and #app-header is `position: sticky`, so scrolling
html/body is what makes long pages - a big filtered grid, a tall form -
reachable while the sidebar/header stay in place; see #app-main's
min-height: 100vh further down). That's correct architecture, not a bug -
but the browser's default scrollbar is a chunky, unstyled OS widget that
clashes with the rest of this theme. Give it the same thin/subtle
treatment already used for .sidebar-menu's own internal scrollbar,
instead of trying to suppress scrolling altogether (which would just
make anything below one screen's worth of content unreachable). */
html {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
/* #app-header is fixed over the top of the page, so anything the browser
scrolls to on its own - scrollIntoView, focusing an invalid field, an
#anchor jump - would otherwise land underneath it. */
scroll-padding-top: calc(var(--shell-gap) + var(--header-height) + var(--content-gap));
}
html::-webkit-scrollbar {
width: 8px;
}
html::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.28);
}
html::-webkit-scrollbar-track {
background: transparent;
}
:root {
/* --- Typography ---
The ONE font stack for the whole application. Every screen, every
module, every layout resolves its type through these two tokens and
nothing else - see playbook/design_system/tokens.md §3.
Written here rather than repeated per page because it kept drifting:
three dashboards had settled on 'Outfit' (a font this app does not ship
and never loaded, so those pages silently rendered in the browser's
default sans while everything beside them rendered in Inter), and five
different monospace stacks had accumulated across the templates. A
single token is the only version of this that stays true.
--font-mono is for machine-shaped text only - error reference ids, JSON
diffs, SQL, source-column names, hex codes. It is not a style choice
available to ordinary copy.
Inter is vendored at app/static/vendor/inter-font/ and MUST be linked by
every layout (layout.html, layout_bare.html, layout_embed.html);
otherwise these tokens fall through to Arial and the page quietly looks
like a different application. */
--font-sans: "Inter", "Gilroy", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
/* Bootstrap builds its own components off these three, and they are NOT
inherited from `body` - .tooltip, .popover, .toast, .modal, .dropdown-menu
and .offcanvas each re-declare `font-family: var(--bs-body-font-family)`
against Bootstrap's default system-UI stack. Without this remapping a
tooltip or a dropdown rendered in Segoe UI on top of an Inter page, which
is the subtle half of "the fonts don't match". */
--bs-font-sans-serif: var(--font-sans);
--bs-font-monospace: var(--font-mono);
--bs-body-font-family: var(--font-sans);
--sidebar-width: 230px;
--sidebar-collapsed-width: 64px;
/* Gap between the sidebar/header "floating panel" surfaces and the
viewport edge / each other on desktop - not used on the mobile
off-canvas drawer, which stays edge-to-edge by its own separate
@media (max-width: 767.98px) rules. */
--shell-gap: 12px;
/* Gap between the content column and the two shell surfaces it sits
against - the header card above it and the sidebar card to its left.
Separate from --shell-gap so the outer frame inset (surfaces to
viewport edge) can stay wider than this inner seam.
8px, not the original 5px: the seam is where --shell-shadow below falls,
and at 5px the shadow had no room to be seen - the two surfaces read as
one flat sheet with a hairline in it. */
--content-gap: 8px;
/* Elevation for the shell's floating surfaces (the sidebar and header
cards) and, one step lighter, for the cards inside the content column.
These seams are just the canvas showing through, and #f4f5f7 canvas
against a #ffffff card is a ~2% step - far too little to read as a
boundary on its own, which is the entire job of these shadows. Two
levels so the hierarchy stays legible: the shell floats above the
canvas, content cards sit on it. */
--shell-shadow: 0 6px 18px rgba(16, 24, 40, 0.10), 0 1px 3px rgba(16, 24, 40, 0.06);
--panel-shadow: 0 2px 10px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
/* Height of the floating header card. The header spans the full width
ACROSS THE TOP (above the sidebar, not beside it), so both #sidebar's
top inset and #app-main's top padding are derived from this - change
it here and the whole shell follows. */
--header-height: 62px;
/* Usable height for a full-page workspace shell - one that fills the screen
and scrolls inside its own panels rather than scrolling the page (the
Report Designer and the Form Builder).
Derived so the shell's bottom edge lands exactly on #sidebar's. Both
start at the same seam (#sidebar's `top` and #app-main's `padding-top`
are the same expression), so matching the bottom means subtracting that
shared top inset and then #sidebar's own `bottom: var(--shell-gap)`.
The workspace is the one place the misalignment shows: #sidebar is a
full-height floating card right beside it, so any shortfall reads as the
panel stopping short of the menu rather than as ordinary page padding.
#main_body's 20px padding-bottom is deliberately NOT subtracted - it is
zeroed for these pages instead (see the #main_body:has() rule below),
because subtracting it is what left the shell 20px shy of the sidebar.
Both shells previously hardcoded `calc(100vh - 160px)`, 66px short.
Expressed in the same tokens the shell is positioned by, so retuning the
header or the gaps carries the workspaces with it.
Assumes the page renders no {% block secondary_nav %} tab bar - true of
both current users, and a page that adds one must subtract its height. */
--workspace-shell-height: calc(100vh - var(--shell-gap) - var(--header-height) - var(--content-gap) - var(--shell-gap));
--header-border: #eff2f5;
--brand-accent: #e94f7c;
--dm-tab-border: #d9dfe7;
/* --- Design Config (Administration -> Design Config) ---
CORRECTION 14: every variable below is admin-configurable from that
page and applied globally by app/static/js/theme.js on every
authenticated page load - see app/schemas/design_config.py for the
field <-> CSS var mapping (1:1, underscores -> dashes) and
app/services/design_config_service.py for per-tenant storage. Values
here are exactly what this app already shipped with before this
feature existed (this renamed/split the old --dm-teal, --sidebar-*,
--dm-panel-bg and --header-icon-color variables into these semantic
names, matched 1:1 to real usage sites below - nothing here changes what
the app looks like today; see individual rules for where --dm-panel-bg's
two different real uses - nav hover vs. card/panel background - were
split into --nav-hover-bg and --card-bg).
NB: never write a wildcard variable name (asterisk) directly followed by
a slash inside a CSS comment - those two characters ARE the comment
terminator. This block previously read "--sidebar-" + asterisk + slash,
which closed the comment four lines early; the remaining prose then
parsed as CSS, and the intended terminator below became a stray token
whose error recovery ran to the next semicolon - silently eating the
--btn-primary-bg declaration on the far side of it. That is the token
.sk-tabs, every button and the whole primary palette read. It went
unnoticed for so long because each usage site writes
var(--btn-primary-bg, #1b838b) and theme.js re-declares the value at
runtime, so only an unauthenticated or static render showed it. */
/* Buttons - Primary = Save/Update/Apply/Create actions, Secondary =
Cancel/Close/Reset outline actions, Danger = destructive/Delete
actions (no delete button exists in this port yet, but this is
wired now so one just works when built). */
--btn-primary-bg: #1b838b;
--btn-primary-text: #ffffff;
--btn-primary-hover-bg: #146267;
--btn-secondary-bg: #ffffff;
--btn-secondary-text: #1b838b;
--btn-secondary-border: #1b838b;
--btn-secondary-hover-bg: #f2f4f7;
--btn-danger-bg: #e04f5f;
--btn-danger-text: #ffffff;
--btn-danger-hover-bg: #c53c4b;
/* Navigation - Top menu is covered by --header-bg/--header-text below
(Headers section), not a separate pair - see design_config.py. */
--nav-side-bg: #ffffff;
--nav-side-text: #344054;
/* Must track design_config.py's nav_active_bg default - this is what
paints on first load, before theme.js has applied the tenant's saved
config, so a mismatch shows as a colour flash on every page. */
--nav-active-bg: #1b838b;
--nav-active-text: #ffffff;
--nav-hover-bg: #f2f4f7;
--nav-icon-color: #1b838b;
--child-page-icon-color: #1b838b;
/* DataTable / AG Grid - icons (original scope) plus header text, zebra
striping, row hover/selected, and footer/pagination bar background
(DataTable UI enhancement pass - see design_config.py's comment on
this team for why grid_header_text_color isn't just a reuse of
grid_sort_icon_color). */
--grid-header-bg: #fafbfc;
--grid-header-text-color: #98a2b3;
--grid-sort-icon-color: #344054;
--grid-search-icon-color: #98a2b3;
--grid-pagination-icon-color: #344054;
--grid-action-icon-color: #1b838b;
/* No zebra striping - rows are plain white, separated by the hairline
row border alone. */
--grid-zebra-bg: #ffffff;
--grid-row-hover-bg: #f2f4f7;
--grid-row-selected-bg: #dcefef;
--grid-footer-bg: #fafbfc;
/* Form controls */
--form-label-color: #344054;
--form-focus-color: #1b838b;
--form-required-color: #e04f5f;
/* Links / Icons (general, non-nav) */
--link-color: #4dabf7;
--icon-color: #78829d;
/* Cards / Panels */
--card-bg: #ffffff;
--card-border: #eef1f4;
/* Form container radius - mandatory app-wide standard (Engineering
Playbook, playbook/design_system/component_catalog.md §19; see also
tokens.md §4). Applies to the OUTER wrapping surface of every
create/edit/view/config form: modal dialogs (.modal-content,
.nd-modal), a form section/card (.safekivi-card.sk-form-card - see the
modifier's own comment for why the bare .safekivi-card base rule is
untouched), and the handful of bespoke wizard/builder shells
(.hc-editor-card, .fb-shell, .rd-shell, .stg-shell, .section-card,
Super Admin's .sa-card/.mm-*-card). Never write a literal 26px in a
new rule - reference this token so a future change to the standard is
a one-line edit, not a repeat of this audit. */
--form-container-radius: 26px;
/* Headers / Page titles (also covers Navigation -> Top menu) */
--header-bg: #ffffff;
--header-text: #1e2129;
--page-title-color: #1e2129;
/* Alerts / Notifications - real, already-rendered Bootstrap .alert-*
classes (e.g. #userFormError/#userListError), not a stub. */
--alert-success-bg: #d1e7dd;
--alert-success-text: #0f5132;
--alert-warning-bg: #fff3cd;
--alert-warning-text: #664d03;
--alert-danger-bg: #f8d7da;
--alert-danger-text: #842029;
--alert-info-bg: #cff4fc;
--alert-info-text: #055160;
/* Tabs - simplified from the secondary-tab-bar's original two-tone
gradient to flat configurable colors (a color picker can't drive a
gradient stop pair) - deliberate, disclosed simplification. */
--tab-bg: #f1f1f1;
--tab-hover-bg: #d7eaea;
--tab-active-color: #1b838b;
--tab-text-color: #344054;
--tab-icon-color: #1b838b;
/* Breadcrumbs - not yet rendered anywhere in this port (no page uses
breadcrumb navigation today) - wired end-to-end regardless so it
just works the moment one exists; see .breadcrumb rules below. */
--breadcrumb-text-color: #667085;
--breadcrumb-active-color: #1e2129;
--breadcrumb-separator-color: #98a2b3;
}
/* Generic links - real nav/menu/tab links all carry their own more-specific
selector (#sidebar-brand a, .secondary-tab, .menu-* etc.) so they keep
winning over this bare `a` rule regardless of source order; this only
affects plain links that don't opt into one of those components. */
a {
color: var(--link-color, #4dabf7);
}
a:hover {
color: var(--link-color, #4dabf7);
filter: brightness(0.85);
}
/* Page title utility - no page in this port currently renders a distinct
"page title" element (admin pages use the secondary tab bar instead of
an -style heading) - available now so future pages can opt in. */
.page-title {
color: var(--page-title-color, #1e2129);
font-weight: 700;
}
/* Breadcrumbs - not yet rendered anywhere in this port (see
design_config.py's module docstring) - Bootstrap's own .breadcrumb/
.breadcrumb-item classes, themed now so it just works the moment a page
adds one. */
.breadcrumb .breadcrumb-item {
color: var(--breadcrumb-text-color, #667085);
}
.breadcrumb .breadcrumb-item.active {
color: var(--breadcrumb-active-color, #1e2129);
}
.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
color: var(--breadcrumb-separator-color, #98a2b3);
}
/* Alerts / Notifications - real, already-rendered Bootstrap alert classes
(#userFormError/#userListError use `alert alert-danger` today) - themed
here instead of relying on Bootstrap's own stock alert colors, and
extended to the other 3 severities so all 4 are ready wherever used. */
.alert-success {
background-color: var(--alert-success-bg, #d1e7dd);
color: var(--alert-success-text, #0f5132);
border-color: var(--alert-success-text, #0f5132);
}
.alert-warning {
background-color: var(--alert-warning-bg, #fff3cd);
color: var(--alert-warning-text, #664d03);
border-color: var(--alert-warning-text, #664d03);
}
.alert-danger {
background-color: var(--alert-danger-bg, #f8d7da);
color: var(--alert-danger-text, #842029);
border-color: var(--alert-danger-text, #842029);
}
.alert-info {
background-color: var(--alert-info-bg, #cff4fc);
color: var(--alert-info-text, #055160);
border-color: var(--alert-info-text, #055160);
}
body {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 500;
color: #304050;
margin: 0;
/* The page/canvas colour. #app-main paints the same grey, but it only
covers the content column - the shell gaps around the floating header
and sidebar (and the strip above the sidebar, beside the full-width
header) are body, and without this they fell through to the browser's
default white. The login page and the bare/error layouts each paint
their own full-viewport background over this, so they're unaffected. */
background: var(--body-bg, #f4f5f7);
}
/* --- Sidebar ---
A floating rounded panel below the full-width header, holding only the
scrollable menu list (its brand/logo block was removed - the logo lives
in the header alone now; see _menu.html). */
#sidebar {
position: fixed;
/* Starts below the full-width header card, on the same seam as #app-main's
content so the two tops stay flush: gap + header + content-gap. */
top: calc(var(--shell-gap) + var(--header-height) + var(--content-gap));
left: var(--shell-gap);
bottom: var(--shell-gap);
width: var(--sidebar-width);
background: var(--nav-side-bg, #ffffff);
color: var(--nav-side-text, #344054);
border: 1px solid var(--card-border, #eef1f4);
border-radius: 16px;
box-shadow: var(--shell-shadow);
overflow: hidden;
z-index: 1030;
transition: width 0.2s ease, transform 0.2s ease;
display: flex;
flex-direction: column;
}
body.sidebar-collapsed #sidebar {
width: var(--sidebar-collapsed-width, 64px) !important;
min-width: var(--sidebar-collapsed-width, 64px) !important;
max-width: var(--sidebar-collapsed-width, 64px) !important;
transform: none !important;
}
/* The sidebar's own brand/logo block was removed (see _menu.html) - the
SafeKivi mark + wordmark now live only in the full-width top header, so
every #sidebar-brand / .sidebar-brand-logo-* / .brand-text rule that used
to be here went with it. These two are NOT sidebar-only and stay: the
header (_header.html), the login page and the Super Admin layout all still
render the two-tone "Safe"+"Kivi" wordmark. */
.brand-text-safe {
color: var(--btn-secondary-text, #344054);
}
.brand-text-kivi {
color: #69be19;
}
/* Sidebar toggle, docked as the first control in the header card.
Still exactly ONE control, and still outside #sidebar (which slides fully
off-screen when collapsed, so a toggle anchored to it would leave no way to
reopen the drawer) - but no longer `position: fixed` on the sidebar/content
seam. That seam is 8px wide and this button is 32px, so it necessarily
covered something: near the top, both .sidebar-menu's first row and every
page's title block. In the header it is in normal flow inside .header-inner,
so it cannot overlap page content at all.
Inherits its shape, hover tint and sizing from .header-icon-btn, matching the
notification/logout/assistant controls at the other end of the same card. */
/* Sidebar collapse toggle, docked in the sidebar's top-right corner.
`position: fixed` against the viewport, NOT a child of #sidebar: the sidebar
narrows to a 64px icon rail when collapsed and slides fully off-screen as a
drawer on mobile, so a child would be clipped by the rail or carried away
with the drawer, leaving no way to reopen it.
The `left` value keeps the whole button INSIDE the sidebar's own box - 32px
wide, 8px clear of the panel's right edge. The earlier version centred it on
the sidebar/content seam, which meant it always overhung the content column
by 8px; at this top offset that overhang ran straight through every page's
title block. Sitting fully inside the panel is what removes the overlap while
keeping the control attached to the thing it collapses. */
.sidebar-collapse-btn {
position: fixed;
top: calc(var(--shell-gap) + var(--header-height) + var(--content-gap) + 6px);
left: calc(var(--sidebar-width) + var(--shell-gap) - 40px);
background: var(--nav-side-bg, #ffffff);
border: none;
color: #3e97ff;
width: 32px;
height: 32px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
z-index: 1031;
transition: left 0.2s ease;
}
.sidebar-collapse-btn:hover {
/* Sits on the sidebar's own surface, so it takes the sidebar's hover shade
rather than the light-gray card tint used by header controls. */
background: var(--nav-hover-bg, #f4f5f7);
}
/* Collapsed: the rail is only 64px wide, so there is no "inside, clear of the
right edge" to sit in without landing on the icons. Centre it in the rail
instead and let the menu below start further down (see the padding-top on
.sidebar-menu just after this), which gives the button its own row at the top
of the rail rather than putting it on top of the first icon. */
body.sidebar-collapsed .sidebar-collapse-btn {
left: calc(var(--shell-gap) + (var(--sidebar-collapsed-width, 64px) - 32px) / 2) !important;
}
/* Sidebar collapsed icon rail styling.
padding-top clears the collapse button docked above the first icon: the
button's bottom edge sits 6px + 32px = 38px below the rail's top, so 44px
leaves an 6px gap before the first icon starts. */
body.sidebar-collapsed .sidebar-menu {
padding: 44px 4px 24px !important;
}
body.sidebar-collapsed .menu-team-toggle {
justify-content: center !important;
padding: 10px 0 !important;
color: var(--nav-side-text, #9899ac) !important;
border-radius: 999px !important;
width: 44px !important;
height: 44px !important;
margin: 4px auto !important;
}
body.sidebar-collapsed .menu-team-toggle.active {
background: var(--nav-active-bg) !important;
color: var(--nav-active-text) !important;
}
body.sidebar-collapsed .menu-team-icon {
width: 24px !important;
height: 24px !important;
font-size: 1.15rem !important;
margin: 0 auto !important;
}
body.sidebar-collapsed .menu-team-label,
body.sidebar-collapsed .menu-caret,
body.sidebar-collapsed .menu-subitems,
body.sidebar-collapsed .menu-link-label {
display: none !important;
}
body.sidebar-collapsed .sidebar-menu a {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 10px 0 !important;
text-align: center !important;
color: var(--nav-side-text, #9899ac) !important;
border-radius: 999px !important;
width: 44px !important;
height: 44px !important;
margin: 4px auto !important;
}
body.sidebar-collapsed .sidebar-menu a.active {
background: var(--nav-active-bg) !important;
color: var(--nav-active-text) !important;
}
body.sidebar-collapsed .sidebar-menu a .menu-link-icon {
margin-right: 0 !important;
font-size: 1.15rem !important;
}
.brand-mark {
display: inline-block;
width: 14px;
height: 14px;
background: var(--brand-accent);
border-radius: 3px;
transform: rotate(45deg);
}
.sidebar-menu {
list-style: none;
margin: 0;
padding: 12px;
/* min-height: 0 is required for a flex child to actually be allowed to
shrink/scroll instead of forcing its parent to grow. (The old
`position: relative; top: -30px` nudge here existed only to claw back
the oversized #sidebar-brand block's height - that block is gone now,
so the offset would just crop the first menu item.) */
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.sidebar-menu a,
.menu-team-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
margin-bottom: 2px;
color: var(--nav-side-text);
text-decoration: none;
background: none;
border: none;
border-radius: 12px;
text-align: left;
font-weight: 600;
font-size: 0.87rem;
cursor: pointer;
}
/* Hover deliberately does NOT use --nav-active-text: that variable is the
text colour for the *selected* item, which sits on the solid dark
--nav-active-bg pill, so it's near-white - unreadable against this light
--nav-hover-bg. Hover only deepens the background. */
.sidebar-menu a:hover,
.menu-team-toggle:hover {
background: var(--nav-hover-bg);
color: var(--nav-side-text);
}
/* Decorative icon before each team label - generic/neutral (not asserting
what any specific real menu category "means"), since menu_items/
menu_categories has no icon column to draw a real per-item icon from.
Flagging rather than inventing per-category icon assignments. */
.menu-team-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
background: transparent;
color: inherit;
font-size: 0.95rem;
flex-shrink: 0;
}
.menu-team-label {
flex: 1;
}
.menu-caret {
font-size: 0.7rem;
color: inherit;
opacity: 0.8;
transition: transform 0.15s ease;
}
.menu-team-toggle[aria-expanded="true"] .menu-caret {
transform: rotate(180deg);
}
.menu-subitems {
list-style: none;
margin: 4px 0 8px;
padding: 0;
background: none;
}
.menu-subitems a {
padding-left: 40px;
padding-top: 8px;
padding-bottom: 8px;
font-weight: 500;
font-size: 0.9rem;
position: relative;
}
/* Bullet marker before each sub-item label, matching the reference's small
dot markers. If a sub-item has a custom icon, we hide the dot. */
.menu-subitems a::before {
content: "";
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.6;
}
/* Sub-items carry their own icon (renderMenuLink always adds .has-icon), so
the bullet dot is hidden - but this rule used to also force padding-left
back to 22px, i.e. LESS than a top-level item's 16px+icon, which flattened
the hierarchy: a child like "Data Library" sat at the same indent as its
own parent "Control Center". Indent per depth instead, so nesting reads. */
.menu-subitems a.has-icon {
padding-left: 38px !important;
}
.menu-subitems .menu-subitems a.has-icon {
padding-left: 54px !important;
}
.menu-subitems .menu-subitems .menu-subitems a.has-icon {
padding-left: 70px !important;
}
/* A team nested inside another team: the extra