/*
 * VeriSec's whole stylesheet. Extracted from base.html.twig, where it was
 * inlined into every single response (~34KB uncompressed, re-sent on every
 * page view and impossible for the browser to cache). Served statically by
 * nginx with a long max-age, cache-busted by mtime - see
 * App\Platform\Asset\FileModificationTimeVersionStrategy.
 */
:root {
    --bg: #f5f6f8; --panel: #ffffff; --border: #dfe3e8; --text: #1f2933;
    --muted: #616e7c; --brand: #2563eb; --brand-dark: #111827;
    --danger: #b3261e; --ok: #1b6e3c; --warn: #b7791e;
    --badge-bg: #eef2f7; --flash-success-bg: #e5f5ea; --flash-success-border: #b7e0c4;
    --flash-error-bg: #fbe9e7; --flash-error-border: #f2c0bc; --checkbox-list-bg: #ffffff;
    --sidebar-w: 220px; --sidebar-w-collapsed: 64px;
    /* Logo/brand color — deliberately not redefined for dark mode, so the mark matches favicon.svg in both themes. */
    --logo: #2563eb;
    --topbar-bg: #ffffff; --topbar-border: var(--border); --topbar-control-border: var(--border);
    --topbar-fg: var(--text); --topbar-muted: var(--muted);
    --topbar-hover-bg: rgba(0,0,0,0.05); --topbar-pill-bg: #eef1f5;
    --topbar-dropdown-bg: var(--panel); --topbar-dropdown-border: var(--border);
    --topbar-dropdown-fg: var(--text); --topbar-dropdown-hover: var(--bg);
    --avatar-bg: color-mix(in srgb, var(--brand) 16%, transparent); --avatar-fg: var(--brand);
    --impersonation-bg: var(--brand-dark); --impersonation-fg: #ffffff;
    --shadow-popover: 0 8px 24px rgba(0,0,0,0.15);
    --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08);
    --header-link: color-mix(in srgb, var(--brand) 70%, black);
    /* Single source of truth for every control in a list table's filter row
       (text/select inputs, the status checkbox toggle, the date-range box) —
       change here to resize them all consistently instead of drifting apart. */
    --filter-ctl-py: 0.35rem; --filter-ctl-px: 0.6rem; --filter-ctl-font: 0.85rem; --filter-ctl-radius: 5px;
    /* Spacing scale backing the layout utility classes below (and any new
       component CSS) — pick from these instead of another one-off rem value. */
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
}
html[data-theme="dark"] {
    /* Left bar (--brand-dark) is darkened below --bg so it recedes rather than
       reading as a washed-out lighter strip — every other dark-mode surface is
       retinted to sit in the same navy family instead of a separate neutral gray.
       The topbar uses --panel + a bottom border (like light mode's white bar)
       rather than --brand-dark, which made it merge into the left bar.
       color-scheme switches the browser's own scrollbars and form controls to dark too. */
    color-scheme: dark;
    --bg: #0a0f1a; --panel: #111a2e; --border: #223050; --text: #e6e9ee;
    --muted: #93a1bd; --brand: #5b93e0; --brand-dark: #05080f;
    --danger: #e5675f; --ok: #4caf7d; --warn: #d9a441;
    --badge-bg: #1a2540; --flash-success-bg: #163021; --flash-success-border: #1f4a34;
    --flash-error-bg: #3a1f1c; --flash-error-border: #5c2c27; --checkbox-list-bg: #0a0f1a;
    --topbar-bg: var(--panel); --topbar-border: var(--border); --topbar-control-border: rgba(255,255,255,0.35);
    --topbar-fg: #ffffff; --topbar-muted: rgba(255,255,255,0.75);
    --topbar-hover-bg: rgba(255,255,255,0.12); --topbar-pill-bg: rgba(255,255,255,0.1);
    --topbar-dropdown-bg: var(--panel); --topbar-dropdown-border: var(--border);
    --topbar-dropdown-fg: #ffffff; --topbar-dropdown-hover: rgba(255,255,255,0.12);
    --avatar-bg: rgba(255,255,255,0.25); --avatar-fg: #ffffff;
    --impersonation-bg: #ffffff; --impersonation-fg: var(--brand-dark);
    --header-link: color-mix(in srgb, var(--brand) 65%, var(--muted));
}
* { box-sizing: border-box; }
/* Browsers don't inherit the page font into <button> (it defaults to the
   OS control font) — without this, an icon inside a <button> (e.g. a
   delete action wrapped in a <form>) sits at a visibly different
   baseline than the same icon inside a plain <a class="btn">. */
button { font-family: inherit; font-size: inherit; line-height: inherit; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
/* A <button> that reads as a link — for POST-only actions (e.g. logout) that still sit in running text. */
/* Keyboard focus ring (see app.js's region navigation) — mouse clicks don't show it.
   The sidebar is brand-dark, so its ring is white; the bar holding focus gets an edge highlight. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.sidebar a:focus-visible, .sidebar button:focus-visible { outline-color: #fff; outline-offset: -2px; }
.sidebar:has(:focus-visible) { box-shadow: inset -3px 0 0 rgba(255,255,255,0.35); }
header.topbar:has(:focus-visible) { box-shadow: inset 0 -2px 0 var(--brand); }
/* A region focused as a whole (nothing focusable inside) shows no ring. */
.sidebar:focus-visible, header.topbar:focus-visible, main:focus-visible { outline: none; }
/* A table row reached with the arrow keys. */
tbody tr[tabindex]:focus-visible, tbody tr:has(:focus-visible) { outline: none; }
tbody tr[tabindex]:focus-visible > *, tbody tr:has(:focus-visible) > * { background: color-mix(in srgb, var(--brand) 8%, transparent); box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand); }
tbody tr[tabindex]:focus-visible > :first-child, tbody tr:has(:focus-visible) > :first-child { box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand), inset 2px 0 0 var(--brand); border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
tbody tr[tabindex]:focus-visible > :last-child, tbody tr:has(:focus-visible) > :last-child { box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand), inset -2px 0 0 var(--brand); border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
tbody tr[tabindex]:focus-visible > :first-child:last-child, tbody tr:has(:focus-visible) > :first-child:last-child { box-shadow: inset 0 0 0 2px var(--brand); }
.date-range-segment:focus-visible, th[data-sortable]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: 4px; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 20;
    background: var(--brand-dark); color: #fff; display: flex; flex-direction: column;
    overflow: hidden; transition: width 0.15s ease;
}
html[data-theme="dark"] .sidebar { border-right: 1px solid var(--border); }
.sidebar a { color: #fff; }
.sidebar-brand { padding: 1rem; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; }
.sidebar-icon.sidebar-brand-mark { width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--logo); color: #fff; }
.sidebar-icon.sidebar-brand-mark .icon { width: 1.2rem; height: 1.2rem; }
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-brand-name { font-size: 1.05rem; font-weight: 700; }
.sidebar-brand-tagline { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; color: var(--logo); }
.sidebar-toggle {
    background: none; border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 6px;
    padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.95rem; line-height: 1; margin: 0 1rem 0.75rem;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.12); }
/* The bar is dark in both themes: color-scheme makes the browser draw its native dark scrollbar instead of the light one.
   Thin, with its gutter always reserved, so the items don't shift when it appears. */
