/* Risk/Control/Deviation dashboard hero/summary tiles, badges, compliance overview lists, related responsive breakpoints.
Split out of theme.css (original lines 443-1048) — 2026-08-18,
CSS @layer restructuring step 2 (Basecamp "Fra Fizzy-gjennomgang:
CSS-arkitektur"). Numeric filename prefix controls load order (see
app/helpers/application_helper.rb#theme_stylesheet_link_tag) —
files are concatenated in this exact original order, so no cascade
tie-break changes. */
@layer overrides {
.controls-page {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.controls-hero,
.controls-annex,
.controls-detail {
border: var(--card-border);
border-radius: var(--card-radius);
background: var(--card-bg);
}
.controls-hero {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
gap: var(--space-4);
padding: var(--space-5);
}
.ui-eyebrow {
margin: 0 0 0.25rem;
color: var(--text-500, #666);
font-size: var(--text-size-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.controls-lead {
margin: 0.75rem 0 0;
max-width: 60ch;
color: var(--text-700, #444);
font-size: var(--text-size-lg);
line-height: 1.65;
}
/* The lead column used to hold only .controls-lead's single sentence,
leaving most of .controls-hero's left side empty next to the taller
multi-tile status grid on the right — the "Totalt" figure moved in here
(see shared/_stats_hero.html.erb) to give it real content. */
.controls-hero__lead {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.controls-hero__total {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.controls-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.controls-summary__tile {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
border-radius: var(--card-radius);
background: var(--card-bg-muted);
border: var(--card-border);
}
/* Kept raw, not a --text-size-* token: a big stat number reads as a
small headline, not body/UI text — well above --text-size-xl's 1.05rem
ceiling, same reasoning as .controls-annex__count and
.compliance-overview-summary__value below. */
.controls-summary__value {
font-size: 1.8rem;
font-weight: 700;
line-height: 1;
}
.controls-summary__label {
color: var(--text-600, #666);
font-size: var(--text-size-base);
line-height: 1.4;
}
.controls-collections {
display: flex;
flex-direction: column;
gap: 1rem;
}
.controls-annex {
padding: var(--space-4);
}
.controls-annex__header,
.controls-detail__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.9rem;
}
.controls-annex__meta {
text-align: right;
}
/* .controls-detail__header's own justify-content: space-between only
right-aligns a lone child once there's a second one to space away
from — tasks/show.html.erb's completion toggle is the only thing in
its header row (no status badge equivalent for a plain task), so it
needs an explicit flex-end instead (Torleiv, 2026-08-20, "Style denne
siden at den er konsistent med stil på andre sider" — moving the
toggle from its old floating placement into this shared header idiom). */
.controls-detail__header--end {
justify-content: flex-end;
}
/* Torleiv, 17.09.2026 (#10313472039): «fullfør ✅ oppe til venstre». Den
sto til høyre etter 20.08.2026, da den ble flyttet inn i denne
header-raden fra en flytende plassering. Venstre er der man leser først,
og på en oppgave er «er den ferdig?» det første spørsmålet — ikke et
valg man leter etter i motsatt hjørne av det man nettopp leste. */
.controls-detail__header--start {
justify-content: flex-start;
}
/* sand_ui's .ui-badge sets width: fit-content with no white-space rule —
fit-content still clamps to whatever space the containing flex/grid row
actually has, so a badge sitting next to a long title (e.g. "Ikke
Godkjent" beside a long Risk title) gets squeezed narrower than its own
text and wraps mid-pill instead of just staying single-line and letting
the row take the width it needs.
Global rule (Torleiv, 2026-08-10): badge text should always read as
UPPERCASE, never mixed-case — one rule here covers every badge in the
app (Risk/Deviation/Control status, Document Utkast/Godkjent, "Ikke
Godkjent", etc.) regardless of how each i18n string happens to be
capitalized, so a new badge added later is correct automatically
without anyone remembering to uppercase its own translation string.
letter-spacing is the usual pairing for uppercase UI text — tightly-set
capitals read as cramped without it. */
.ui-badge {
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* Torleiv, 2026-08-13: "gjør alle tags litt mindre dominerende" — sand_ui's
own badge.css sizes every badge the same regardless of context
(--height-xs, --spaceing padding), which reads fine as a deliberate
status indicator (Risk/Control approval etc.) but too loud sitting
inline next to a module card's own title. A modest, app-wide reduction
in height/padding/font-size — not a color change, so the badge stays
just as legible/functional as a status signal, only visually quieter. */
.ui-badge {
height: 1.125rem;
padding-inline: 0.4rem;
font-size: 0.625rem;
}
/* Torleiv, 2026-08-13: "Under arbeid føles litt heavy" / "sjekk at tagger
er konsistente ... følger farger 'godkjent' i systemet". Root cause:
sand_ui's own badge.css pairs every other color's light background with
its dark text at the same brightness distance (red/green/blue all use
-200 background + -800 text) — yellow alone breaks that pattern with
-400 background + a --amber-950 text color that doesn't even exist as a
variable in this palette (falls back to plain black). That's what read
as "heavier": every other badge is a soft tint, yellow was a solid,
saturated fill. Realigned to the same -200/-800 pairing everything else
uses — same yellow hue, same weight as "Godkjent"/"Ikke godkjent"/etc.
Torleiv, 2026-08-13: still reported as less readable than the other
badges even after that fix — turned out the -200/-800 PATTERN was
right but --amber-800 itself isn't actually dark: sand_ui's red/blue/
green scales are generated from a shared HSL brightness formula where
every -800 stop sits at 20-27% lightness, but amber is a separate,
hand-picked Material-Design-style hex scale where -800 (#ff8f00) is a
vivid orange at ~50% lightness — nowhere near as dark. Measured the
actual WCAG contrast ratio against the amber-200 background (#ffe082):
--amber-800 only reaches 1.77:1, badly failing the 4.5:1 minimum for
body text, versus ~7-11:1 for the other three hues' own -800-on-200
pairing. A literal dark warm brown (not a sand_ui token — none of
amber's own named stops are dark enough) gets this to a real 9.3:1. */
.ui-badge[data-color="yellow"] {
--badge-color: #4d3000;
--badge-border: var(--amber-200);
--badge-bg: var(--amber-200);
}
/* Kept raw — see .controls-summary__value above. */
.controls-annex__count {
display: block;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
}
.controls-annex__label {
color: var(--text-600, #666);
font-size: var(--text-size-base);
}
.controls-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.controls-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-4);
align-items: start;
padding: var(--space-4);
border-radius: var(--card-radius);
background: var(--card-bg-muted);
border: var(--card-border);
color: inherit;
text-decoration: none;
transition: transform 0.15s ease;
}
.controls-row:hover {
transform: translateY(-1px);
}
.controls-row__body {
min-width: 0;
}
/* Handlingene i radens andre kolonne (#10411858577, 18.10.2026).
.controls-row er alt et tokolonners rutenett, så kolonnen finnes —
det som manglet var at innholdet i den skulle stå på linje framfor å
stables. Brukes av testregisterets funn, der en rad har både «Opprett
avvik» og «Rediger». */
.controls-row__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
}
.controls-row__title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.45rem 0.7rem;
}
.controls-row__number {
color: var(--signal-color);
font-size: var(--text-size-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.controls-row__name {
font-weight: 600;
line-height: 1.4;
}
/* Only .controls-row--task's own title is a real — every other
.controls-row usage makes the WHOLE row the link instead, so
color/underline reset is already covered by .controls-row's own
`color: inherit; text-decoration: none;`. This one needs its own copy,
plus a hover underline standing in for the row-lift hover feedback
.controls-row--task turns off (a checkbox sits right next to it, so
the whole row lifting on hover read as if the checkbox were about to
move too). */
a.controls-row__name {
color: inherit;
text-decoration: none;
}
a.controls-row__name:hover {
text-decoration: underline;
}
.controls-row__meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.8rem;
margin-top: 0.4rem;
color: var(--text-600, #666);
font-size: var(--text-size-base);
line-height: 1.45;
}
/* FORHÅNDSVISNING, IKKE HELE MERKNADEN (16.10.2026).
Merknaden rendres som ren tekst i raden (se controls/_list.html.erb
for hvorfor den ikke kan være rik), men den ble fortsatt vist i sin
helhet. Målt i favoas: median 270 tegn, lengste 2 295. Én slik rad
dytter resten av lista ut av syne, og da er lista ikke lenger noe man
skummer.
To linjer: nok til å kjenne igjen hva merknaden handler om, og til å
avgjøre om man skal åpne kontrollen. Hele teksten står på
kontrollens egen side, som raden lenker til.
-webkit-box er fortsatt den eneste formen line-clamp virker i på
tvers av nettlesere; de to -webkit-egenskapene hører sammen med den
og er ikke etterlatt prefiks. */
.controls-row__note {
color: var(--text-500, #777);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.controls-row__status {
padding-top: 0.1rem;
}
/* "Mine todoer" (tasks/index.html.erb) — a real checkbox instead of the
plain link .controls-row is everywhere else, so this variant swaps the
usual body/status two-column grid for checkbox/body instead (Torleiv,
2026-08-10: the list was unstyled, no checkbox, no source context). Not
a link itself (unlike every other .controls-row) since it now contains
an interactive checkbox — the title inside .controls-row__body is its
own instead. */
/* Third column added (Torleiv, 2026-08-12) for the assignee avatar group —
checkbox | body | avatars. auto keeps it only as wide as the avatars
actually need, same as the checkbox column. */
.controls-row--task {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
cursor: default;
}
.controls-row--task:hover {
transform: none;
}
.controls-row__checkbox {
display: flex;
}
/* justify-self: end (not just relying on the auto-width 3rd grid track)
— explicit right pin, per Torleiv 2026-08-12: "flytende helt til høyre",
in case the row grid's own default row height ever exceeds a single
line and centers this shorter column instead of pinning it. */
.controls-row__assignees {
display: flex;
align-items: center;
justify-self: end;
}
.controls-row__due--overdue {
color: var(--danger-color);
font-weight: 600;
}
/* signatures/_entries_list.html.erb's "Evidens" tab log — Torleiv,
follow-up on #10262462298: the .controls-row card-per-entry treatment
above reads fine for a handful of controls/risks, but got visibly
heavy once an evidence log's entry count grew ("slik det vises
nedenfor blir det for plasskrevende", with a screenshot). One line per
entry instead — border-bottom, no per-row card background — same
density as .auth-methods-list's own rows (08_auth_and_account_
settings.css), kept as its own class rather than reusing that one
since its grid columns (toggle-slot, status-dot) are specific to an
auth-methods list and don't apply here. */
.evidence-log {
display: flex;
flex-direction: column;
}
.evidence-log__row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-1) var(--space-4);
padding: var(--space-2) 0;
border-bottom: 1px solid color-mix(in srgb, var(--text-900) 6%, transparent);
font-size: var(--text-size-base);
}
.evidence-log__entry:last-child .evidence-log__row {
border-bottom: none;
}
/* Det frosne notatet (#10344196461). Sammenslått som standard: lista er
over 300 rader lang, og en instruksjon med sjekkliste i hver av dem
ville gjort den uleselig. Ligger utenfor radlenka, ikke inni — en
inni en splitter raden i tre. */
.evidence-log__snapshot {
padding: 0 0 var(--space-2);
font-size: var(--text-size-sm);
}
.evidence-log__snapshot > summary {
cursor: pointer;
color: color-mix(in srgb, var(--text-900) 60%, transparent);
}
.evidence-log__snapshot[open] > summary {
margin-bottom: var(--space-2);
}
.evidence-log__description {
min-width: 0;
}
.evidence-log__meta {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-3);
color: color-mix(in srgb, var(--text-900) 60%, transparent);
white-space: nowrap;
}
/* Typefilteret over loggen (Torleiv, 11.09.2026: «lag filter på typer
(avkrysningsbokser)»). En flytende rad, ikke et rutenett som
.system-settings__checkboxes: etikettene her er ett ord og varierer i
lengde, og antallet bokser følger hvilke typer som faktisk finnes i
loggen — et fast tokolonners rutenett ville gitt store hull. */
.evidence-log__types {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
padding-bottom: var(--space-3);
margin-bottom: var(--space-1);
border-bottom: 1px solid color-mix(in srgb, var(--text-900) 6%, transparent);
}
.evidence-log__type {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-size-sm);
cursor: pointer;
}
/* Tellingen er en opplysning, ikke en etikett — dempet, så blikket leser
typenavnene som en liste og tallene bare når det spør etter dem. */
.evidence-log__type-count {
color: var(--text-500, #666);
font-variant-numeric: tabular-nums;
}
/* Sits inside .controls-annex__section-header (space-between) alongside
the optional "open as own page" icon-link — grows to fill the row so
the icon stays pinned to the end. */
.evidence-log__search {
flex: 1;
margin: 0;
}
/* Basecamp #10271000481 (point 2 + 3), signatures/index.html.erb's own
standalone search field — distinct from .evidence-log__search above,
which is the compact ISMS-tab preview's plain input with no filter
attached.
Point 2: .ui-input (sand_ui/form.css) sets no background at all —
plain transparent, showing whatever's behind it. On THIS page that's
.page-frame's own background (--page-bg, which resolves to --ui-0 —
literally #fff), so the input was rendering white-on-white: a thin
bordered box with no fill contrast, reading as "blends into the page"
exactly as reported rather than a distinct search field. A literal
"white" background wouldn't fix this — the page is ALREADY white
(confirmed: --card-bg, the app's other "surface" token, is also
#fff) — so this reaches for --ui-50 instead, the same soft off-white
already used elsewhere purely to separate a surface from the page
behind it (e.g. .outer-background). Locally scoped to .evidence-
search__input only, not a change to .ui-input itself — that class
backs form fields everywhere in the app, and a global background
change there would be a much bigger, riskier change than what was
actually asked for here.
Point 3: .evidence-search wraps the input and the new person-filter