/* Risk/Control/Deviation dashboard hero/summary tiles, badges, compliance overview lists, related responsive breakpoints.
   Split out of stomn_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#stomn_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;
}

/* 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;
}

.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 <a> — 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;
}

.controls-row__note {
    color: var(--text-500, #777);
}

.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 <a> 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;
}

.controls-detail {
    padding: var(--space-5);
}

.controls-detail__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

/* .list-item (sand_ui) is a single-line flex ROW by design — fine for the
   simple one-line rows it was built for, but shared/_version_history.html.erb
   reuses it for a genuinely multi-line entry (date+author, then the change
   reason, then an approval badge), and the shared class's row layout was
   cramming all of that onto one line with no gap ("Torleiv ÅreskjoldImportert
   fra Basecamp..." reading as one run-on string). Stack this specific list's
   items back into a column instead of overriding the shared class itself. */
.controls-detail__versions .list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

/* Document's own compact mode (see _version_history.html.erb's compact
   local) — one row instead of the full list, since the document's own
   "Historikk" page already renders that same full list in full further
   down (see versions.html.erb). */
.controls-detail__versions-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-size-base);
}

.compliance-overview-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.compliance-overview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.compliance-overview-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;
}

.compliance-overview-lead {
    margin: 0.75rem 0 0;
    max-width: 60ch;
    color: var(--text-700, #444);
    font-size: var(--text-size-lg);
    line-height: 1.65;
}

/* Same reasoning as .controls-hero__lead/__total — the lead column used to
   hold only the eyebrow/title/intro block, leaving most of it empty next
   to the taller status-tile grid on the right. */
.compliance-overview-hero__lead {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.compliance-overview-hero__total {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.compliance-overview-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.compliance-overview-summary__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--card-radius);
    background: var(--card-bg-muted);
    border: var(--card-border);
}

/* Kept raw — see .controls-summary__value above. */
.compliance-overview-summary__value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.compliance-overview-summary__label {
    color: var(--text-600, #666);
    font-size: var(--text-size-base);
    line-height: 1.4;
}

.compliance-overview-empty {
    color: var(--text-600, #666);
    padding: var(--space-5);
    text-align: center;
}

.compliance-overview-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.compliance-overview-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;
}

.compliance-overview-row:hover {
    transform: translateY(-1px);
}

.compliance-overview-row__body {
    min-width: 0;
}

.compliance-overview-row__title {
    font-weight: 600;
    line-height: 1.4;
}

.compliance-overview-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;
}

.compliance-overview-row__status {
    padding-top: 0.1rem;
}

.people-invite-action--muted {
    color: rgba(28, 25, 20, 0.35);
    cursor: default;
    pointer-events: none;
}

.people-invite-action--error {
    color: var(--danger-color);
}

/* Long-form fields (a URL, free-text notes) span the full grid width
   instead of squeezing into the same column as short ones (Sannsynlighet,
   Status) — a fixed 2-column grid wrapping a whole paragraph or URL into a
   half-width cell reads as broken, not just cramped. */
.controls-detail__item--wide {
    grid-column: 1 / -1;
}

.controls-detail__item {
    padding: var(--space-4);
    border-radius: var(--card-radius);
    background: var(--card-bg-muted);
    border: var(--card-border);
}

/* Document metadata's own view block (document_metadata_controller.js)
   is a clickable [role="button"] wrapping the whole grid, not just the
   explicit "Rediger info" trigger — cursor/hover/focus feedback here so
   that reads as clickable rather than as a `<button>` that silently
   grew a plain-looking div around it. Scoped to [role="button"] rather
   than .document-metadata generally, since Control/Risk/Deviation's own
   view-edit blocks reuse this same __item/__grid markup without being
   click-to-edit at all. */
[data-document-metadata-target="view"][role="button"] {
    cursor: pointer;
    border-radius: var(--card-radius);
    transition: background 0.15s ease;
}

[data-document-metadata-target="view"][role="button"]:hover {
    background: rgba(28, 25, 20, 0.03);
}

[data-document-metadata-target="view"][role="button"]:focus-visible {
    outline: 2px solid var(--signal-color);
    outline-offset: 2px;
}

.controls-detail__label {
    margin-bottom: 0.35rem;
    color: var(--text-500, #666);
    font-size: var(--text-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.controls-detail__value {
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Wraps a .ui-file-meta card (sand_ui) in a plain link to open/download it
   (suppliers/show.html.erb's documentation evidence) — resets the
   anchor's own default blue/underline so the card's own styling reads
   through unchanged, matching a.controls-row__name's own reasoning for
   the same "the whole thing is a link" pattern. */
.controls-detail__file-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.controls-reference__link {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--signal-color-tint);
    color: var(--signal-color);
    font-weight: 600;
    text-decoration: none;
}

.controls-reference__link:hover {
    background: #d3e0ea;
    text-decoration: underline;
}

.controls-reference__separator {
    display: inline-block;
    width: 0.45rem;
}

@media (max-width: 900px) {
    /* Torleiv, 2026-08-17 (mobile audit, screenshot): .compliance-overview-hero
       (Våre tjenester) is the exact same minmax(0, 1.3fr) minmax(320px, 0.9fr)
       grid as .controls-hero — that fixed 320px right column never shrinks,
       so on a phone the left column got squeezed to almost nothing and its
       text wrapped one word per line. Missing from this list looks like an
       oversight when it was added, not a deliberate difference. */
    .controls-hero,
    .controls-detail__grid,
    .compliance-overview-hero {
        grid-template-columns: 1fr;
    }

    .controls-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .controls-row {
        grid-template-columns: 1fr;
    }

    .controls-annex__header,
    .controls-detail__header {
        flex-direction: column;
    }

    .controls-annex__meta {
        text-align: left;
    }

    .controls-summary {
        grid-template-columns: 1fr;
    }
}


} /* @layer overrides */