.sidebar-nav {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;
    color-scheme: dark; scrollbar-width: thin; scrollbar-gutter: stable;
}
.sidebar-nav a { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 1rem; opacity: 0.9; white-space: nowrap; position: relative; }
.sidebar-nav a:hover { opacity: 1; text-decoration: none; background: rgba(255,255,255,0.1); }
.sidebar-nav a.active { opacity: 1; font-weight: 700; background: rgba(255,255,255,0.08); }
.sidebar-nav a.active::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--brand);
}
/* A label longer than the sidebar (e.g. PL "Podmioty przetwarzające") wraps onto a second line instead of being clipped. */
.sidebar-nav .sidebar-label { white-space: normal; min-width: 0; line-height: 1.25; }
.sidebar-icon { width: 1.35rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-icon .icon { width: 1.15rem; height: 1.15rem; }
.sidebar-nav-bottom { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.15); }
/* Sidebar section heading (Superadmin / Modules / Administration); collapsed, it's just a divider. */
.sidebar-group-label { padding: 0.9rem 1rem 0.3rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; white-space: nowrap; }
.sidebar-nav > .sidebar-group-label:not(:first-child) { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 0.4rem; }
html[data-sidebar="collapsed"] .sidebar-group-label { padding: 0; margin: 0.4rem 0.9rem; border-top: 1px solid rgba(255,255,255,0.25); }
html[data-sidebar="collapsed"] .sidebar-nav > .sidebar-group-label:first-child { display: none; }
.sidebar-footer { padding: 0.75rem 1rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.7rem; line-height: 1.5; }
.sidebar-signed-in, .sidebar-version { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-version { color: var(--brand); }
html[data-sidebar="collapsed"] .sidebar-footer { display: none; }
html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-w-collapsed); }
html[data-sidebar="collapsed"] .sidebar-label { display: none; }
html[data-sidebar="collapsed"] .content-area { margin-left: var(--sidebar-w-collapsed); }
.content-area { margin-left: var(--sidebar-w); transition: margin-left 0.15s ease; min-height: 100vh; display: flex; flex-direction: column; }
header.topbar {
    background: var(--topbar-bg); color: var(--topbar-fg); padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--topbar-border);
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
header.topbar a { color: var(--topbar-fg); }
/* A long trail wraps within its own column (min-width: 0) instead of pushing
   .topbar-right onto a line of its own below it. */
.breadcrumbs { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.breadcrumbs > * { min-width: 0; overflow-wrap: anywhere; }
.breadcrumbs a { color: var(--topbar-muted); }
.breadcrumbs a:hover { color: var(--topbar-fg); }
.breadcrumbs .crumb-sep { color: var(--topbar-muted); opacity: 0.7; }
.breadcrumbs .crumb-current { font-weight: 700; color: var(--brand); }
.topbar-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.topbar-controls { display: flex; align-items: center; gap: 0.4rem; }
.user-menu { position: relative; }
.user-menu-toggle {
    display: flex; align-items: center; gap: 0.55rem; background: none; border: none;
    color: var(--topbar-fg); font: inherit; cursor: pointer; padding: 0.25rem 0.6rem; border-radius: 6px; white-space: nowrap;
}
.user-menu-toggle:hover { background: var(--topbar-hover-bg); }
.user-menu.impersonating .user-menu-toggle { background: var(--impersonation-bg); color: var(--impersonation-fg); }
.user-menu.impersonating .user-menu-toggle:hover { filter: brightness(0.92); }
.user-menu.impersonating .user-avatar { background: color-mix(in srgb, currentColor 22%, transparent); color: inherit; }
.user-menu.impersonating .user-position { color: inherit; opacity: 0.75; }
.user-avatar {
    width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-fg);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
    flex-shrink: 0; overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.25; }
.user-name { font-size: 0.9rem; }
.user-position { font-size: 0.7rem; color: var(--topbar-muted); }
.user-menu-dropdown {
    display: none; flex-direction: column; position: absolute; top: 100%; right: 0; margin-top: 0.35rem;
    background: var(--topbar-dropdown-bg); border: 1px solid var(--topbar-dropdown-border); border-radius: 6px;
    padding: 0.35rem; white-space: nowrap; z-index: 30; min-width: 100%; box-shadow: var(--shadow-popover);
}
.user-menu-dropdown a, .user-menu-dropdown button { color: var(--topbar-dropdown-fg); padding: 0.4rem 0.6rem; border-radius: 4px; }
.user-menu-dropdown form { display: contents; }
.user-menu-dropdown button { background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: var(--topbar-dropdown-hover); text-decoration: none; }
.user-menu.expanded .user-menu-dropdown { display: flex; }
{# Shared height so language/theme/notification sit flush — .lang-toggle's
   text glyph is shorter than the 1.05rem icons the other two use, so equal
   vertical padding alone left it visibly shorter. #}
.lang-toggle, .theme-toggle, .notif-bell-toggle { height: 2rem; box-sizing: border-box; }
.lang-toggle {
    background: none; border: 1px solid var(--topbar-control-border); color: var(--topbar-fg);
    border-radius: 6px; padding: 0 0.6rem; line-height: 1; font-size: 0.8rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.lang-toggle:hover { background: var(--topbar-hover-bg); text-decoration: none; }
.theme-toggle {
    background: none; border: 1px solid var(--topbar-control-border); color: var(--topbar-fg); border-radius: 6px;
    padding: 0 0.35rem; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { background: var(--topbar-hover-bg); }
.theme-toggle .icon-moon, .theme-toggle .icon-sun { display: inline-flex; }
.theme-toggle .icon { width: 1.05rem; height: 1.05rem; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; }
.notif-bell { position: relative; display: flex; align-items: center; }
.notif-bell-toggle {
    position: relative; background: none; border: 1px solid var(--topbar-control-border); color: var(--topbar-fg);
    border-radius: 6px; padding: 0 0.35rem; cursor: pointer; line-height: 1; display: inline-flex;
    align-items: center; justify-content: center;
}
.notif-bell-toggle:hover { background: var(--topbar-hover-bg); }
.notif-bell-toggle .icon { width: 1.05rem; height: 1.05rem; }
.notif-badge {
    position: absolute; top: -0.3rem; right: -0.3rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem;
    border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.notif-bell-dropdown {
    display: none; flex-direction: column; position: absolute; top: 100%; right: 0; margin-top: 0.35rem;
    background: var(--topbar-dropdown-bg); border: 1px solid var(--topbar-dropdown-border); border-radius: 6px;
    padding: 0.35rem; white-space: normal; z-index: 30; min-width: 320px; max-width: 380px;
    box-shadow: var(--shadow-popover);
}
.notif-bell.expanded .notif-bell-dropdown { display: flex; }
.notif-bell-dropdown a { color: var(--topbar-dropdown-fg); padding: 0.5rem 0.6rem; border-radius: 4px; display: block; }
.notif-bell-dropdown a:hover { background: var(--topbar-dropdown-hover); text-decoration: none; }
.notif-bell-dropdown .notif-item.unread { font-weight: 600; }
.notif-bell-dropdown .notif-item-time { display: block; font-size: 0.75rem; font-weight: 400; color: var(--topbar-muted); }
.notif-bell-dropdown .notif-item-client { display: block; font-size: 0.75rem; font-weight: 400; color: var(--topbar-muted); font-style: italic; }
.notif-bell-dropdown .notif-empty { padding: 0.5rem 0.6rem; color: var(--topbar-muted); font-size: 0.9rem; }
.notif-bell-dropdown .notif-see-all { text-align: center; font-size: 0.85rem; border-top: 1px solid var(--topbar-dropdown-border); margin-top: 0.25rem; padding-top: 0.5rem; }
main { margin: 1rem; box-sizing: border-box; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
/* separate (not collapse) so a focused row's ring can have rounded corners; cells only carry a bottom border, so it looks the same. */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
.detail-table th { width: 220px; text-align: left; vertical-align: top; padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--border); font-weight: 600; }
.detail-table td { padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.compact-table th, .compact-table td { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
th { color: var(--muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }
/* A sortable column header is still a link, but it should read as part of
   the (inactive-styled) header row rather than as a normal blue hyperlink —
   only the hover state hints that it's clickable, and never with an underline. */
th a { color: var(--muted); text-decoration: none; }
th a:hover { color: var(--header-link); text-decoration: none; }
/* Progressive enhancement for any <table class="data-table"> — see the
   script at the bottom of this file. Every column sorts on header click
   unless the header carries data-sort="none" (e.g. an Actions column);
   a filter row is injected under the header row for the same columns. */
table.data-table th[data-sortable] { cursor: pointer; user-select: none; white-space: nowrap; }
table.data-table th[data-sortable]:hover { color: var(--text); }
table.data-table th[data-sortable] .sort-arrow { display: inline-block; width: 0.9em; opacity: 0.35; }
table.data-table th[data-sortable][data-sort-dir] .sort-arrow { opacity: 1; }
table.data-table .data-table-filter-row th {
    padding: 0.3rem 0.75rem; border-bottom: 1px solid var(--border); font-weight: 400;
    text-transform: none; background: var(--bg);
}
table.data-table .data-table-filter-input, table.data-table .data-table-filter-select {
    width: 100%; box-sizing: border-box; padding: var(--filter-ctl-py) var(--filter-ctl-px); border: 1px solid var(--border);
    border-radius: var(--filter-ctl-radius); font-size: var(--filter-ctl-font); background: var(--panel); color: var(--text);
}
table.data-table .data-table-filter-input:focus, table.data-table .data-table-filter-select:focus {
    outline: none; border-color: var(--brand);
}
table.data-table .data-table-empty-notice { padding: 0.75rem; color: var(--muted); font-size: 0.9rem; }
/* Checkbox-list variant of the filter row's <select> — lets 0, 1, or several
   values be picked at once (an OR match), instead of exactly one. */
table.data-table .data-table-filter-multiselect { position: relative; }
table.data-table .data-table-filter-multiselect-toggle {
    width: 100%; box-sizing: border-box; padding: var(--filter-ctl-py) var(--filter-ctl-px); border: 1px solid var(--border);
    border-radius: var(--filter-ctl-radius); font-size: var(--filter-ctl-font); background: var(--panel); color: var(--text);
    text-align: left; cursor: pointer;
}
table.data-table .data-table-filter-multiselect-toggle:focus { outline: none; border-color: var(--brand); }
table.data-table .data-table-filter-multiselect-menu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 0.25rem;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow-popover); padding: 0.4rem; min-width: 170px; max-height: 220px; overflow-y: auto;
}
table.data-table .data-table-filter-multiselect-menu.open { display: block; }
table.data-table .data-table-filter-multiselect-menu label {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.3rem; font-size: 0.85rem;
    font-weight: 400; text-transform: none; cursor: pointer; border-radius: 4px; white-space: nowrap;
}
table.data-table .data-table-filter-multiselect-menu label:hover { background: var(--bg); }
.btn { display: inline-block; background: var(--brand); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.95rem; }
.btn:hover { background: color-mix(in srgb, var(--brand) 82%, black); text-decoration: none; }
.btn.danger { background: var(--danger); }
.btn.btn-dark { background: color-mix(in srgb, var(--brand) 70%, black); }
.btn.btn-dark:hover { background: color-mix(in srgb, var(--brand) 55%, black); }
.btn.btn-save { background: #16a34a; }
/* A lower button, for an inline add action under a list (e.g. +Add task). */
.btn.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.85rem; white-space: nowrap; }
.btn.btn-save:hover { background: color-mix(in srgb, #16a34a 82%, black); }
.btn.btn-clear { background: #c62a49; }
.btn.btn-clear:hover { background: color-mix(in srgb, #c62a49 82%, black); }
.btn.btn-outline {
    display: inline-flex; align-items: center; gap: 0.45rem; background: var(--panel);
    color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); font-weight: 600;
}
.btn.btn-outline:hover { background: color-mix(in srgb, var(--brand) 8%, var(--panel)); }
.btn.btn-outline .icon { width: 0.95rem; height: 0.95rem; }
/* A <summary class="btn btn-outline"> toggling a collapsed section (e.g. Change history) — strip the native disclosure triangle so it reads as a plain button, replaced by a chevron that flips with the <details> open state. */
summary.btn { list-style: none; width: fit-content; }
summary.btn::-webkit-details-marker { display: none; }
summary.btn::marker { content: ''; }
summary.btn::after { content: '▾'; margin-left: 0.4rem; display: inline-block; transition: transform 0.15s ease; }
details[open] > summary.btn::after { transform: rotate(180deg); }
{# Fixed overlay, not part of the normal document flow — a flash used to sit
   inline at the top of <main>, pushing the page's own content (e.g. a
   data-table right below it) down every time one appeared. #}
.toast-container {
    position: fixed; top: 1rem; right: 1rem; z-index: 2000;
    display: flex; flex-direction: column; gap: 0.5rem; max-width: 360px;
}
.flash {
    padding: 0.75rem 1rem; border-radius: 6px; box-shadow: var(--shadow-popover);
    transition: opacity 0.3s ease;
}
.flash.success { background: var(--flash-success-bg); color: var(--ok); border: 1px solid var(--flash-success-border); }
.flash.error { background: var(--flash-error-bg); color: var(--danger); border: 1px solid var(--flash-error-border); }
/* "Session changed in another tab" banner (see app.js) — stays until reloaded,
   and shakes when a blocked submit is attempted. */
.session-stale { display: flex; align-items: center; gap: 0.75rem; }
.session-stale .btn { flex-shrink: 0; }
.session-stale-nudge { animation: session-stale-nudge 0.3s ease; }
@keyframes session-stale-nudge {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
form > div, form .field-group > div { margin-bottom: 1.25rem; }
form label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.9rem; }
/* Symfony's default form theme already puts a "required" class on every
   required field's label (form_div_layout.html.twig) - this is the only
   place that needs to turn it into a visible marker. */
form label.required::after { content: " *"; color: var(--danger); }
form input[type=text], form input[type=email], form input[type=password], form input[type=time], form input[type=number], form textarea, form select {
    width: 100%; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem;
    background: var(--panel); color: var(--text);
}
form input:focus, form textarea:focus, form select:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
/* A value shown for context but owned elsewhere (e.g. the authorization
   form's Position, set on the employee) — reads as not editable here. */
form input[readonly] { background: var(--bg); color: var(--muted); cursor: default; }
form input[readonly]:focus { border-color: var(--border); box-shadow: none; }
form button[type=submit] { margin-top: 0.5rem; }
/* The rule above is for a form's own trailing Save button — it also
   unintentionally caught the tiny single-button <form> that wraps an
   icon-button delete action inline in an .actions row, pushing it
   down relative to its <a> siblings instead of sitting level with them. */
.actions button[type=submit] { margin-top: 0; }
.actions { display: flex; align-items: center; gap: 0.5rem; }
/* A row_actions() cell (see _macros.html.twig): left-justified and tighter
   than the default .actions gap, so the Actions column stays as narrow as
   its 4 fixed icon-button slots need, not the wider spacing a detail-header
   or form's Save/Cancel .actions bar wants. */
td .actions { justify-content: flex-start; gap: 0.25rem; }
tr.search-hidden { display: none !important; }
/* The dropdown structure behind any [data-client-actions-toggle] button — the
   clients list's per-row "switch context" menu and the sidebar's "Switch user"
   menu both share it, so it lives here instead of in either page. */
.client-actions { position: relative; display: inline-flex; }
.client-actions-toggle[aria-expanded="true"] { background: var(--bg); color: var(--text); }
.client-actions-dropdown {
    display: flex; flex-direction: column; position: fixed; z-index: 1000; min-width: 220px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.35rem;
    box-shadow: var(--shadow-popover);
}
.client-actions-dropdown[hidden] { display: none; }
.client-actions-dropdown a, .client-actions-dropdown form > button { padding: 0.4rem 0.6rem; border-radius: 4px; white-space: nowrap; color: var(--text); }
.client-actions-dropdown form { display: contents; }
.client-actions-dropdown form > button { background: none; border: none; font: inherit; text-align: left; cursor: pointer; }
.client-actions-dropdown a:hover, .client-actions-dropdown form > button:hover { background: var(--bg); text-decoration: none; }
.client-actions-group-label {
    padding: 0.35rem 0.6rem 0.15rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    color: var(--muted); letter-spacing: 0.04em;
}
.client-actions-group-label:not(:first-child) { margin-top: 0.25rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.client-actions-submenu { position: relative; }
.client-actions-subtoggle {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%;
    background: none; border: none; padding: 0.4rem 0.6rem; border-radius: 4px; font: inherit;
    color: var(--text); text-align: left; cursor: pointer;
}
.client-actions-subtoggle:hover, .client-actions-subtoggle[aria-expanded="true"] { background: var(--bg); }
.client-actions-submenu-arrow { color: var(--muted); }
.sidebar-switch-user.client-actions { display: flex; width: 100%; }
.sidebar-switch-user .client-actions-toggle {
    display: flex; align-items: center; gap: 0.65rem; width: 100%; background: none; border: none;
    padding: 0.6rem 1rem; font-size: 1rem; font-family: inherit; color: #fff; opacity: 0.9;
    white-space: nowrap; text-align: left; cursor: pointer;
}
.sidebar-switch-user .client-actions-toggle:hover,
.sidebar-switch-user .client-actions-toggle[aria-expanded="true"] { opacity: 1; background: rgba(255,255,255,0.1); }
/* Compact checkbox-group table-header filter (see m.checkbox_filter()) — a
   table's filter-row <th> is otherwise cramped for two-plus plain checkboxes. */
.status-filter { width: 100%; }
.status-filter-toggle {
    width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
    gap: 0.4rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--filter-ctl-radius);
    padding: var(--filter-ctl-py) var(--filter-ctl-px); font-size: var(--filter-ctl-font); color: var(--text); cursor: pointer; text-align: left;
}
/* Plain text/select filters in a list table's header row (see
   platform/_list_table.html.twig) — sized to match .status-filter-toggle and
   .date-range-box below instead of inheriting the larger full-form control size. */
thead .list-filter-input, thead .list-filter-select {
    width: 100%; box-sizing: border-box; padding: var(--filter-ctl-py) var(--filter-ctl-px);
    border: 1px solid var(--border); border-radius: var(--filter-ctl-radius); font-size: var(--filter-ctl-font);
    background: var(--panel); color: var(--text);
}
.status-filter-toggle:hover { background: var(--bg); }
.status-filter-caret { color: var(--muted); font-size: 0.65rem; }
.status-filter-dropdown { min-width: 140px; }
.status-filter-option {
    display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.6rem;
    font-weight: 400; white-space: nowrap; border-radius: 4px; cursor: pointer;
}
.status-filter-option:hover { background: var(--bg); }
.status-filter-option input { width: auto; margin: 0; }
/* Segmented toggles: ✓ / ✕, one or both lit (m.tristate_filter()), and the multi-toggle with several lit at once (m.switch_filter()). */
.tristate-filter, .switch-filter {
    display: inline-flex; border: 1px solid var(--border); border-radius: var(--filter-ctl-radius);
    background: var(--panel); overflow: hidden;
}
.tristate-filter-option, .switch-filter-option { margin: 0; font-weight: 400; cursor: pointer; }
.tristate-filter-option + .tristate-filter-option, .switch-filter-option + .switch-filter-option { border-left: 1px solid var(--border); }
.tristate-filter-option input, .switch-filter-option input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.tristate-filter-option span, .switch-filter-option span {
    display: block; min-width: 1.1rem; text-align: center; padding: var(--filter-ctl-py) 0.5rem;
    font-size: var(--filter-ctl-font); line-height: 1.25; color: var(--muted); white-space: nowrap;
}
.tristate-filter-option span { padding-left: 0.4rem; padding-right: 0.4rem; }
.tristate-filter-option:hover span, .switch-filter-option:hover span { background: var(--bg); color: var(--text); }
.tristate-filter-option input:checked + span, .switch-filter-option input:checked + span { font-weight: 600; }
.tristate-filter-1 input:checked + span, .switch-filter-success input:checked + span { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.tristate-filter-0 input:checked + span, .switch-filter-neutral input:checked + span { background: var(--badge-bg); color: var(--text); }
.switch-filter-progress input:checked + span { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.switch-filter-muted input:checked + span { background: var(--badge-bg); color: var(--muted); }
.tristate-filter-option input:focus-visible + span, .switch-filter-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Segmented single-select for a form's enum field (m.choice_switch()) — the
   switch-filter look at form-control size, the checked option in its
   status_badge() colour. .choice-switch-row puts several side by side. */
.choice-switch-row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.choice-switch { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); overflow: hidden; }
form label.choice-switch-option { display: block; margin: 0; font-weight: 400; cursor: pointer; }
.choice-switch-option + .choice-switch-option { border-left: 1px solid var(--border); }
.choice-switch-option input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.choice-switch-option span { display: block; padding: 0.55rem 0.8rem; font-size: 0.9rem; line-height: 1.25; color: var(--muted); white-space: nowrap; }
.choice-switch-option:hover span { background: var(--bg); color: var(--text); }
.choice-switch-option input:checked + span { font-weight: 600; }
.choice-switch-neutral input:checked + span, .choice-switch-muted input:checked + span { background: var(--badge-bg); color: var(--text); }
.choice-switch-progress input:checked + span { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.choice-switch-success input:checked + span { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.choice-switch-warn input:checked + span { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.choice-switch-danger input:checked + span { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.choice-switch-critical input:checked + span { background: var(--danger); color: #fff; }
.choice-switch-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -2px; }
.filter-bar { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.25rem; }
/* Always-visible short-label checkbox filter (see the 'inline-checkbox' type
   in platform/_list_table.html.twig) — e.g. the risk catalog's C/I/A category
   filter. Sized off the same --filter-ctl-* tokens as the other filter-row
   controls so it doesn't drift out of step with them. */
.inline-checkbox-filter { display: flex; gap: 0.35rem; }
.inline-checkbox-filter-option {
    display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; font-weight: 600;
    padding: var(--filter-ctl-py) var(--filter-ctl-px); font-size: var(--filter-ctl-font);
    border: 1px solid var(--border); border-radius: var(--filter-ctl-radius); background: var(--panel); color: var(--text);
}
.inline-checkbox-filter-option input { width: auto; margin: 0; }
.inline-checkbox-filter-option:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--panel)); color: var(--brand); }
.btn-icon {
    width: 1.85rem; height: 1.85rem; padding: 0; display: inline-flex; align-items: center;
    justify-content: center; line-height: 1; vertical-align: middle;
}
.btn-icon .icon { width: 0.95rem; height: 0.95rem; }
.btn.btn-icon-muted { background: none; color: var(--muted); border: 1px solid var(--border); }
.btn.btn-icon-muted:hover { background: var(--bg); color: var(--text); }
.btn.btn-icon-muted.btn-icon-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: var(--danger); }
/* Reserves a row_actions() slot's width/height when that action isn't
   available for a row, so a row with fewer buttons than its table
   neighbours still lines up under the same column position as the rest. */
.btn-icon-placeholder { visibility: hidden; border: none; background: none; pointer-events: none; }
/* Dashboard's welcome banner (see platform/dashboard/index.html.twig) — a
   plain h1+.muted looked identical to every other page header, giving the
   dashboard's own landing page no visual weight of its own. */
.dashboard-header { padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.dashboard-header h1 { margin: 0 0 0.35rem; font-size: 1.75rem; letter-spacing: -0.01em; }
.dashboard-header .muted { font-size: 0.95rem; }
/* A form page's title row with its record-level Active switch on the right
   (see m.form_header()/m.active_switch()) — status belongs with the record's
   name, not trailing after its last field. */
.form-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.form-header h1 { margin: 0; }
label.switch, form label.switch { display: inline-flex; font-weight: 600; font-size: 0.9rem; align-items: center; gap: var(--space-2); margin: 0; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch-track { position: relative; flex-shrink: 0; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--border); transition: background 0.15s ease; }
.switch-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px);
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s ease;
}
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::after { transform: translateX(1rem); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--brand); outline-offset: 2px; }
label.switch.is-disabled { cursor: default; opacity: 0.6; }
/* Threat catalog Global switch (threat_catalog/_fields.html.twig). */
.scope-toggle { margin: 0.4rem 0 1rem; }
.scope-toggle .muted { margin: 0.35rem 0 0; }
.nav-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.nav-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem;
    display: block; transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.nav-card:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--shadow-card-hover); }
.nav-card.disabled { opacity: 0.55; }
.nav-card h3 { margin: 0; color: var(--text); }
.module-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
/* Icon and title on one row, description below across the full width (from under
   the icon), so it starts at the same spot in every card. */
.module-card {
    display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 0.85rem; row-gap: 0.75rem; align-items: center;
    align-content: start; background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 1.25rem; transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.module-card:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--shadow-card-hover); }
.module-card-icon {
    width: 2.75rem; height: 2.75rem; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); flex-shrink: 0;
}
.module-card-icon .icon { width: 1.35rem; height: 1.35rem; }
.module-card h3 { margin: 0; font-size: 1rem; color: var(--text); }
.module-card p { margin: 0; grid-column: 1 / -1; align-self: start; }
.muted { color: var(--muted); font-size: 0.9rem; }
.status-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background: var(--badge-bg); }
.copy-id { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.copy-id:hover { text-decoration: underline dotted; }
.inspector-badge { display: inline-flex; vertical-align: middle; margin-left: var(--space-2); color: var(--brand); }
.inspector-badge .icon { display: block; }
.status-badge-active, .status-badge-inactive { font-size: 0.75rem; font-weight: 600; }
/* Semantic color tiers for m.status_badge() — one per lifecycle stage/CRUD action, not per literal value (see the macro's `tiers` map). */
.status-badge-inactive, .status-badge-neutral { background: var(--badge-bg); color: var(--muted); }
.status-badge-progress { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.status-badge-active, .status-badge-success { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.status-badge-muted { background: var(--badge-bg); color: var(--muted); opacity: 0.75; }
.status-badge-warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.status-badge-danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.status-badge-critical { background: var(--danger); color: #fff; }
/* Single-letter CIA badges (see m.cia_badges()) — one color per pillar, same tint idiom as .status-badge. */
.cia-badge {
    display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
    border-radius: 6px; font-size: 0.75rem; font-weight: 700; margin-right: 0.25rem;
}
.cia-badge-confidentiality, .cia-badge-integrity, .cia-badge-availability {
    background: color-mix(in srgb, var(--brand) 8%, var(--bg)); color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
}
.risk-level-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
.risk-level-low { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.risk-level-medium { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.risk-level-high { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.risk-level-critical { background: var(--danger); color: #fff; }
/* Risk matrix settings grid (rodo/risk_analysis/risk_matrix/edit): each cell's
   select is tinted with its level's .risk-level-* class above. */
.risk-matrix-table th, .risk-matrix-table td { padding: 0.3rem; text-align: center; }
.risk-matrix-table select.risk-level-select { font-weight: 600; }
.risk-matrix-table select.risk-level-select option { background: var(--panel); color: var(--text); }
.risk-level-none { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
.risk-total-indicator { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 8px; font-weight: 700; font-size: 1rem; }
/* The "rows per page" select sits outside the list's <form> (see
   platform/_list_table.html.twig's docblock on why), so it inherits none of
   the `form select` styling and would otherwise render as a bare native
   dropdown — style it to match the other filter controls instead (same
   tokens as thead .list-filter-select). */
.per-page-select {
    box-sizing: border-box; cursor: pointer; padding: var(--filter-ctl-py) var(--filter-ctl-px);
    border: 1px solid var(--border); border-radius: var(--filter-ctl-radius); font-size: var(--filter-ctl-font);
    background: var(--panel); color: var(--text);
}
.per-page-select:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.pagination { display: flex; align-items: center; gap: 0.25rem; }
.pagination-page, .pagination-arrow {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem;
    padding: 0 0.4rem; border-radius: 6px; font-size: 0.85rem; color: var(--text);
}
.pagination-page:hover, .pagination-arrow:hover { background: var(--bg); text-decoration: none; }
.pagination-page.active { background: var(--brand); color: #fff; font-weight: 600; }
.pagination-arrow.disabled { color: var(--muted); opacity: 0.4; }
.pagination-ellipsis { padding: 0 0.3rem; color: var(--muted); }
.date-range, .date-single { position: relative; }
.date-range-box {
    display: flex; align-items: center; gap: 0.35rem; width: 100%; box-sizing: border-box;
    padding: var(--filter-ctl-py) 2rem var(--filter-ctl-py) var(--filter-ctl-px);
    border: 1px solid var(--border); border-radius: var(--filter-ctl-radius);
    font-size: var(--filter-ctl-font); background: var(--panel); color: var(--text);
}
.date-range-segment { cursor: pointer; padding: 0 0.3rem; border-radius: 4px; white-space: nowrap; line-height: 1.4; }
.date-range-segment:hover, .date-range-segment.active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.date-range-sep { color: var(--muted); }
.date-single-display { cursor: pointer; padding-right: 2rem !important; }
.date-single-datetime { display: inline-flex; align-items: center; gap: 0.4rem; }
.date-single-datetime .date-single-display { width: auto; }
.date-single-time { width: auto !important; }
.date-range-icon, .date-single-icon { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.date-range-icon .icon, .date-single-icon .icon { width: 0.9rem; height: 0.9rem; display: block; }
.date-picker-popover {
    display: none; position: fixed; z-index: 1000; width: 240px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem;
    box-shadow: var(--shadow-popover);
}
.date-picker-popover.open { display: block; }
.date-picker-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.date-picker-nav { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0.15rem 0.4rem; border-radius: 4px; color: var(--text); }
.date-picker-nav:hover { background: var(--bg); }
.date-picker-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.date-picker-dow { font-size: 0.65rem; color: var(--muted); text-align: center; padding: 0.3rem 0; }
.date-picker-day { background: none; border: none; cursor: pointer; padding: 0.45rem 0; font-size: 0.8rem; border-radius: 4px; color: var(--text); }
.date-picker-day:hover { background: var(--bg); }
.date-picker-day.selected { background: var(--brand); color: #fff; font-weight: 600; }
.date-picker-day.in-range { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.date-picker-cal-footer { display: flex; justify-content: space-between; margin-top: 0.5rem; }
.date-picker-cal-footer button { background: none; border: none; cursor: pointer; font-size: 0.8rem; color: var(--brand); font-weight: 600; padding: 0.2rem 0.4rem; }
.date-picker-cal-footer button:hover { text-decoration: underline; }
form .checkbox-list {
    display: flex; flex-wrap: wrap; gap: 0.5rem; border: none; background: none; padding: 0; max-height: none;
}
form .checkbox-list > div {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--panel);
}
form .checkbox-list label { display: inline; font-weight: 400; margin: 0; }
form .checkbox-list input[type=checkbox]:checked ~ label { color: var(--brand); font-weight: 600; }
form .checkbox-list > div:has(input[type=checkbox]:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--panel)); }
form input[type=checkbox] { width: auto; }
form .help-text { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }
/* Rectangular variant of .checkbox-list (see m.checkbox_list_row()'s extraClass
   param) — inline "tiles" rather than pills, for a field like the risk
   catalog's CIA category where a boxier look reads better inline. */
form .checkbox-list.choice-tiles > div { border-radius: 6px; }
/* Two-option "circle radio" scope picker (see m.scope_picker_row() / [data-scope-picker]
   in app.js) — Global vs Client, styled as a pair of round toggle buttons
   instead of a checkbox, with a "Client" pick unfolding the client-selection
   fields beneath it. */
.scope-picker { display: flex; gap: 1.5rem; margin: 0.4rem 0 1rem; }
.scope-circle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 600; }
/* Visually-hidden native radio shared by .scope-circle and .risk-scale-card
   below — both drive their own custom dot via the :checked ~ sibling combinator. */
.scope-circle input[type=radio], .risk-scale-card input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.scope-circle-dot { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--border); position: relative; flex-shrink: 0; }
.scope-circle input[type=radio]:checked ~ .scope-circle-dot { border-color: var(--brand); }
.scope-circle input[type=radio]:checked ~ .scope-circle-dot::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand);
}
.scope-picker-clients { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; background: color-mix(in srgb, var(--brand) 4%, var(--panel)); }
/* Card-style single-select picker for a 4-point risk scale (see m.risk_scale_picker()) —
   one card per choice, numbered title + description, selection shown via the same
   :has(input:checked) idiom as form .checkbox-list and the same hidden-input/dot
   idiom as .scope-circle above, just with a filled (not ringed) dot. */
.risk-scale-picker-title { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.75rem; color: var(--muted); font-weight: 600; margin-bottom: 0.5rem; }
.risk-scale-picker-list { display: flex; flex-direction: column; gap: 0.6rem; }
.risk-scale-card {
    display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer;
    border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.9rem; background: var(--panel);
}
.risk-scale-card-dot { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--border); position: relative; flex-shrink: 0; margin-top: 0.1rem; }
.risk-scale-card:has(input[type=radio]:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--panel)); }
.risk-scale-card input[type=radio]:checked ~ .risk-scale-card-dot { border-color: var(--brand); background: var(--brand); }
.risk-scale-card-label { font-weight: 600; display: block; }
.risk-scale-card-desc { color: var(--muted); font-size: 0.85rem; display: block; }
/* m.form_dictionary_entry()'s chip box — see window.initTagFields() in app.js
   for the behavior this styles (chips, inline add-input, suggestion popover). */
.tag-box {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.6rem 0.75rem;
    border: 1px solid var(--border); border-radius: 8px; background: var(--panel); position: relative;
}
.tag-chips { display: contents; }
.tag-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg); font-size: 0.85rem; font-weight: 600; white-space: nowrap;
}
.tag-chip button { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--muted); font-size: 0.9rem; line-height: 1; }
.tag-chip button:hover { color: var(--danger); }
/* Higher specificity than `form input[type=text] { border: 1px solid ...;
   width: 100%; }` above — without it, that rule wins and this input grows its
   own bordered box nested inside .tag-box's, doubling the border. */
.tag-box .tag-box-input { flex: 1 1 160px; min-width: 160px; width: auto; border: none; padding: 0.3rem 0.2rem; background: none; color: var(--text); font-size: 0.9rem; }
.tag-box .tag-box-input:focus { outline: none; }
.tag-suggestions {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.25rem; z-index: 30;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px; max-height: 180px; overflow-y: auto;
    box-shadow: var(--shadow-popover);
}
.tag-suggestions.open { display: block; }
.tag-suggestion { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.9rem; }
.tag-suggestion:hover, .tag-suggestion.highlighted { background: var(--bg); }
/* m.recipient_row() — To / Cc / Bcc as one block of mail-client lines:
   label on the left, the addresses as chips, a hairline between lines. */
.recipients { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.recipients > .tag-field { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; padding: 0 0.75rem; }
.recipients > .tag-field + .tag-field { border-top: 1px solid var(--border); }
.recipients > .tag-field > label { flex: 0 0 3rem; margin: 0; color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.recipients > .tag-field > ul { flex-basis: 100%; margin: 0 0 0.4rem; }
.recipients .tag-box { flex: 1 1 0; min-width: 0; min-height: 2.6rem; padding: 0.3rem 0; gap: 0.3rem; border: none; border-radius: 0; background: none; cursor: text; }
.recipients .tag-box .tag-box-input { flex-basis: 120px; min-width: 120px; }
.recipients .tag-chip { padding: 0.15rem 0.6rem; font-weight: 400; }
.recipients .tag-chip-invalid { border-color: var(--danger); color: var(--danger); }
/* Drag-and-drop image picker (see m.file_dropzone()) — a <label> wrapping a
   visually-hidden file input, so a plain click already opens the file
   chooser; JS only adds drag-and-drop, the live preview and the remove button. */
.filedrop {
    position: relative; display: flex; align-items: center; gap: 0.85rem; width: 100%; box-sizing: border-box;
    border: 2px dashed var(--border); border-radius: 10px; padding: 0.75rem 0.9rem; cursor: pointer;
    background: var(--panel); transition: border-color .15s, background .15s;
}
.filedrop:hover, .filedrop.filedrop-dragover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--panel)); }
.filedrop input[type=file] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.filedrop-preview-img { display: block; max-height: 64px; max-width: 110px; border-radius: 6px; object-fit: contain; flex-shrink: 0; }
.filedrop.filedrop-round .filedrop-preview-img { height: 64px; width: 64px; border-radius: 50%; object-fit: cover; }
.filedrop-empty { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.9rem; }
.filedrop-empty .icon { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
.filedrop-text { flex: 1; }
.filedrop-hint { display: block; font-size: 0.78rem; opacity: 0.8; margin-top: 0.1rem; }
.filedrop-preview-img[hidden], .filedrop-file[hidden] { display: none; }
.filedrop-file { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; word-break: break-all; }
.filedrop-file .icon { width: 1.35rem; height: 1.35rem; flex-shrink: 0; color: var(--muted); }

/* Popup (see [data-dialog-open] in app.js): a native <dialog> opened with
   showModal(). No padding on the <dialog> itself, so a click on it is a click
   on the backdrop; overflow stays visible for Select2 dropdowns inside it. */
.modal {
    width: min(560px, 95vw); padding: 0; overflow: visible;
    border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text);
    box-shadow: var(--shadow-popover);
}
/* A tall form: scrolls inside the viewport instead of running off it (clips Select2 dropdowns, so opt-in). */
.modal-scroll { max-height: 90vh; overflow-y: auto; }
/* A mail compose popup: wide like a mail client's, and nearly the full viewport height. */
.modal-mail { width: min(960px, 95vw); max-height: calc(100vh - 2rem); }
.modal::backdrop { background: rgb(0 0 0 / 0.4); }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.modal-header h2 { margin: 0; font-size: 1.15rem; }
.modal-confirm { width: min(420px, 95vw); }
.modal-confirm-message { margin: 0 0 1.25rem; }
.modal-actions { justify-content: flex-end; }

/* Swatch + hex box in one input-like frame (the brand color field). */
.color-field {
    display: flex; align-items: center; gap: 0.4rem; box-sizing: border-box; height: 2.45rem;
    border: 1px solid var(--border); border-radius: 6px; background: var(--panel); padding: 0 0.35rem;
    transition: border-color .15s, box-shadow .15s;
}
.color-field:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.color-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.color-field input[type=color] {
    -webkit-appearance: none; appearance: none; flex: none; width: 1.75rem; height: 1.75rem;
    padding: 0; border: none; border-radius: 5px; background: none; cursor: pointer;
}
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type=color]::-webkit-color-swatch { border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: 5px; }
.color-field input[type=color]::-moz-color-swatch { border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: 5px; }
form .color-field input:focus { box-shadow: none; }
form .color-field .color-field-hex {
    flex: 1; min-width: 0; border: none; padding: 0.25rem; background: none; box-shadow: none;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9rem; text-transform: uppercase;
}
.filedrop-remove {
    position: relative; z-index: 1; margin-left: auto; flex-shrink: 0; background: none; border: none;
    cursor: pointer; color: var(--muted); padding: 0.35rem; border-radius: 50%; display: inline-flex;
}
.filedrop-remove[hidden] { display: none; }
.filedrop-remove:hover { background: var(--bg); color: var(--danger); }
.filedrop-remove .icon { width: 1rem; height: 1rem; }
/* Layout/spacing utilities — replace the one-off inline style="" attributes
   that had drifted into copy-pasted duplicates across the record show/form
   templates (record detail header, action-button row, inline filter form,
   etc). Add to this set instead of writing a new inline style. */
.d-inline { display: inline; }
.d-none { display: none; }
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.nowrap { white-space: nowrap; }
.flex-1 { flex: 1; }
.flex-end { display: flex; justify-content: flex-end; }
.min-w-220 { min-width: 220px; }
.min-w-280 { min-width: 280px; }
/* A table wider than the viewport (e.g. zoomed in) widens the page, which then scrolls natively — no inner scrollbar. */
.content-area { min-width: min-content; }
/* AJAX list navigation's in-flight state (app.js) — a thin bar sweeping over
   the table's top edge, applied only after a short delay so a fast response
   never shows it. Nothing is dimmed: the old rows stay fully visible until
   the new ones replace them. .list-progress is zero-height, so it takes no
   layout space. */
.list-progress { position: relative; height: 0; }
.list-progress::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brand), transparent) no-repeat;
    background-size: 40% 100%; opacity: 0;
}
.list-content-loading .list-progress::after { opacity: 1; animation: list-progress 1s linear infinite; }
/* -67% / 167% put the 40%-wide sweep just off either end. */
@keyframes list-progress {
    from { background-position: -67% 0; }
    to { background-position: 167% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .list-content-loading .list-progress::after { animation: none; background: var(--brand); }
}
.text-danger-strong { color: var(--danger); font-weight: 600; }
/* row_actions()'s data-blocking-documents trigger + the popover app.js pops
   from it — same box chrome as .date-picker-popover, sized for a short list
   of "type — name" lines instead of a calendar. */
[data-blocking-documents] { cursor: help; opacity: 0.55; }
.blocking-documents-popover {
    position: fixed; z-index: 1000; max-width: 320px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.75rem;
    box-shadow: var(--shadow-popover); font-size: 0.8rem;
}
.blocking-documents-title { font-weight: 600; margin-bottom: 0.4rem; }
.blocking-documents-popover ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.blocking-documents-popover li { padding: 0.2rem 0; border-top: 1px solid var(--border); }
.blocking-documents-popover li:first-child { border-top: none; }
.blocking-documents-type { color: var(--muted); margin-right: 0.3rem; }
/* A record show page's title + actions row (h1/h2 + .actions). The actions are
   pinned top-right, level with the title's first line, whatever its length — a
   long title wraps before reaching them instead of pushing or squeezing them.
   The h1's own margin moves onto the row (same 0.67em-of-2rem default) so the
   title's first line box and the actions share the same top edge and height. */
.detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: 1.34rem 0; }
.detail-header > h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.record-byline { margin: 0.25rem 0 0; font-size: 0.8rem; }
/* A page title with its byline right under it, set apart from the content below. */
.title-block > h1 { margin-bottom: 0; }
.title-block { margin-bottom: var(--space-4); }
.detail-header > .actions { flex-shrink: 0; height: 2.5rem; }
/* Icon + label row, e.g. a page heading with a leading icon. */
.icon-row { display: flex; align-items: center; gap: var(--space-2); }
/* A page's h1 with its section icon (see m.page_title()) — the icon tracks the
   heading's font-size instead of the fixed 18px default, and never gets
   squeezed by a long title or by a .detail-header/.form-header's actions. */
.page-title { gap: 0.4em; }
.page-title .icon { width: 0.9em; height: 0.9em; flex-shrink: 0; }
/* The client a list is scoped to, on the right of its page title (e.g. Users). */
.scope-client {
    color: var(--text); font-size: 0.95rem; font-weight: 600;
    padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--panel);
}
.scope-client img { height: 1.5rem; max-width: 6rem; object-fit: contain; }
/* Row of action buttons under a section — pair with .mt-4/.mt-6 for spacing above it. */
.action-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* A form laid out as a row of controls (select + button): `form select` is full width, which would push the rest of the row onto its own line. */
form.action-bar select { width: auto; }
/* Subject rights request Handling steps: who recorded each step and when, in their own columns; the controller a request went to, as an address block. */
.handling-table td { vertical-align: top; }
.detail-table td.handling-meta { width: 1%; white-space: nowrap; padding-left: var(--space-4); font-size: 0.85rem; }
.handling-controller { line-height: 1.5; }
/* The own-task field with its +Add button right under it, on the left. */
.task-add { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
/* Small inline search/rename form (label-less fields ending in a submit button). */
.inline-filter-form { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
/* Page header with a title on the left and a control (e.g. a button) on the right. */
.header-split { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.header-row { display: flex; justify-content: space-between; align-items: center; }
/* Two-column field row (each child usually carries .flex-1). */
.two-col-row { display: flex; gap: var(--space-6); }
.flex-gap-3 { display: flex; gap: var(--space-3); }
/* Collapsible form sub-heading (see e.g. platform/user/form.html.twig). */
.subsection-heading { font-size: 1rem; margin: var(--space-5) 0 var(--space-2); }
/* Digit-group fields (NIP, postal code): one box per group, built by app.js from [data-segments]. */
.segmented-input { display: flex; align-items: center; gap: 0.25rem; }
/* `form input[type=text]` (width:100%, padding) is more specific than a bare class rule, hence the doubled selector. */
form .segmented-input input[type=text] { box-sizing: content-box; width: calc(var(--n) * 1ch); flex: 0 0 auto; text-align: center; font-variant-numeric: tabular-nums; padding: 0.55rem 0.3rem; }
.segmented-input span { color: var(--muted); }

/* Width caps for the <div class="panel"> wrapping a create/edit form. */
.form-narrow { max-width: 420px; margin: 0 auto; }
.form-sm { max-width: 480px; }
.form-md { max-width: 640px; }
.form-lg { max-width: 720px; }
/* Change history table (platform/_change_history.html.twig): a row's field list is
   one truncated line until the row is clicked (see app.js). */
.change-history-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* Cancel the generic `form button[type=submit]` top margin so slotted forms line up with the toggle. */
.change-history-bar form button[type=submit] { margin-top: 0; }
.change-history-row { cursor: pointer; }
.change-history-summary { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.change-history-full { display: none; overflow-wrap: break-word; }
.change-history-row.expanded .change-history-summary { display: none; }
.change-history-row.expanded .change-history-full { display: block; }

/* Show page tabs (data-tab buttons, app.js) and the subject rights History tab. */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--space-2) var(--space-4); color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; margin-bottom: -1px; }
.tab[aria-selected=true] { color: var(--brand); border-bottom-color: var(--brand); }
.deadline-bar { height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; margin: var(--space-3) 0 var(--space-1); }
.deadline-bar-fill { height: 100%; background: var(--brand); }
.deadline-overdue .deadline-bar-fill { background: #dc2626; }
.deadline-dates { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.85rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-5); border-left: 2px solid var(--border); }
.timeline-item { position: relative; padding-bottom: var(--space-4); }
.timeline-item::before { content: ''; position: absolute; left: calc(-1 * var(--space-5) - 6px); top: 0.35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.timeline-created::before, .timeline-reply::before { background: var(--brand); }
.timeline-status::before, .timeline-check::before { background: #16a34a; }
/* Title on the left; who and when on the right, in fixed-width columns so they line up from one event to the next. */
.timeline-head { display: grid; grid-template-columns: minmax(0, 1fr) 12rem 8.5rem; gap: var(--space-3); align-items: baseline; }
.timeline-at { white-space: nowrap; }

/* Version history table (platform/_version_history.html.twig): the version number and its
   "Current version" pill stay on one line. */
.version-history-table td:first-child { white-space: nowrap; }

/* Activity risk analysis show page (rodo/risk_analysis/analysis/show.html.twig). */
.mitigation-add-badge {
    display: inline-flex; align-items: center; padding: 0.3rem 0.6rem; border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
    background: color-mix(in srgb, var(--brand) 8%, var(--bg));
    color: var(--brand); font-weight: 600; font-size: 0.85rem; white-space: nowrap;
}
.mitigation-add-badge:hover { background: color-mix(in srgb, var(--brand) 16%, var(--bg)); text-decoration: none; }
.scenario-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--border) 20%, transparent); }
.analysis-field-label {
    display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    color: var(--muted); letter-spacing: 0.04em; margin-bottom: 0.35rem;
}
.analysis-field-box {
    border: 1px solid var(--border); border-radius: 6px; padding: 0.55rem 0.65rem;
    background: var(--panel); color: var(--text);
}
.analysis-notes-box { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 4rem; font: inherit; }
/* Floats over the notes box's corner, so revealing it never moves the elements below. */
.analysis-notes-save { position: absolute; right: 1.5rem; bottom: 0.5rem; margin: 0; font-size: 0.8rem; padding: 0.25rem 0.6rem; }
.analysis-notes-save[hidden] { display: none; }
.risk-total-circle {
    display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
    border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.risk-total-circle span { color: var(--panel); font-weight: 700; font-size: 1.1rem; }

/* Select2 theme (the library itself is loaded by m.select2_assets()): maps its chrome onto
   the app's color variables so it follows light/dark mode like every other control.
   The `body` prefix is deliberate: the macro loads the library's own stylesheet after
   this file, so equal-specificity rules would lose to it. */
body .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--border); border-radius: 6px; background: var(--panel); min-height: 2.4rem;
}
body .select2-container--default .select2-selection--single {
    height: 2.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--panel);
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text); line-height: 2.4rem; padding-left: 0.65rem; padding-right: 1.6rem;
}
body .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.4rem; right: 0.4rem; }
body .select2-container--default.select2-container--focus .select2-selection--multiple,
body .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--brand); }
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in srgb, var(--brand) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
    color: var(--text); border-radius: 4px;
}
body .select2-container--default .select2-selection__choice__remove { color: var(--muted); }
body .select2-container--default .select2-selection__choice__remove:hover { color: var(--danger); }
body .select2-container--default .select2-search--inline .select2-search__field { color: var(--text); }
body .select2-dropdown { background: var(--panel); border-color: var(--border); color: var(--text); }
body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brand); color: #fff; }
body .select2-search--dropdown .select2-search__field { background: var(--panel); border-color: var(--border); color: var(--text); }
/* Already-picked options in a Select2 multiselect's suggestion list (see initSelect2Within in app.js). */
.select2-dropdown--hide-selected .select2-results__option[aria-selected=true] { display: none; }

/* User invite/edit and employee-account forms: the Read / Modify / Sign grid. */
.access-rights-table { border-collapse: collapse; margin-top: 0.25rem; }
.access-rights-table th { padding: 0 1.5rem 0.4rem 0; text-align: center; font-weight: 600; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.access-rights-table th .icon { width: 1.05rem; height: 1.05rem; vertical-align: -0.2em; margin-right: 0.3rem; }
.access-rights-table td { padding: 0 1.5rem 0 0; text-align: center; }

/* Groups a field with the quick-add button that acts on it, so the button reads as
   belonging to that field rather than as another field of its own - the generic
   "form > div" field spacing applies once to the group, not to the field row inside it. */
.field-with-action { margin-bottom: 1.25rem; }
.field-with-action > div { margin-bottom: 0.5rem; }
.quick-add-btn { margin: 0; padding: 0.3rem 0.65rem; font-size: 0.8rem; }
.quick-add-btn .icon { width: 0.8rem; height: 0.8rem; }
/* The popup hosting the quick-add iframe (m.quick_add()). */
.quick-add-dialog { width: min(760px, 95vw); max-height: 90vh; border: 1px solid var(--border); border-radius: 8px; padding: 0; position: relative; }
.quick-add-dialog .quick-add-close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1; font-size: 1.1rem; }
.quick-add-dialog iframe { width: 100%; height: min(640px, 85vh); border: 0; display: block; }

/* Processing activity form. */
.rcp-form label { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8rem; }
.rcp-form .field-group { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.rcp-form .field-group:first-of-type { margin-top: 0.5rem; padding-top: 0; border-top: none; }
.rcp-form .form-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }

/* Threat scenario form. */
.threat-category-display { display: flex; flex-direction: column; gap: 0.5rem; }
.threat-category-display .category-badge { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); }
.threat-category-display .category-badge .icon { flex-shrink: 0; color: var(--muted); }
.threat-category-display .category-badge-label { font-weight: 600; flex-shrink: 0; }
.threat-category-display .category-badge-desc { color: var(--muted); font-size: 0.85rem; }
.threat-category-display .category-badge-empty { color: var(--muted); font-weight: 400; padding: 0.5rem 0; }
label.required-marker::after { content: " *"; color: var(--danger); }

/* Mitigation form. */
.mitigation-context { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.5rem; }
.mitigation-context .context-row { display: flex; gap: 2rem; flex-wrap: wrap; }
.mitigation-context .context-row + .context-row { margin-top: 0.6rem; }
.mitigation-context .context-label { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.15rem; }
.residual-row { display: flex; gap: 1.5rem; align-items: flex-start; }
.residual-row .residual-fields { flex: 1; min-width: 260px; }
.target-risk-box { flex: 0 0 auto; min-width: 140px; text-align: center; padding: 0.75rem 1.25rem; border-radius: 8px; }
.target-risk-box .target-risk-number { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.target-risk-box .target-risk-label { font-size: 0.85rem; font-weight: 600; margin-top: 0.25rem; }
.implementation-date-display { color: var(--muted); }

/* WYSIWYG fields (textarea[data-rich], see app.js): until TinyMCE has loaded, keep the textarea's box. */
textarea[data-rich] { min-height: 120px; }
.tox-tinymce { border-radius: 6px; border-color: var(--border); }
/* The editor wears the app's colours, and its toolbar stays folded behind the "⋮" in the title row. */
.tox.tox-tinymce { background: var(--panel); }
.tox .tox-editor-header, .tox .tox-toolbar-overlord, .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow { background: var(--panel); }
.tox .tox-toolbar__group { border-color: var(--border); }
.tox .tox-tbtn, .tox .tox-tbtn__select-label { color: var(--text); }
.tox .tox-tbtn svg { fill: var(--text); }
.tox .tox-tbtn:hover, .tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover { background: var(--bg); }
.tox:not(.rich-tools-open) .tox-editor-header { display: none; }
/* Title, its required "*" right after it, then the "⋮" toggle pushed to the right end. */
.rich-label { display: flex; align-items: center; }
.rich-label .rich-tools-toggle { order: 1; margin-left: auto; }
.rich-label::after { margin-left: 0.25em; } /* a flex item drops the leading space of " *" */
.rich-tools-toggle { border: 0; background: transparent; color: var(--muted, var(--text)); font-size: 1.2rem; line-height: 1; padding: 0 0.4rem; cursor: pointer; border-radius: 4px; }
.rich-tools-toggle:hover, .rich-tools-toggle[aria-expanded="true"] { background: var(--bg); color: var(--text); }
.tox-tinymce.rich-invalid { border-color: var(--danger, #c0392b); box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.25); }
.rich-text p, .rich-text ul, .rich-text ol, .rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text blockquote { margin: 0 0 0.5em; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text ol { list-style-type: decimal; }
.rich-text ol ol { list-style-type: lower-alpha; }
.rich-text ol ol ol { list-style-type: lower-roman; }
.rich-text ul, .rich-text ol { padding-left: 1.6em; }
.rich-text h1 { font-size: 1.4em; } .rich-text h2 { font-size: 1.2em; } .rich-text h3 { font-size: 1.1em; } .rich-text h4 { font-size: 1em; }