/* ===================== Design tokens (Atlassian / Confluence palette) ===================== */
:root {
    --bg: #ffffff;
    --panel: #f4f5f7;
    --line: #dfe1e6;
    --line-strong: #c1c7d0;
    --ink: #172b4d;
    --ink-soft: #44546f;
    --muted: #6b778c;
    --blue: #0052cc;
    --blue-dark: #0747a6;
    --blue-soft: #deebff;
    --green: #00875a;
    --red: #de350b;
    --amber-bg: #fffae6;
    --amber-line: #ffe380;
    --amber-ink: #974f0c;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

    /* Aliases kept so existing markup keeps working */
    --ms-fg: var(--ink);
    --ms-muted: var(--muted);
    --ms-border: var(--line);
    --ms-bg: var(--bg);
    --ms-accent: var(--blue);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

h1:focus { outline: none; }
a, .btn-link { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
code { color: #c02d76; font-family: var(--mono); }

/* ---- Blazor / framework chrome (kept) ---- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid var(--red); }
.validation-message { color: var(--red); }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
    #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
    .blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
    .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
        .loading-progress circle:last-child { stroke: var(--blue); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; }
    .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ===================== Shell ===================== */
.ms-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.ms-topbar {
    height: 56px; flex: none;
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 30;
}
.ms-brand { display: flex; align-items: center; gap: 12px; margin-right: 4px; }
.ms-brandmark { display: flex; flex-direction: column; line-height: 1; }
.ms-logo-img { display: block; height: 32px; width: auto; max-width: 220px; object-fit: contain; }
.ms-logo { font-weight: 800; font-size: 18px; letter-spacing: .04em; color: #1d3c6e; }
.ms-brand-sub { font-size: 8px; font-weight: 600; letter-spacing: .14em; color: var(--muted); margin-top: 2px; }
.ms-appname { font-size: 14px; color: var(--ink); padding: 2px 0 2px 12px; border-left: 1px solid var(--line); font-weight: 500; }
.ms-search { position: relative; width: 340px; max-width: 40vw; margin-left: 8px; }
.ms-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ms-search input {
    width: 100%; height: 34px; border: 1px solid var(--line-strong); border-radius: 4px;
    padding: 0 10px 0 32px; font-size: 14px; background: var(--bg); font-family: inherit; outline: none;
}
.ms-search input:focus { border-color: var(--blue); background: var(--bg); box-shadow: 0 0 0 2px var(--blue-soft); }
.ms-topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ms-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; border-radius: 4px; font-size: 1.05rem; cursor: pointer; color: var(--ink-soft); position: relative; }
.ms-iconbtn:hover { background: var(--panel); color: var(--ink); }
.ms-bell-badge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.ms-realtime-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ms-realtime-dot.connected { background: var(--green); }
.ms-realtime-dot.polling { background: var(--amber-line); }

.ms-lang { display: flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; }
.ms-lang button { font-size: 11.5px; font-weight: 600; padding: 4px 9px; color: var(--muted); border: none; background: var(--bg); cursor: pointer; }
.ms-lang button + button { border-left: 1px solid var(--line-strong); }
.ms-lang-active { background: var(--ink) !important; color: #fff !important; }

.ms-body { display: flex; flex: 1; min-height: 0; }
.ms-sidebar {
    width: var(--ms-sidebar-w, 260px); flex: none; background: var(--bg); border-right: 1px solid var(--line);
    /* Generous bottom padding: the browser's link-preview hint (bottom-left, ~25px) would otherwise cover the
       last nav entry when the tree is scrolled to the end. */
    padding: 10px 10px 40px; overflow-y: auto; display: flex; flex-direction: column;
    transition: width .15s ease;
}
.ms-sidebar.collapsed { width: 48px; padding: 10px 6px; overflow: hidden; }

/* Drag handle that sits on the border between the sidebar and the content (see initResize in sumex-interop.js) */
.ms-resize-handle { flex: none; width: 5px; margin: 0 -2px; cursor: col-resize; background: transparent; position: relative; z-index: 5; }
.ms-resize-handle:hover { background: var(--blue-soft); }
.ms-sidebar.collapsed + .ms-resize-handle { display: none; }
/* During an active drag: keep the col-resize cursor everywhere, suppress text selection, and drop the width
   transition so the panel tracks the pointer 1:1 instead of easing behind it. */
body.ms-resizing { cursor: col-resize; user-select: none; }
/* Both resize handles are keyboard-operable separators (arrows/Home/End, see initResize), so the tab stop
   has to be visible. */
.ms-resize-handle:focus-visible, .ms-toc-resize-handle:focus-visible {
    /* outline, not just a background: forced-colors mode drops author backgrounds, and an invisible tab
       stop that silently resizes the layout on arrow keys is worse than no tab stop. */
    background: var(--blue); outline: 2px solid var(--blue); outline-offset: 1px;
}
body.ms-resizing .ms-sidebar, body.ms-resizing .ms-wiki-toc { transition: none; }
body.ms-resizing .ms-resize-handle, body.ms-resizing .ms-toc-resize-handle { background: var(--blue-soft); }
/* Each sidebar block keeps its natural height: the whole sidebar scrolls (overflow-y above) when the page tree
   is long, instead of flex-shrinking the nav rows into each other (which made the top/bottom items overlap). */
.ms-sidebar > * { flex: 0 0 auto; }
.ms-sidebar > .ms-nav-spacer { flex: 1 1 auto; }
.ms-sidebar-head { display: flex; justify-content: flex-end; margin-bottom: 4px; flex: none; }
.ms-sidebar.collapsed .ms-sidebar-head { justify-content: center; }
.ms-collapse-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: none; background: transparent; border-radius: 6px; color: var(--muted); cursor: pointer;
}
.ms-collapse-btn:hover { background: var(--panel); color: var(--ink); }
.ms-collapse-btn svg { transition: transform .15s ease; }
.ms-sidebar.collapsed .ms-collapse-btn svg { transform: rotate(180deg); }
.ms-navlink { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-navlink:hover { background: #ebecf0; text-decoration: none; }
.ms-navlink.active { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.ms-navlink-sub { padding-left: 24px; font-size: 12.5px; color: var(--ink-soft); }
.ms-nav-section { display: flex; align-items: center; margin: 16px 4px 5px; }
.ms-nav-toggle {
    flex: 1; display: flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
    padding: 2px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.ms-nav-toggle:hover { color: var(--ink); }
.ms-nav-caret { display: inline-block; font-size: 9px; transition: transform .12s ease; }
.ms-nav-caret.open { transform: rotate(90deg); }
.ms-nav-add { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 17px; line-height: 1; padding: 0 8px; }
.ms-nav-add:hover { color: var(--blue); }
.ms-nav-arrange { background: none; border: 0; cursor: pointer; color: var(--muted); line-height: 0; padding: 3px 5px; border-radius: 5px; display: inline-flex; align-items: center; }
.ms-nav-arrange:hover { color: var(--blue); }
.ms-nav-arrange.active { color: var(--blue); background: var(--blue-soft); }
.ms-nav-spacer { flex: 1; }
.ms-badge { background: var(--red); color: #fff; border-radius: 9px; padding: 1px 6px; font-size: 11px; font-weight: 700; margin-left: auto; }

.ms-content { flex: 1; padding: 22px 36px 80px; overflow-y: auto; background: var(--bg); }
.ms-muted { color: var(--muted); }

/* ===================== Buttons & inputs ===================== */
.ms-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line-strong); background: var(--bg); border-radius: 3px;
    padding: 6px 12px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.ms-btn:hover { background: var(--panel); }
.ms-btn svg { display: block; }
.ms-btn.active, .ms-btn-active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.ms-btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.ms-btn-primary:hover { background: var(--blue-dark); }
.ms-btn-approve { color: var(--green); border-color: #9fc9b3; }
.ms-btn-approve:hover { background: #e4f2ea; }
.ms-btn-ghost { border-color: transparent; color: var(--muted); }
.ms-btn-sm { padding: 5px 10px; font-size: 12.5px; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* Floating Save/Cancel bar of the page and ticket editors: pinned bottom-right so it stays visible however long
   the form gets. Below the modals (100) and the help panel (150). */
.ms-sticky-actions {
    position: fixed; right: 24px; bottom: 20px; z-index: 90;
    display: flex; align-items: center; gap: 8px; padding: 8px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 8px 28px rgba(9, 30, 66, .18), 0 1px 3px rgba(9, 30, 66, .12);
}
.ms-sticky-actions > .ms-muted { padding: 0 6px; font-size: 13px; }
.ms-sticky-actions .ms-btn {
    border-radius: 8px; padding: 8px 18px; font-weight: 600;
    transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.ms-sticky-actions .ms-btn:not(:disabled):active { transform: translateY(1px); }
.ms-sticky-actions .ms-btn-ghost { color: var(--ink-soft); }
.ms-sticky-actions .ms-btn-ghost:hover { background: var(--panel); color: var(--ink); }
.ms-sticky-actions .ms-btn-primary { box-shadow: 0 2px 6px color-mix(in srgb, var(--blue) 35%, transparent); }
.ms-sticky-actions .ms-btn-primary:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 45%, transparent); }

.ms-input, .ms-toolbar input, .ms-toolbar select {
    border: 1px solid var(--line-strong); border-radius: 7px; padding: 7px 10px;
    font-size: 13.5px; font-family: inherit; color: var(--ink); background: var(--bg); outline: none;
}
.ms-input:focus, .ms-toolbar input:focus, .ms-toolbar select:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(31,110,180,.12); }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 10px 0 4px; }

/* Date entry (DateInput.razor): a dd.MM.yyyy text box plus a calendar button. The native date input behind
   it exists only to host the browser's picker — it must stay *rendered* (showPicker() throws otherwise), so
   it is collapsed to a 1px transparent anchor at the button rather than display:none. */
.ms-date { position: relative; display: inline-flex; align-items: center; }
/* width:auto + flex means the box is ~10ch on its own and stretches when the caller widens the wrapper —
   without it .ms-input-sm's own width:100% would resolve against an indefinite inline-flex parent. */
.ms-date > .ms-input { flex: 1 1 auto; width: auto; min-width: 0; box-sizing: border-box; padding-right: 30px; }
.ms-date-native {
    position: absolute; right: 8px; bottom: 0; width: 1px; height: 1px;
    opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
}
.ms-date-btn {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; font-size: 13px; line-height: 1;
    background: none; border: 0; border-radius: 5px; cursor: pointer; opacity: .65;
}
.ms-date-btn:hover:not(:disabled) { background: var(--panel); opacity: 1; }
.ms-date-btn:disabled { cursor: not-allowed; opacity: .3; }
.ms-form-grid .ms-date, .ms-form .ms-date { width: 100%; }

.ms-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }

/* ===================== Banners ===================== */
.ms-readonly-banner {
    display: flex; align-items: center; gap: 6px;
    background: var(--amber-bg); border-bottom: 1px solid var(--amber-line); color: var(--amber-ink);
    padding: 6px 16px; font-size: 12.5px;
}

/* Admin-elevation notice on the Settings page (Brush-up §5): a self-contained, rounded amber card that carries the
   "Make me Admin" toggle, shown at the top of Settings so every tab prompts elevation the same way. */
.ms-elevation-notice {
    display: flex; align-items: center; gap: 12px;
    background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink);
    padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 13px;
}
.ms-elevation-notice .ms-elevation-notice-icon { flex: none; }
.ms-elevation-notice .ms-elevation-text { flex: 1 1 auto; }
.ms-elevation-notice .ms-btn { flex: none; }

/* Infra failure (server unreachable / timeout, issue #11) — red so it reads as "not your fault",
   distinct from the amber read-only banner and from validation-error toasts. */
.ms-offline-banner {
    display: flex; align-items: center; gap: 6px;
    background: var(--red); color: #fff;
    padding: 6px 16px; font-size: 12.5px;
}

/* ===================== User menu ===================== */
.ms-usermenu { position: relative; }
.ms-avatar { width: 32px; height: 32px; border-radius: 50%; font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ms-menu-pop { position: absolute; right: 0; top: 42px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 32px rgba(40,40,45,.15); width: 320px; padding: 6px; z-index: 50; }
.ms-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ms-menu-roles { color: var(--muted); font-size: 12px; margin-top: 2px; }
.ms-menu-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 10px; }
.ms-menu-item { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ms-menu-item:hover { background: var(--panel); }
.ms-menu-item-active { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.ms-menu-item-danger { color: var(--red); font-weight: 600; }
.ms-menu-item-danger:hover { background: var(--red); color: #fff; }
.ms-menu-note { color: var(--muted); font-size: 12px; padding: 8px 10px 2px; }

/* ===================== Notifications bell (§7.11) ===================== */
.ms-help { position: relative; }
.ms-help-pop { width: 260px; }
.ms-help-version { display: flex; align-items: center; gap: 4px; }
.ms-help-copy { padding: 0 4px; font-size: 13px; line-height: 1; }
.ms-help-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--bg); }
.ms-help-item { display: flex; align-items: center; gap: 6px; }
.ms-help-new { margin-left: auto; background: var(--blue-soft); color: var(--blue); border-radius: 9px; padding: 0 7px; font-size: 11px; font-weight: 700; }
/* "Was ist neu" (VERSIONING_RELEASE_NOTES_HELP §5.2) */
.ms-whatsnew-version { margin-bottom: 14px; }
.ms-whatsnew-version h4 { margin: 0 0 6px; font-size: 14px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ms-whatsnew-version ul { list-style: none; margin: 0; padding: 0; }
.ms-whatsnew-version li { display: flex; gap: 10px; padding: 4px 0; font-size: 13px; line-height: 1.45; }
.ms-whatsnew-fresh { background: var(--blue-soft); color: var(--blue); border-radius: 9px; padding: 0 8px; font-size: 11px; font-weight: 700; }
.ms-whatsnew-kind { flex: 0 0 74px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-top: 2px; }
.ms-whatsnew-kind-new { color: var(--green); }
.ms-whatsnew-kind-fixed { color: var(--blue); }
.ms-whatsnew-help { margin-left: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
/* The (?) next to a control that needs explaining (§6.3). */
.ms-helplink { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--muted); font-size: 10.5px; font-weight: 700; line-height: 1; vertical-align: middle; margin-left: 4px; text-decoration: none; }
.ms-helplink:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
/* A deploy happened while the tab stayed open (§5.3) — informational, so blue rather than the red/amber banners. */
.ms-version-banner { display: flex; align-items: center; gap: 10px; background: var(--blue-soft); color: var(--blue); border-bottom: 1px solid var(--line); padding: 6px 16px; font-size: 12.5px; font-weight: 600; }
.ms-notif { position: relative; }
/* Cleanup: "Meine Aufgaben" shortcut inside the notification dropdown. */
.ms-notif-tasks { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text, #222); margin-bottom: 4px; }
.ms-notif-tasks:hover { background: var(--panel); }
.ms-notif-tasks .ms-badge { margin-left: auto; }
.ms-notif-pop { width: 360px; display: flex; flex-direction: column; }
.ms-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ms-notif-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; }
.ms-notif-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ms-notif-item:hover { background: var(--panel); }
.ms-notif-unread { background: var(--blue-soft); }
.ms-notif-unread:hover { background: var(--blue-soft); }
.ms-notif-unread .ms-notif-text { font-weight: 600; }
.ms-notif-text { color: var(--text, #222); }
.ms-notif-date { color: var(--muted); font-size: 11px; }
.ms-notif-actions { border-top: 1px solid var(--line); margin-top: 4px; padding: 6px 4px 2px; }
.ms-linkbtn { border: none; background: transparent; color: var(--blue); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.ms-linkbtn:hover { background: var(--panel); }
.ms-linkbtn:disabled { color: var(--muted); cursor: default; background: transparent; }

/* ===================== Pills, tables, cards ===================== */
.ms-pill { display: inline-flex; align-items: center; border-radius: 10px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.ms-lock { color: var(--muted); }

.ms-table { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ms-table th, .ms-table td { text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ms-table th { background: var(--panel); color: var(--muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.ms-table tr:last-child td { border-bottom: none; }
.ms-table tr.ms-row-click { cursor: pointer; }
.ms-table tr.ms-row-click:hover { background: var(--bg); }
.ms-overdue { color: var(--red); font-weight: 600; }
/* Excel-like column headers: a drag-handle/sort title above a per-column filter control. */
.ms-table th.ms-col { vertical-align: top; }
.ms-table th.ms-col-dragging { opacity: .5; }
.ms-col-head { display: flex; flex-direction: column; gap: 4px; min-width: 6rem; }
.ms-col-title { cursor: pointer; user-select: none; display: inline-flex; align-items: center; white-space: nowrap; }
.ms-col-title:hover { color: var(--text, inherit); }
.ms-col-title[draggable="true"] { cursor: grab; }
.ms-sort-glyph { font-size: 10px; margin-left: 2px; }
/* The filter row is not uppercased/spaced like the title. */
.ms-col-filter { text-transform: none; letter-spacing: normal; font-weight: 400; }

/* ===================== Search results ===================== */
.ms-search-results { display: flex; flex-direction: column; gap: 10px; }
.ms-search-hit { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; cursor: pointer; }
.ms-search-hit:hover { background: var(--bg); border-color: var(--line-strong); }
.ms-search-hit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ms-search-ref { font-size: 12px; font-weight: 600; }
.ms-search-hit-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ms-search-hit-snippet { font-size: 13px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.ms-kind-page { background: var(--panel); color: var(--ink-soft); border: 1px solid var(--line-strong); }
.ms-search-hit mark { background: #ffe9a8; color: inherit; border-radius: 2px; padding: 0 1px; }

.ms-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.ms-card { background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 14px 18px; min-width: 140px; margin-bottom: 16px; }
/* Stat tiles live in a flex row with their own gap — no stacking margin there. */
.ms-cards .ms-card { margin-bottom: 0; }
.ms-card-num { font-size: 2rem; font-weight: 700; color: var(--blue); }
.ms-card-label { color: var(--muted); font-size: 12.5px; }

.ms-section { background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 16px 20px; margin-bottom: 16px; }
.ms-error { color: var(--red); }

/* Meta table (key/value, Confluence-style) */
.ms-meta-table { max-width: 560px; }
.ms-meta-table th { width: 210px; background: var(--panel); color: var(--ink-soft); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 13px; border-right: 1px solid var(--line); }
.ms-meta-table th::after { content: ':'; }
.ms-meta-table td { vertical-align: middle; }

/* Lightweight key/value list for the ticket sidebar — no panel fills, wraps long values inside the card */
.ms-fieldlist { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-fieldlist dt { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.ms-fieldlist dd { margin: 2px 0 0; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; }
.ms-fieldlist dd.ms-overdue { font-weight: 600; }
/* Stacked label above an input when the sidebar fields are in edit mode */
.ms-field-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 4px; }
.ms-field-label:first-child { margin-top: 0; }

/* Workflow card */
.ms-wf { background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 16px; margin-bottom: 16px; }
.ms-wf-states { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.ms-state-pill { border-radius: 12px; padding: 2px 9px; font-size: 12px; }
.ms-state-pill em { font-style: normal; opacity: .6; font-size: 11px; }
.ms-wf-transitions { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.ms-wf-transitions li { padding: 2px 0; }
.ms-trigger { display: inline-block; background: var(--panel); border-radius: 4px; padding: 0 6px; margin-right: 6px; font-size: 11.5px; }

/* Admin / settings editor (§7.9) */
.ms-pill-role { background: var(--panel); color: var(--ink-soft); border: 1px solid var(--line-strong); margin-right: 4px; }
.ms-actions { white-space: nowrap; display: flex; gap: 6px; }
.ms-input-sm { padding: 4px 6px; font-size: 12.5px; width: 100%; box-sizing: border-box; }
.ms-form { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
/* §8.4: consistent two-column form. Each label is a vertical stack (caption above, full-width input);
   align-items:end keeps the inputs on one baseline when a caption wraps, and the row/column gaps give
   uniform spacing across all sections (Confluence/Jira/Bulk/Asset-Navigator/Sanitizer). */
.ms-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: end; }
.ms-form-grid label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.ms-form-grid .ms-input { width: 100%; box-sizing: border-box; }
.ms-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ms-form-actions .ms-error { margin-right: auto; }
.ms-check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 4px 0; }
.ms-check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 20px; margin: 8px 0 14px; }
.ms-check-grid .ms-check { margin: 0; }
/* ===================== Toast / error badge (§9.7) =====================
   Top-right stack of severity-coloured badges. Short summary in the badge; an optional "Details" toggle
   expands it to the full message. Auto-dismisses after 5 s (see ToastService); hovering pauses the timer and
   expanding pins it open. Theme-aware via the design tokens. */
.ms-toast-host {
    position: fixed; top: 66px; right: 16px; z-index: 90;
    display: flex; flex-direction: column; gap: 10px;
    width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.ms-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--bg); color: var(--ink);
    border: 1px solid var(--line); border-left: 4px solid var(--muted);
    border-radius: 10px; padding: 10px 12px;
    box-shadow: 0 10px 32px rgba(40,40,45,.18);
    font-size: 13px; line-height: 1.4;
    animation: ms-toast-in .18s ease-out;
}
@keyframes ms-toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.ms-toast-error   { border-left-color: var(--red); }
.ms-toast-success { border-left-color: var(--green); }
.ms-toast-info    { border-left-color: var(--blue); }
.ms-toast-icon { flex: none; display: inline-flex; margin-top: 1px; }
.ms-toast-error   .ms-toast-icon { color: var(--red); }
.ms-toast-success .ms-toast-icon { color: var(--green); }
.ms-toast-info    .ms-toast-icon { color: var(--blue); }
.ms-toast-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ms-toast-summary { font-weight: 500; word-break: break-word; }
.ms-toast-details {
    margin: 2px 0 0; padding: 8px; max-height: 240px; overflow: auto;
    background: var(--panel); border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
    white-space: pre-wrap; word-break: break-word; color: var(--ink-soft);
}
.ms-toast-toggle {
    align-self: flex-start; border: none; background: transparent; padding: 0;
    color: var(--blue); font-size: 12px; font-weight: 600; cursor: pointer;
}
.ms-toast-toggle:hover { text-decoration: underline; }
.ms-toast-close {
    flex: none; border: none; background: transparent; cursor: pointer;
    color: var(--muted); font-size: 18px; line-height: 1; padding: 0 2px; border-radius: 4px;
}
.ms-toast-close:hover { color: var(--ink); background: var(--panel); }

/* Tree */
.ms-tree { list-style: none; padding-left: 6px; margin: 0; }
.ms-tree ul { list-style: none; padding-left: 14px; }
.ms-tree-row { display: flex; align-items: center; position: relative; }
.ms-tree-caret { position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 14px; height: 22px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s ease, transform .12s ease; }
.ms-tree-row:hover .ms-tree-caret { opacity: 1; }
.ms-tree-caret:hover { color: var(--ink); }
.ms-tree-caret.open { transform: translateY(-50%) rotate(90deg); }
.ms-tree-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 13px; white-space: nowrap; overflow: hidden; }
.ms-tree-item:hover { background: #ebecf0; text-decoration: none; }
.ms-tree-item.active { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.ms-tree-icon { flex: none; font-size: 12px; line-height: 1; }
.ms-tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Arrange (drag-to-reorder) mode — sidebar tree + ticket-type list */
.ms-tree-row.arranging { cursor: grab; }
.ms-tree-row.arranging:active { cursor: grabbing; }
.ms-tree-row.dragover { box-shadow: inset 0 2px 0 var(--blue); }
/* Reparent target: the whole row is outlined to signal "drop here to nest under this page". */
.ms-tree-row.reparent { box-shadow: inset 0 0 0 2px var(--blue); border-radius: 6px; }
.ms-tree-drag { background: #f1f2f4; }
.ms-tree-grip { flex: none; color: var(--muted); font-size: 12px; line-height: 1; cursor: grab; }
/* Top-level drop zone shown while arranging: drop a page here to move it to the root. */
.ms-tree-rootdrop { margin: 0 0 6px; padding: 6px 8px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; text-align: center; }
.ms-tree-rootdrop.dragover { border-color: var(--blue); color: var(--blue); }
.ms-navlink-drag { cursor: grab; user-select: none; display: flex; align-items: center; gap: 7px; }
.ms-navlink-drag:active { cursor: grabbing; }
.ms-navlink-drag.dragover { box-shadow: inset 0 2px 0 var(--blue); }

/* Lock screens */
.ms-lockscreen { max-width: 520px; margin: 3rem auto; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 2.5rem; }
.ms-lockscreen .ms-lock-icon { font-size: 2.5rem; }

/* Ad-mode fallback login (LoginPanel) */
.ms-login-form { max-width: 300px; margin: 1rem auto 0; text-align: left; }
.ms-login-error { color: var(--red); font-size: 13px; margin: 0; }
.ms-signin-reason { color: var(--muted); font-size: 12px; margin: .35rem 0 0; overflow-wrap: anywhere; }

/* Timeline */
.ms-timeline { list-style: none; padding: 0; margin: 0; }
.ms-timeline li { border-left: 2px solid var(--line); padding: 0 0 16px 16px; position: relative; }
.ms-timeline li::before { content: ''; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

/* ===================== Attachments ===================== */
.ms-attachments { list-style: none; padding: 0; margin: 0; }
.ms-attachments li { display: flex; align-items: baseline; gap: .5rem; padding: 4px 0; flex-wrap: wrap; }
.ms-link { background: none; border: none; padding: 0; color: var(--blue); cursor: pointer; font: inherit; text-decoration: underline; }
.ms-link:hover { opacity: .8; }

/* ===================== Modal ===================== */
.ms-modal-backdrop { position: fixed; inset: 0; background: rgba(40,40,45,.32); display: flex; align-items: flex-start; justify-content: center; z-index: 100; padding-top: 9vh; }
.ms-modal { background: var(--bg); border-radius: 12px; padding: 18px; width: 460px; max-width: calc(100vw - 40px); max-height: 80vh; overflow-y: auto; box-shadow: 0 18px 50px rgba(40,40,45,.25); }
.ms-modal-lg { width: 960px; max-height: 85vh; }
.ms-modal-head { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 12px; }
.ms-modal-head h3 { margin: 0; font-size: 15.5px; }
.ms-modal-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 6px; border-radius: 6px; }
.ms-modal-close:hover { background: var(--line); color: var(--ink); }
.ms-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }

/* Small inline icon button (e.g. the Ergebnis-rule ⚙ next to a field label, Brush-up §10.5) */
.ms-icon-btn { background: none; border: none; cursor: pointer; padding: 0 2px; font-size: 13px; line-height: 1;
    color: var(--muted); border-radius: 5px; }
.ms-icon-btn:hover { background: var(--line); color: var(--ink); }

/* Verifies-result rule table (Brush-up §10.5) */
.ms-result-rule { border-collapse: collapse; width: 100%; font-size: 13px; }
.ms-result-rule th, .ms-result-rule td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ms-result-rule th { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ms-result-rule th .ms-amp-dot, .ms-result-rule td .ms-amp-dot { display: inline-block; vertical-align: middle; margin-right: 4px; }
.ms-result-rule .ms-num { width: 3.2rem; display: inline-block; }
.ms-result-rule .ms-range-sep { margin: 0 3px; color: var(--muted); }

/* Segmented control */
.ms-seg-group { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.ms-seg { padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--ink-soft); background: var(--bg); border: none; cursor: pointer; }
.ms-seg + .ms-seg { border-left: 1px solid var(--line-strong); }
.ms-seg.on { background: var(--ink); color: #fff; }

/* ===================== Wiki page ===================== */
.ms-wiki-layout { display: flex; gap: 40px; align-items: flex-start; position: relative; }
/* No max-width cap: the main column fills all width left over by the (resizable) TOC, so there is never
   right-hand slack. That keeps the TOC flush against the layout's right edge — where the resize handle is
   anchored — and lets dragging the TOC narrower widen the main column (even on wide screens). */
.ms-wiki-main { flex: 1; min-width: 0; }
.ms-breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
.ms-breadcrumbs a { color: var(--muted); }
.ms-breadcrumbs a:hover { color: var(--blue); }

/* Title + actions topline — wraps instead of overflowing into the TOC column */
.ms-wiki-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ms-wiki-title { font-size: 28px; font-weight: 700; margin: 0; letter-spacing: -0.015em; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; }
/* flex-shrink must stay 1 (not 0): the bar is a flex-wrap container, so it must be allowed to shrink below its
   single-line max-content for the inner wrap to engage — otherwise it overflows the main column into the TOC
   and off the right edge as the viewport narrows. justify-content:flex-end keeps it right-aligned when it wraps. */
.ms-wiki-actions { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; min-width: 0; padding-top: 2px; margin-left: auto; }
/* Confluence-style page actions: ghost buttons, border only on hover */
.ms-wiki-actions .ms-btn { border-color: transparent; background: transparent; color: var(--ink-soft); padding: 6px 10px; font-weight: 500; }
.ms-wiki-actions .ms-btn:hover { background: var(--panel); color: var(--ink); }
.ms-wiki-actions .ms-btn.ms-btn-primary { background: var(--blue); color: #fff; }
.ms-wiki-actions .ms-btn.ms-btn-primary:hover { background: var(--blue-dark); }
.ms-wiki-actions .ms-btn svg { color: var(--muted); }
.ms-wiki-actions .ms-btn:hover svg { color: var(--ink-soft); }
/* Overflow menu of the page/ticket action bar (OverflowActions): the first five actions stay inline. */
.ms-overflow { position: relative; display: inline-flex; }
.ms-overflow-toggle { padding: 6px 8px; }
.ms-overflow-backdrop { position: fixed; inset: 0; z-index: 49; }
.ms-overflow-pop { top: calc(100% + 4px); width: auto; min-width: 230px; }
.ms-overflow-item { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink-soft); }
.ms-overflow-item:disabled { opacity: .5; cursor: default; }
.ms-overflow-icon { display: inline-flex; width: 16px; justify-content: center; color: var(--muted); }
.ms-overflow-item.ms-menu-item-active .ms-overflow-icon, .ms-overflow-item.ms-menu-item-danger .ms-overflow-icon { color: inherit; }
.ms-overflow-item .ms-inline-badge { margin-left: auto; }

/* Metadata box (no outer card; the table carries its own grid) */
.ms-meta-wrap { margin-bottom: 24px; }
/* A meta value with a right-aligned badge in the same cell (e.g. classification + Pflichtlektüre) */
.ms-meta-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ms-mustread-badge { flex: none; background: #8a5a9e; color: #fff; }

/* Page body flows on white, no card border (Confluence-like) */
.ms-wiki-body { margin-bottom: 8px; }

/* Comments separated by a rule rather than a boxed card */
.ms-wiki-comments { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.ms-wiki-comments h3 { margin: 0 0 12px; font-size: 15px; }

/* Sticky "On this page" table of contents */
.ms-wiki-toc { flex: none; width: var(--ms-toc-w, 220px); align-self: flex-start; position: sticky; top: 0; padding-top: 4px; transition: width .15s ease; }
.ms-wiki-toc.collapsed { width: 32px; }
.ms-wiki-toc.collapsed nav { display: none; }
/* Drag handle for the TOC: a full-height bar in the gap between the page body and the TOC column. It is
   positioned in the (relative) layout container — not inside the sticky aside, whose height only matches its
   own content — so the grip spans the whole page. Its `right` tracks the TOC width var so it follows resizing. */
.ms-toc-resize-handle { position: absolute; top: 0; bottom: 0; right: calc(var(--ms-toc-w, 220px) + 16px); width: 8px; cursor: col-resize; border-radius: 3px; z-index: 5; }
.ms-toc-resize-handle:hover { background: var(--blue-soft); }
.ms-wiki-toc.collapsed + .ms-toc-resize-handle { display: none; }
/* The comment drawer has the rail (INLINE_COMMENTS §6.4): the TOC is hidden rather than unmounted, so the entries
   its <nav> received from the JS content pass survive until it is shown again. */
.ms-wiki-toc.drawer-open,
.ms-wiki-toc.drawer-open + .ms-toc-resize-handle { display: none; }
.ms-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.ms-wiki-toc.collapsed .ms-toc-head { justify-content: center; margin-bottom: 0; }
.ms-toc-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ms-toc-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border: none; background: transparent; border-radius: 6px; color: var(--muted); cursor: pointer; }
.ms-toc-toggle:hover { background: var(--panel); color: var(--ink); }
.ms-wiki-toc nav { display: flex; flex-direction: column; border-left: 2px solid var(--line); }
.ms-toc-link { display: block; padding: 4px 0 4px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.ms-toc-link:hover { color: var(--blue); text-decoration: none; }
.ms-toc-link:hover, .ms-toc-link.active { border-left-color: var(--blue); }
.ms-toc-h2 { padding-left: 26px; }
.ms-toc-h3 { padding-left: 38px; font-size: 12px; color: var(--muted); }

/* Wiki rendered content */
.ms-wiki-content { font-size: 14.5px; line-height: 1.65; color: var(--ink); overflow-wrap: break-word; }
/* The import no longer stores blank lines before the first heading (older pages fixed by the
   NormalizeLeadingBlankPagesAsync backfill). Keep one blank line of breathing room above the first
   block — consistent whether it starts with a heading or a paragraph, and no longer the doubled gap the
   old leading blank paragraphs produced. */
.ms-wiki-content > :first-child { margin-top: 24px; }
/* Comment text reuses the content renderer (image hydration) but sits directly under its author line. */
.ms-wiki-content.ms-comment-body > :first-child { margin-top: 0; }
.ms-wiki-content h1 { font-size: 24px; margin: 26px 0 8px; letter-spacing: -0.01em; }
.ms-wiki-content h2 { font-size: 19px; margin: 24px 0 6px; letter-spacing: -0.01em; }
.ms-wiki-content h3 { font-size: 16px; margin: 20px 0 4px; }
.ms-wiki-content h4 { font-size: 14.5px; margin: 16px 0 4px; }
.ms-wiki-content p { margin: 8px 0; text-wrap: pretty; }
.ms-wiki-content ul, .ms-wiki-content ol { margin: 8px 0; padding-left: 26px; }
.ms-wiki-content li { margin: 3px 0; }
.ms-wiki-content blockquote { margin: 10px 0; padding: 4px 14px; border-left: 3px solid var(--line-strong); color: var(--ink-soft); }
.ms-wiki-content pre { background: #2f3033; color: #e8e6e1; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; padding: 13px 16px; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; }
.ms-wiki-content img { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
/* Rendered tables stay a block-level scroll box so a genuinely wide table scrolls inside the content column
   instead of widening the page. Absolute pixel widths the Confluence import carried over (table
   style="width: 544.8px", colgroup <col style="width: 306px">) were captured in a different, narrower editor
   viewport: honoured literally they pinned the scroll box below the width the table actually needs, so the
   table clipped and showed a scrollbar even with room to spare. Drop them and let the content column decide
   the width; relative (%) widths are viewport-independent and are kept. */
.ms-wiki-content table { display: block; width: auto; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 12px 0; }
.ms-wiki-content table[style*="px"] { width: auto !important; }
.ms-wiki-content col[style*="px"] { width: auto !important; }
.ms-wiki-content th, .ms-wiki-content td { border: 1px solid var(--line-strong); padding: 6px 10px; text-align: left; vertical-align: top; }
.ms-wiki-content th { background: var(--panel); font-weight: 600; }
/* Once enhanceContent has wrapped a table, the wrapper is the scroll box and the table fills the content column
   (any stored width, absolute or relative, yields to that); a table whose content needs more grows past it and
   the wrapper scrolls. Unwrapped tables (diff view, before the enhancement pass) keep the rule above. */
.ms-wiki-content .ms-table-wrap { max-width: 100%; overflow-x: auto; margin: 12px 0; }
.ms-wiki-content .ms-table-wrap > table { display: table; width: 100% !important; max-width: none; overflow: visible; margin: 0; }
.ms-wiki-content th.ms-sortable { cursor: pointer; user-select: none; position: relative; padding-right: 22px; }
.ms-wiki-content th.ms-sortable:hover { background: var(--line); }
.ms-wiki-content th.ms-sortable::after { content: '\2195'; position: absolute; right: 7px; top: 7px; font-size: 11px; color: var(--muted); opacity: .45; }
.ms-wiki-content th.ms-sortable[aria-sort="ascending"]::after { content: '\25B2'; opacity: 1; color: var(--blue); }
.ms-wiki-content th.ms-sortable[aria-sort="descending"]::after { content: '\25BC'; opacity: 1; color: var(--blue); }
.ms-wiki-content a[data-page-link] { color: var(--blue); }

/* Checklists */
.ms-wiki-content ul.checklist { list-style: none; padding-left: 4px; }
.ms-wiki-content ul.checklist > li { display: flex; align-items: flex-start; gap: 9px; padding: 2px 0; }
.ms-wiki-content ul.checklist > li::before { content: '\2610'; color: var(--muted); }
.ms-wiki-content ul.checklist > li[data-checked="true"]::before { content: '\2611'; color: var(--blue); }
.ms-wiki-content ul.checklist > li[data-checked="true"] { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
/* The editor wraps each item's text in a paragraph; keep it flush with the checkbox glyph. */
.ms-wiki-content ul.checklist > li > p { margin: 0; }
/* In edit mode TaskItem renders its own interactive checkbox (a NodeView with data-type="taskItem"); suppress
   the read-view ::before glyph there so the box is not drawn twice. */
.ms-editor-area ul.checklist > li[data-type="taskItem"]::before { content: none; }

/* Ticket reference chips */
.ms-wiki-content span.ticket-ref { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--bg); border-radius: 7px; padding: 2px 9px; font-size: 12.5px; color: var(--ink); vertical-align: middle; box-shadow: 0 1px 2px rgba(40,40,45,.04); }
.ms-wiki-content span.ticket-ref:hover { border-color: var(--blue); cursor: pointer; }
.ms-wiki-content span.ticket-ref.broken { color: var(--muted); border-style: dashed; }
.ms-wiki-content span.ticket-ref.locked { color: var(--muted); border-style: dashed; }
/* M2.1 (B2): @-mention chip (display-only decoration applied by decorateMentions). */
.ms-mention { display: inline; border-radius: 4px; padding: 0 3px; font-weight: 600; color: var(--blue, #1f6eb4); background: rgba(31,110,180,.10); white-space: nowrap; }
.ms-wiki-content span.ticket-ref .chip-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; color: var(--ink-soft); }
.ms-wiki-content img.drawio-img { cursor: zoom-in; }

/* Ticket-list embed (Confluence jira/JQL macro → div.ticket-list; resolved live, or a placeholder in the editor) */
.ms-wiki-content .ticket-list { border: 1px solid var(--line); border-radius: 9px; margin: 12px 0; padding: 10px 12px; background: var(--bg); }
.ms-ticket-list-head { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.ms-ticket-list-jql { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; word-break: break-word; }
.ms-ticket-list-table { width: 100%; border-collapse: collapse; margin: 0; }
.ms-ticket-list-table tr { border-top: 1px solid var(--line); }
.ms-ticket-list-table tr:hover { background: var(--panel); }
.ms-ticket-list-table td { padding: 5px 8px; font-size: 13px; vertical-align: middle; border: none; }
.ms-ticket-list-table td.ms-tl-summary { width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Editor placeholder: the atom node is not resolved live, so it shows its configured filters instead. */
.ms-ticket-list-edit { border: 1px dashed var(--line-strong); border-radius: 9px; margin: 12px 0; padding: 10px 12px; background: var(--panel); font-size: 13px; color: var(--ink-soft); cursor: pointer; }

/* Excerpt/Include (EXCERPT_INCLUDE §5). In the editor, an excerpt is a dashed box labelled with its name; on the
   read view the marker is transparent (its content renders inline). An include placeholder shows as a chip in the
   editor; on read it is replaced server-side by the transcluded content, wrapped in .ms-included. */
.ms-wiki-content .ms-excerpt, .ms-editor-area .ms-excerpt {
  position: relative; border: 1px dashed var(--line-strong); border-radius: 9px;
  margin: 12px 0; padding: 16px 12px 12px; background: var(--panel);
}
.ms-editor-area .ms-excerpt::before {
  content: "✂ " attr(data-excerpt-name);
  position: absolute; top: -9px; left: 10px; padding: 0 6px; background: var(--bg);
  font-size: 11px; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em;
}
.ms-include-edit { border: 1px dashed var(--line-strong); border-radius: 9px; margin: 12px 0; padding: 10px 12px; background: var(--panel); font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.ms-wiki-content .ms-included { border-left: 3px solid var(--line-strong); padding-left: 12px; margin: 8px 0; }
.ms-wiki-content .ms-include-locked, .ms-wiki-content .ms-include-broken {
  color: var(--muted); font-size: 13px; border-left-style: dashed;
}

/* Subpages macro (SUBPAGES_MACRO §5). In the editor, the marker is a chip; on read it is replaced server-side by a
   nested link list of the child pages (.ms-subpages-rendered), with unreadable children shown non-clickable. */
.ms-subpages-edit { border: 1px dashed var(--line-strong); border-radius: 9px; margin: 12px 0; padding: 10px 12px; background: var(--panel); font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.ms-wiki-content .ms-subpages-rendered { border-left: 3px solid var(--line-strong); padding-left: 12px; margin: 8px 0; }
.ms-wiki-content .ms-subpages-rendered ul { margin: 4px 0; padding-left: 20px; }
.ms-wiki-content .ms-subpages-rendered .ms-subpage-locked { color: var(--muted); list-style: none; margin-left: -20px; }
.ms-wiki-content .ms-subpages-empty { color: var(--muted); font-size: 13px; font-style: italic; }

/* Profile macro (PROFILE_MACRO §5.2). In the editor, the marker is a chip; on read it is replaced server-side by a
   small person card (.ms-profile-card): avatar (initials + colour) + display name + optional mailto link. */
.ms-profile-edit { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--line-strong); border-radius: 9px; margin: 6px 0; padding: 6px 10px; background: var(--panel); font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.ms-wiki-content .ms-profile-card { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 6px 0; background: var(--panel); max-width: 100%; vertical-align: top; }
.ms-wiki-content .ms-profile-card .ms-avatar { color: #fff; flex: 0 0 auto; }
.ms-wiki-content .ms-profile-card .ms-profile-name { font-weight: 600; color: var(--ink); }
.ms-wiki-content .ms-profile-card .ms-profile-mail { color: var(--blue, #1f6eb4); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.ms-wiki-content .ms-profile-card .ms-profile-mail:hover { text-decoration: underline; }
.ms-wiki-content .ms-profile-card.ms-profile-inactive { opacity: .6; }
.ms-wiki-content .ms-profile-card.ms-profile-inactive .ms-profile-name::after { content: " (inaktiv)"; font-weight: 400; color: var(--muted); font-size: 12px; }

/* Status badge (Confluence `status` macro → inline lozenge; also produced/edited by the rich-text editor) */
.ms-status {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.55; vertical-align: middle;
  white-space: nowrap; border: 1px solid transparent;
}
.ms-status-grey { background: #dfe1e6; color: #42526e; }
.ms-status-red { background: #ffece9; color: #ae2e24; }
.ms-status-yellow { background: #fff3cf; color: #7f5f01; }
.ms-status-green { background: #dcfff1; color: #216e4e; }
.ms-status-blue { background: #e9f2ff; color: #0055cc; }
.ms-status-purple { background: #f3f0ff; color: #5e4db2; }

/* Status-badge colour picker (editor modal) */
.ms-status-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.ms-status-picker .ms-status { cursor: pointer; opacity: .65; }
.ms-status-picker .ms-status.on { opacity: 1; box-shadow: 0 0 0 2px var(--blue); }

/* Numbered headings (CSS counters — toggled via .numbered-headings on the content root) */
.numbered-headings { counter-reset: h1; }
.numbered-headings h1 { counter-reset: h2; counter-increment: h1; }
.numbered-headings h2 { counter-reset: h3; counter-increment: h2; }
.numbered-headings h3 { counter-increment: h3; }
.numbered-headings h1::before { content: counter(h1) "  "; color: var(--muted); font-weight: 600; }
.numbered-headings h2::before { content: counter(h1) "." counter(h2) "  "; color: var(--muted); font-weight: 600; }
.numbered-headings h3::before { content: counter(h1) "." counter(h2) "." counter(h3) "  "; color: var(--muted); font-weight: 600; }

/* ===================== Rich-text editor (TipTap) ===================== */
/* §8.2: the wrap must NOT establish its own scroll container (overflow other than visible traps the sticky
   toolbar inside it, so it scrolls away with the page). Keep visible overflow and round the corners on the
   toolbar/area instead so the toolbar can stick to the page scroller (.ms-content) and stay visible. */
.ms-editor-wrap { border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg); }
.ms-editor-toolbar { display: flex; align-items: center; gap: 3px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; position: sticky; top: 0; z-index: 5; border-top-left-radius: 9px; border-top-right-radius: 9px; }
.ms-editor-toolbar select { border: 1px solid var(--line-strong); border-radius: 6px; font-size: 12.5px; padding: 4px 6px; background: var(--bg); font-family: inherit; }
.ms-editor-toolbar .tb-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 5px; }
.ms-tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 28px; height: 28px; padding: 0 7px; border: none; border-radius: 6px; background: transparent; cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.ms-tb-btn:hover { background: var(--line); color: var(--ink); }
.ms-tb-btn.on { background: var(--blue-soft); color: var(--blue); }
.ms-tb-btn input[type=color] { width: 18px; height: 18px; border: none; background: none; padding: 0; cursor: pointer; }
.ms-editor-area { min-height: 340px; padding: 16px 20px; outline: none; }
.ms-editor-area:focus { outline: none; }
.ms-editor-area .ProseMirror { outline: none; min-height: 320px; }
/* A comment box is not a page editor: 340px is far too tall for a two-liner, and inside the inline-comment
   card it pushed the buttons out of the window entirely. The size follows the editor's own Compact flag
   rather than whoever hosts it, so every comment field is the same height. The contenteditable child carries
   its own minimum (above) and would push the box back open, so it comes down too: 96px less the padding. */
.ms-editor-wrap.compact .ms-editor-area { min-height: 96px; padding: 8px 10px; }
.ms-editor-wrap.compact .ms-editor-area .ProseMirror { min-height: 80px; }
.ms-editor-area table { border-collapse: collapse; margin: 12px 0; }
.ms-editor-area th, .ms-editor-area td { border: 1px solid var(--line-strong); padding: 6px 10px; min-width: 40px; position: relative; }
.ms-editor-area th { background: var(--panel); }
.ms-editor-area .selectedCell { background: rgba(31,110,180,.10); }
.ms-editor-area .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background: var(--blue); cursor: col-resize; }
.ms-editor-area .ProseMirror-gapcursor { display: block; }
/* Right-click menu inside an editor table (row/column editing); appended to <body>, fixed at the pointer. */
.ms-table-menu { position: fixed; z-index: 1000; min-width: 210px; padding: 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 32px rgba(40,40,45,.15); }
.ms-table-menu-item { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; color: var(--ink); }
.ms-table-menu-item:hover:not(:disabled) { background: var(--panel); }
.ms-table-menu-item.danger { color: var(--red); }
.ms-table-menu-item.danger:hover:not(:disabled) { background: var(--red); color: #fff; }
.ms-table-menu-item:disabled { color: var(--muted); cursor: default; }
.ms-table-menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }

.ms-editor-numbered { padding: 5px 10px; border-bottom: 1px solid var(--line); background: var(--bg); }
.ms-inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); margin: 0; cursor: pointer; }
.ms-inline-check input { margin: 0; }

/* Free-Stichtag row under the capture list in the aggregate snapshot dialogs (Risikomatrix, SoA).
   Separated by a rule because it is a different kind of choice: not "which capture", but "which day". */
.ms-asof-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }

/* Picker list (link page / ticket pickers) */
.ms-picker-list { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto; }
.ms-picker-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: none; background: transparent; border-radius: 7px; font-size: 13px; width: 100%; cursor: pointer; text-align: left; }
.ms-picker-row:hover { background: var(--panel); }

/* draw.io modal */
.ms-drawio-backdrop { align-items: center; }
.ms-drawio-modal { width: 80vw; height: 80vh; max-width: none; max-height: none; padding: 0; display: flex; flex-direction: column; resize: both; overflow: hidden; min-width: 480px; min-height: 360px; }
.ms-drawio-modal.maxed { width: calc(100vw - 24px); height: calc(100vh - 24px); }
.ms-drawio-body { flex: 1; position: relative; min-height: 0; }
.ms-drawio-frame { width: 100%; height: 100%; border: none; }
.ms-drawio-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: var(--bg); }
.ms-drawio-foot { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* ===================== Media lightbox (double-click an image/diagram to enlarge; zoom + pan) ===================== */
body.ms-lightbox-open { overflow: hidden; }
.ms-lightbox-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(20,20,24,.82); overflow: hidden; }
.ms-lightbox-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; }
.ms-lightbox-stage.zoomed { cursor: grab; }
/* Sized explicitly in px by the viewer (zoom = real size change, so SVG diagrams re-rasterise crisply); the
   image is absolutely positioned and translated for panning, hence not part of the stage's flex centering. */
.ms-lightbox-img { position: absolute; top: 0; left: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; will-change: transform, width, height; background: #fff; border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.5); touch-action: none; }
.ms-lightbox-stage.zoomed .ms-lightbox-img { cursor: grab; }
.ms-lightbox-stage.zoomed .ms-lightbox-img:active { cursor: grabbing; }
.ms-lightbox-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(30,30,34,.9); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 201; }
.ms-lightbox-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: none; border-radius: 999px; background: transparent; color: #f2f2f4; font-size: 16px; line-height: 1; cursor: pointer; }
.ms-lightbox-btn:hover { background: rgba(255,255,255,.16); }
.ms-lightbox-pct { min-width: 48px; text-align: center; color: #f2f2f4; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Version compare (git-style inline diff) */
.ms-diff ins, ins.ms-diff-ins { background: #e6ffed; color: #04631f; text-decoration: none; border-radius: 2px; }
.ms-diff del, del.ms-diff-del { background: #ffeef0; color: #9b1c2c; text-decoration: line-through; border-radius: 2px; }
.ms-diff-field { margin: 10px 0; }
.ms-diff-field > .ms-diff-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; }
.ms-compare-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* Inserted / removed image or draw.io diagram (§9 media diff). */
.ms-diff ins img { outline: 2px solid #04631f; }
.ms-diff del img { outline: 2px solid #9b1c2c; opacity: .65; }
/* Changed image/diagram: before/after thumbnails side by side. */
.ms-diff-media-changed { display: inline-flex; gap: 8px; align-items: center; padding: 4px 6px;
    border: 1px dashed #b08800; border-radius: 4px; background: #fffbe6; vertical-align: middle; }
.ms-diff-media-changed > del, .ms-diff-media-changed > ins { background: none; }
.ms-diff-media-changed img { max-height: 140px; max-width: 220px; }

/* ===================== Phase 5: Risk matrix, dashboard, my-tasks ===================== */

/* KPI tiles + dashboard cards */
.ms-kpi { text-align: left; cursor: default; font: inherit; }
button.ms-kpi { cursor: pointer; }
button.ms-kpi:hover { border-color: var(--line-strong); }
.ms-num-red { color: var(--red); }
.ms-num-amber { color: var(--amber-ink); }

.ms-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.ms-dash-grid .ms-section { margin-bottom: 0; }
.ms-dash-grid h3 { margin-top: 0; }
.ms-dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ms-dash-list li { padding: 7px 6px; border-bottom: 1px solid var(--line); font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-dash-list li:last-child { border-bottom: none; }
.ms-dash-list li.ms-row-click { cursor: pointer; border-radius: 6px; }
.ms-dash-list li.ms-row-click:hover { background: var(--bg); }

/* Status-overview bars */
.ms-bar-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 6px; }
.ms-bar-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.ms-bar-name { width: 110px; font-size: 12.5px; color: var(--ink-soft); flex: none; }
.ms-bar-track { flex: 1; background: var(--panel); border-radius: 6px; height: 14px; overflow: hidden; }
.ms-bar-fill { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.ms-bar-count { width: 28px; text-align: right; font-size: 12.5px; font-weight: 600; flex: none; }

/* Empty state (my tasks) */
.ms-empty { text-align: center; color: var(--muted); padding: 48px 0; }
.ms-empty-icon { font-size: 2.5rem; color: var(--green); }

/* Segmented toggles */
.ms-segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.ms-seg { background: var(--bg); border: none; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-soft); border-right: 1px solid var(--line); }
.ms-seg:last-child { border-right: none; }
.ms-seg.active { background: var(--blue); color: #fff; font-weight: 600; }

/* Score bands (shared by full + mini matrix) */
.ms-band-green { background: #e4f2ea; }
.ms-band-amber { background: var(--amber-bg); }
.ms-band-red { background: #fde8e3; }

/* Full 4×4 risk matrix */
.ms-risk-wrap { overflow-x: auto; margin: 8px 0 16px; }
.ms-risk-grid { border-collapse: collapse; }
.ms-risk-grid th { background: var(--panel); color: var(--ink-soft); font-size: 12px; font-weight: 700; padding: 6px 10px; border: 1px solid var(--line); text-align: center; }
.ms-risk-grid .ms-risk-corner { font-size: 11px; font-weight: 600; white-space: nowrap; }
.ms-risk-cell { border: 1px solid var(--line-strong); width: 120px; height: 74px; vertical-align: top; padding: 4px; position: relative; }
.ms-risk-score { position: absolute; top: 2px; right: 4px; font-size: 11px; color: var(--ink-soft); opacity: .6; }
.ms-risk-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.ms-risk-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; border: none; cursor: pointer; }
/* Band-classed dots keep the base dark bg + white number (matching the grid dots); the score band is already
   conveyed by the cell/row. Only the Ziel-gap markers below recolor the dot. */
/* Ziel-gap markers (residual ≠ target): orange = additional measure in progress, red = missing. */
.ms-risk-dot.ms-marker-orange { background: #e8862b; color: #fff; border: none; }
.ms-risk-dot.ms-marker-red { background: #d64828; color: #fff; border: none; }

/* Matrix legend + expandable list with measures sub-table */
.ms-risk-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 12px; font-size: 12px; color: var(--ink-soft); }
.ms-risk-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ms-risk-legend .ms-risk-dot { width: 14px; height: 14px; font-size: 0; }
.ms-risk-table .ms-risk-expandcol { width: 24px; text-align: center; }
.ms-chevron { display: inline-block; transition: transform .12s ease; color: var(--ink-soft); }
.ms-chevron.open { transform: rotate(90deg); }
.ms-subrow > td { background: var(--panel); padding: 0; }
.ms-submeasures { padding: 6px 6px 10px 34px; }
.ms-submeasures-title { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 4px 0; }
.ms-subtable { width: 100%; font-size: 13px; }
.ms-subtable th { font-size: 11px; color: var(--ink-soft); }
.ms-measure-pending td { background: #fff6ec; }

/* Mini matrix (ticket detail sidebar) */
.ms-minirisk-grid { border-collapse: collapse; }
.ms-minirisk-grid td { width: 26px; height: 26px; border: 1px solid var(--line); text-align: center; vertical-align: middle; position: relative; }
.ms-minirisk-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; }
.ms-minirisk-dot.before { background: var(--muted); }
.ms-minirisk-dot.after { background: var(--green); }
/* Brush-up §10.5: third risk state (target). */
.ms-minirisk-dot.target { background: #1f6eb4; }
/* Brush-up §10.5 collapsible field groups + §10.3 relation editor. */
.ms-field-group { margin: 6px 0; border: 1px solid var(--line, #e3e6ea); border-radius: 6px; padding: 4px 8px; }
.ms-field-group > summary { cursor: pointer; font-weight: 600; font-size: 12px; color: var(--ink-soft); }
.ms-field-edit { margin-bottom: 6px; }
.ms-relation-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; flex-wrap: wrap; }
.ms-relation-result { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft); }
.ms-relation-add { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.ms-minirisk-legend { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.ms-minirisk-legend > span { display: flex; align-items: center; gap: 6px; }

/* Brush-up §5/§12 — elevation toggle + settings panels */
.ms-btn-elevated { background: var(--green, #0e7a4f); color: #fff; }
/* Remaining time on the running elevation — subordinate to the label, still legible on the green fill. */
.ms-elevation-remaining { margin-left: .4rem; opacity: .8; font-size: .85em; font-variant-numeric: tabular-nums; }
.ms-ok { color: var(--green, #0e7a4f); font-size: 12px; margin-left: 8px; }
.ms-inline { display: inline-flex; align-items: center; gap: 4px; }
.ms-danger { color: var(--red, #b3261e); }

/* Brush-up §18.2 — Statement of Applicability + control references */
.ms-soa-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ms-soa-coverage { font-size: 15px; margin-right: 8px; }
.ms-soa-table td { vertical-align: top; }
.ms-soa-table textarea.ms-input { min-width: 12rem; }
/* SoA "Umsetzung" cell: the measure's richtext, formatted but as compact as the plain cells around it. */
.ms-soa-rich { font-size: inherit; line-height: 1.5; }
.ms-soa-rich > :first-child { margin-top: 0; }
.ms-soa-rich > :last-child { margin-bottom: 0; }
.ms-soa-rich p { margin: 0 0 4px; }
.ms-soa-rich h1, .ms-soa-rich h2, .ms-soa-rich h3, .ms-soa-rich h4 { font-size: inherit; margin: 6px 0 2px; }
.ms-soa-rich ul, .ms-soa-rich ol { margin: 2px 0 4px; padding-left: 20px; }
.ms-soa-rich li { margin: 1px 0; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px;
           background: var(--surface-2, #eef1f4); font-size: 12px; }
.ms-chip-x { border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1;
             color: var(--muted, #6b7280); padding: 0; }
.ms-chip-x:hover { color: var(--red, #b3261e); }

/* ============================================================================
   Brush-up §13 — Dashboard redesign: tile grid, traffic-light tiles, inline SVG charts.
   Charts are pure inline SVG/markup (CSP-safe — no external assets, no scripts).
   ============================================================================ */
.ms-dash-section { margin-top: 22px; }

/* Pinned quick-access bar: never hideable, lifted off the page with a tint, border and spacing (§13). */
.ms-dash-pinned { margin: 16px 0 26px; padding: 16px; background: var(--panel, #eef1f4);
                  border: 1px solid var(--line); border-radius: 12px; }

.ms-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

/* Report-action tiles in the pinned bar: same footprint as a data tile, centred call-to-action layout. */
.ms-tile-action { align-items: center; justify-content: center; text-align: center; gap: 10px; font-weight: 600; color: var(--ink); }
.ms-tile-action .ms-tile-action-icon { font-size: 1.9rem; line-height: 1; }
.ms-tile-action .ms-tile-action-label { font-size: 13.5px; }
.ms-tile-action.ms-action-security { border-left-color: var(--red, #b3261e); }
.ms-tile-action.ms-action-privacy { border-left-color: #8a5a9e; }
/* Anonymous concern report: the grey bar of the quick-access row, and its dialog's hints. */
.ms-tile-action.ms-action-concern { border-left-color: var(--muted, #6b7280); }
.ms-concern-hint { margin: 0 0 .75rem; color: var(--muted, #6b7280); font-size: 13px; }
.ms-concern-info { cursor: help; margin-left: 4px; color: var(--muted, #6b7280); }

.ms-tile { display: flex; flex-direction: column; gap: 8px; text-align: left; font: inherit;
           background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--muted);
           border-radius: 10px; padding: 12px 14px; cursor: pointer; min-height: 118px; transition: border-color .12s, box-shadow .12s; }
.ms-tile:hover { border-color: var(--line-strong); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.ms-tile.ms-amp-green { border-left-color: var(--green, #0e7a4f); }
.ms-tile.ms-amp-amber { border-left-color: var(--amber-ink, #b3702a); }
.ms-tile.ms-amp-red { border-left-color: var(--red, #b3261e); }
.ms-tile.ms-amp-grey { border-left-color: var(--muted, #6b7280); }

.ms-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ms-tile-title { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.ms-amp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); }
.ms-amp-dot.ms-amp-green { background: var(--green, #0e7a4f); }
.ms-amp-dot.ms-amp-amber { background: var(--amber-ink, #b3702a); }
.ms-amp-dot.ms-amp-red { background: var(--red, #b3261e); }
.ms-amp-dot.ms-amp-grey { background: var(--muted, #6b7280); }

.ms-tile-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; }
/* The leitzahl never shrinks — the visualization beside it gives way instead. */
.ms-tile-value { flex: none; font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1; }
.ms-tile-viz { flex: none; width: 84px; max-width: 50%; }
/* Wide body: the risk heatmap (its visualization *is* the content, no leitzahl) and the bar charts, which need
   room for a readable label column. min-width:0 is what makes them, and not the leitzahl, absorb a narrow tile. */
.ms-tile-viz-wide { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; }
.ms-tile-sub { font-size: 12px; color: var(--ink-soft); }

/* Inline SVG chart primitives */
.ms-chart { display: block; width: 100%; height: auto; }
.ms-donut { max-height: 64px; }
.ms-donut-track { stroke: var(--panel, #eef1f4); }
.ms-donut-center { font-size: 9px; font-weight: 700; fill: var(--ink); }
.ms-gauge { max-height: 48px; }
.ms-gauge-track { stroke: var(--panel, #eef1f4); }
.ms-gauge-value { font-size: 8px; font-weight: 700; fill: var(--ink); }
.ms-sparkline { height: 40px; }
.ms-sparkline-fill { opacity: .12; stroke: none; }

/* Trend line chart (Vulnerability-Scan-Import §4.1): critical/high/systems on the left axis, average on the right */
.ms-trendchart { width: 100%; }
.ms-trend-svg { max-height: 220px; }
.ms-trend-legend { display: flex; gap: 1rem; margin-bottom: .35rem; font-size: .82rem; color: var(--ink-muted, #667); }
.ms-trend-key { display: inline-flex; align-items: center; gap: .35rem; }
.ms-trend-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; }
/* The average rides the right-hand axis and is drawn dashed: a bar, not a square, keeps the legend honest. */
.ms-trend-swatch-line { width: 1rem; height: .2rem; border-radius: 1px; }
.ms-trend-grid { stroke: var(--panel, #e6e9ee); stroke-width: 1; }
.ms-trend-ytick, .ms-trend-xtick { font-size: 10px; fill: var(--ink-muted, #8a90a0); }
/* Hover interaction: a fat transparent path per line+Stichtag is the hit target (see TrendChart.razor), the read-out
   itself never takes the pointer, or moving onto the card would drop the hover it is showing. */
.ms-trend-key { cursor: default; }
/* Grouped bar chart (GroupedBarChart.razor): the column is the button, the bar only its visible part. */
.ms-groupbar { width: 100%; margin-bottom: .4rem; }
.ms-groupbar-scroll { overflow-x: auto; }
.ms-groupbar-svg { display: block; width: 100%; min-width: 560px; max-height: 240px; }
.ms-groupbar-col { cursor: pointer; outline: none; }
.ms-groupbar-hit { fill: transparent; }
.ms-groupbar-col:hover .ms-groupbar-hit, .ms-groupbar-col:focus-visible .ms-groupbar-hit { fill: var(--panel); }
.ms-groupbar-col:focus-visible .ms-groupbar-hit { stroke: var(--blue); stroke-width: 1.5; }
.ms-groupbar-col-sel .ms-groupbar-hit { fill: var(--blue-soft); }
.ms-groupbar-base { stroke: var(--line-strong); stroke-width: 1; }
.ms-groupbar-xtick-sel { font-weight: 700; fill: var(--ink); }
.ms-groupbar-value { font-size: 10.5px; font-weight: 700; fill: var(--ink); }
.ms-trend-selection { font-size: .95rem; margin: .6rem 0 .5rem; }
.ms-trend-key-dim { opacity: .4; }
.ms-trend-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: crosshair; }
.ms-trend-hit-dot { fill: transparent; stroke: none; pointer-events: all; cursor: crosshair; }
.ms-trend-guide { stroke: var(--line-strong, #b8bfcc); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.ms-trend-ring, .ms-trend-tip { pointer-events: none; }
.ms-trend-tip-box { fill: #1f2430; stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.ms-trend-tip-date { font-size: 9.5px; fill: #b9c0cc; }
.ms-trend-tip-label { font-size: 11px; fill: #fff; }
.ms-trend-tip-value { font-size: 11px; font-weight: 700; fill: #fff; }

/* Mini-bar (one row per segment). ONE layout for every bar tile — Vorfälle, Abweichungen, Verbesserungen,
   Pflichtlektüre, Meine Aufgaben, Mitarbeiter — so they all read alike:
     label  the only flexible column, clipped with an ellipsis (the row tooltip carries full text + value)
     track  a short fixed width: comparable between tiles, and it leaves the leitzahl its room
     count  fixed per chart from the widest value (MiniBar.razor sets --ms-minibar-count-ch), tabular digits
   Alignment is structural, not a coincidence of the label lengths: every row gives the label flex-basis 0 and
   the two other columns identical widths, so all bars start and end on the same pixel. The block is capped at
   --ms-minibar-w and right-aligned, which is what keeps the leitzahl readable in a wide tile. */
.ms-minibar { --ms-minibar-w: 190px; display: flex; flex-direction: column; gap: 4px;
              width: 100%; max-width: var(--ms-minibar-w); margin-left: auto; }
.ms-minibar-row { display: flex; align-items: center; gap: 6px; }
.ms-minibar-name { flex: 1 1 0; min-width: 0; font-size: 11px; color: var(--ink-soft);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-minibar-track { flex: none; width: 46px; background: var(--panel, #eef1f4); border-radius: 4px; height: 9px; overflow: hidden; }
.ms-minibar-fill { display: block; height: 100%; border-radius: 4px; min-width: 1px; }
.ms-minibar-count { flex: none; width: calc(var(--ms-minibar-count-ch, 3) * 1ch); font-size: 11.5px; font-weight: 600;
                    text-align: right; font-variant-numeric: tabular-nums; }

/* Risk heatmap tile (4×4, fixed to Netto) with per-level counts. No toggle — the Brutto/Netto/Ziel switch
   lives in the risk-matrix modal opened by clicking the tile. Layout: counts in a narrow column on the left,
   grid on the right taking all remaining room (square cells via the 1:1 aspect-ratio on the grid). */
.ms-heatmap { display: flex; align-items: center; gap: 10px; width: 100%; }
.ms-heatmap-levels { display: flex; flex-direction: column; gap: 4px; flex: none;
                     font-size: 10.5px; color: var(--ink-soft); }
.ms-heatmap-level { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.ms-heatmap-level .ms-amp-dot { width: 8px; height: 8px; }
/* With the leitzahl gone, these three counts carry the numbers — give them the ink. */
.ms-heatmap-level-n { font-size: 13px; color: var(--ink); }
.ms-heatmap-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
                   min-width: 92px; max-width: 168px; aspect-ratio: 1; margin-left: auto; }
.ms-heatmap-cell { display: flex; align-items: center; justify-content: center;
                   border: 1px solid var(--line); border-radius: 2px; min-height: 0; }
.ms-heatmap-count { font-size: 11.5px; font-weight: 700; color: var(--ink); }

/* Dashboard header (title + customize gear) */
.ms-dash-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ms-btn-icon { background: transparent; border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 34px;
               font-size: 17px; line-height: 1; cursor: pointer; color: var(--ink-soft); flex: none; }
.ms-btn-icon:hover { border-color: var(--line-strong); color: var(--ink); }

/* Dashboard tile-visibility config modal */
.ms-dashcfg-intro { margin: 0 0 10px; font-size: 13px; }
.ms-dashcfg-section { margin-bottom: 12px; }
.ms-dashcfg-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13.5px; cursor: pointer; }
.ms-dashcfg-row input { cursor: pointer; }
.ms-dashcfg-row-locked { color: var(--muted); cursor: not-allowed; }
.ms-dashcfg-row-locked input { cursor: not-allowed; }
.ms-dashcfg-lock { margin-left: auto; font-size: 12px; opacity: .7; }

/* Settings → Dashboard: role-defaults / tile-gating matrices */
.ms-dashadmin-table { display: block; overflow-x: auto; }
.ms-dashadmin-table th, .ms-dashadmin-table td { white-space: nowrap; }
.ms-dashadmin-cell { text-align: center; }
.ms-dashadmin-tilehead span { display: inline-block; font-weight: 600; font-size: 12px; }

/* Interactive risk-matrix modal: mode switch, selected bubble, detail box */
.ms-risk-modal-modes { margin-bottom: 12px; }
.ms-risk-dot-selected { outline: 3px solid var(--blue, #1f6eb4); outline-offset: 1px; }
.ms-risk-detail { border: 1px solid var(--line); border-left: 4px solid var(--blue, #1f6eb4); border-radius: 8px;
                  padding: 10px 12px; margin-top: 4px; background: var(--bg); }
.ms-risk-detail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ms-risk-detail-head .ms-risk-dot { width: 22px; height: 22px; }
.ms-risk-detail-body { font-size: 13.5px; color: var(--ink); }
.ms-risk-detail-body :is(p, ul, ol) { margin: 4px 0; }
.ms-risk-detail-link { display: inline-block; margin-top: 8px; font-weight: 600; }
.ms-risk-detail-hint { margin-top: 8px; font-size: 13px; }

/* Detail modal */
.ms-detail-toggle { margin-bottom: 12px; }
.ms-detail-table { width: 100%; }
.ms-detail-table a { color: var(--blue, #1f6eb4); text-decoration: none; }
.ms-detail-table a:hover { text-decoration: underline; }
.ms-detail-table td .ms-amp-dot { display: inline-block; vertical-align: middle; }
/* Year-plan (Kalender) month separator inside the My-Tasks detail table. */
.ms-plan-month > th { padding-top: 14px; text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted, #6b7280); border-bottom: 1px solid var(--line, #e3e5e8); }
.ms-overdue { color: var(--red, #b3261e); font-weight: 600; }
.ms-btn-sm { padding: 2px 8px; font-size: 12px; }
.ms-mustread-group { margin-bottom: 14px; }

/* ---- M2.3 (B3): column-picker dropdown ---- */
.ms-dropdown { position: relative; display: inline-block; }
.ms-dropdown > summary { list-style: none; cursor: pointer; user-select: none; }
.ms-dropdown > summary::-webkit-details-marker { display: none; }
.ms-dropdown-panel { position: absolute; right: 0; z-index: 60; margin-top: .25rem; min-width: 12rem;
  background: var(--surface, #fff); border: 1px solid var(--line, #d4d0c8); border-radius: 6px;
  padding: .35rem; box-shadow: 0 6px 18px rgba(0,0,0,.14); }

/* ---- M2.3 (B3): print / audit report stylesheet ---- */
@media print {
  /* Chrome shell + interactive chrome collapse to a clean, paper-friendly document. */
  .ms-sidebar, .ms-topbar, nav.ms-sidebar, .ms-toolbar, .ms-tabs, .ms-seg-group,
  .ms-pager, .ms-dropdown, .ms-fab, .ms-modal-backdrop, button, .no-print { display: none !important; }
  .ms-shell, .ms-main, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .ms-content, main { max-width: none !important; box-shadow: none !important; }
  a[href]::after { content: ""; } /* don't append URLs to links in print */
  /* Keep the audit surfaces — workflow-history timeline, versions, ticket/list tables — visible and unbroken. */
  .ms-printable, .ms-timeline, .ms-wiki-content, .ms-table { display: table; width: 100%; }
  .ms-timeline { display: block; }
  .ms-timeline li, .ms-table tr { break-inside: avoid; }
  .ms-pill, .ms-mention { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- M2.4 (B4): command palette + breadcrumbs ---- */
.ms-palette { display: flex; flex-direction: column; gap: .25rem; min-width: min(38rem, 80vw); }
.ms-palette-group { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: .5rem .25rem .15rem; }
.ms-palette-row { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  padding: .45rem .55rem; border: none; background: transparent; border-radius: 5px; cursor: pointer;
  font: inherit; color: var(--ink); }
.ms-palette-row:hover, .ms-palette-row:focus-visible { background: var(--blue-soft); outline: none; }
.ms-palette-kind { flex: none; width: 1.25rem; text-align: center; }

.ms-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: 12.5px;
  color: var(--muted); margin: 0 0 .75rem; }
.ms-crumb { color: var(--ink-soft); }
.ms-crumb-current { color: var(--ink); font-weight: 600; }
.ms-crumb-sep { color: var(--line-strong); }

/* ---- M2.5 (B5): PDF preview ---- */
.ms-pdf-preview { max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.ms-pdf-page { max-width: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.18); border: 1px solid var(--line); }

/* ===================== M3.3 (C3): dark theme tokens ===================== */
/* The palette is token-only: components read var(--…), so a single token set switch re-themes the whole app.
   Manual choice wins via [data-theme] on <html>; with no attribute ("auto") the system preference applies. */
:root[data-theme="dark"],
:root[data-theme="dark"] body {
    --bg: #1d2125;
    --panel: #22272b;
    --line: #2c333a;
    --line-strong: #3a444d;
    --ink: #c7d1db;
    --ink-soft: #9fb0c0;
    --muted: #8c9bab;
    --blue: #4c9aff;
    --blue-dark: #85b8ff;
    --blue-soft: #1c2b41;
    --green: #4bce97;
    --red: #f87168;
    --amber-bg: #332b1a;
    --amber-line: #564a2e;
    --amber-ink: #f5cd47;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    /* "auto" (no explicit choice): follow the OS. An explicit data-theme="light" opts back out. */
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --bg: #1d2125;
        --panel: #22272b;
        --line: #2c333a;
        --line-strong: #3a444d;
        --ink: #c7d1db;
        --ink-soft: #9fb0c0;
        --muted: #8c9bab;
        --blue: #4c9aff;
        --blue-dark: #85b8ff;
        --blue-soft: #1c2b41;
        --green: #4bce97;
        --red: #f87168;
        --amber-bg: #332b1a;
        --amber-line: #564a2e;
        --amber-ink: #f5cd47;
        color-scheme: dark;
    }
}

/* ---- Inline comments (INLINE_COMMENTS §6) --------------------------------------------------------------
   The highlight spans are injected by sumex-interop.js at view time and are never part of the stored HTML,
   so nothing here may rely on markup the editor could produce. */
.ms-wiki-content span.ms-inline-comment {
    background: rgba(240, 197, 62, .38); border-bottom: 2px solid rgba(202, 154, 20, .55);
    cursor: pointer; border-radius: 2px; transition: background .12s ease;
}
.ms-wiki-content span.ms-inline-comment:hover { background: rgba(240, 197, 62, .62); }
.ms-wiki-content span.ms-inline-comment.active { background: rgba(240, 168, 62, .75); }
/* Overlapping threads share one span; the darker underline says "more than one conversation here". */
.ms-wiki-content span.ms-inline-comment.overlap { border-bottom: 2px double rgba(160, 110, 10, .85); }
/* A resolved thread has no highlight — this is the temporary "show" ghost from the drawer (§6.4). */
.ms-wiki-content span.ms-inline-comment.ghost {
    background: transparent; border-bottom: 2px dashed var(--muted, #7a7468);
}

.ms-inline-badge {
    display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 4px; border-radius: 8px;
    background: var(--blue, #1f6eb4); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px;
    text-align: center;
}

/* The floating "comment" button and the popover are placed in *viewport* coordinates (position: fixed): the
   wiki layout is a positioned container, so page-absolute coordinates would be offset against it. */
.ms-inline-selection-btn {
    position: fixed; z-index: 40; display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border: 1px solid var(--line, #e2ded7); border-radius: 7px;
    background: var(--card, #fff); color: var(--ink, #2b2b2b); font-size: 12.5px; cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
}
.ms-inline-selection-btn:hover { background: var(--panel, #f6f4f0); }

/* The card is a column: head and action bar stay put, only the middle scrolls. Its max-height comes from the
   inline style (InlineCommentPlacement) — the space that actually exists on the chosen side — so the card can
   never end below the fold with its buttons out of reach. */
.ms-inline-popover {
    position: fixed; z-index: 45; width: min(360px, 92vw);
    display: flex; flex-direction: column; min-height: 0;
    padding: 10px 12px; border: 1px solid var(--line, #e2ded7); border-radius: 10px;
    background: var(--card, #fff); box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}
/* Flipped above its anchor: the shadow points the other way so it still reads as attached to the text. */
.ms-inline-popover.above { box-shadow: 0 -6px 22px rgba(0, 0, 0, .16); }
.ms-inline-popover-head, .ms-inline-quote, .ms-inline-actions { flex: 0 0 auto; }
.ms-inline-popover .ms-inline-messages,
.ms-inline-popover .ms-editor-wrap { min-height: 0; overflow-y: auto; }
.ms-inline-actions {
    position: sticky; bottom: 0; margin-top: auto; padding-top: 8px;
    background: var(--card, #fff); border-top: 1px solid var(--line, #e2ded7);
}
.ms-inline-popover-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ms-inline-popover-head .ms-muted { flex: 1; font-size: 12px; }
.ms-inline-popover-close {
    border: none; background: transparent; color: var(--muted, #7a7468); cursor: pointer;
    font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 5px;
}
.ms-inline-popover-close:hover { background: var(--panel, #f6f4f0); color: var(--ink, #2b2b2b); }

.ms-inline-quote {
    margin: 0 0 8px; padding: 4px 8px; border-left: 3px solid rgba(202, 154, 20, .8);
    background: rgba(240, 197, 62, .16); font-size: 12.5px; color: var(--ink-soft, #4a4a4a);
    max-height: 4.5em; overflow: hidden;
}
.ms-inline-messages { display: flex; flex-direction: column; gap: 9px; margin-bottom: 8px; }
.ms-inline-message-head { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; font-size: 12px; }
.ms-inline-message-head .ms-muted { font-size: 11.5px; }
.ms-inline-message-body { font-size: 13.5px; }
.ms-inline-message-body > :first-child { margin-top: 0; }
.ms-inline-message-body > :last-child { margin-bottom: 0; }
.ms-inline-actions { margin-top: 8px; }
.ms-inline-resolved-note { display: flex; align-items: center; gap: 10px; font-size: 13px; }

.ms-linkbtn {
    border: none; background: transparent; padding: 0; color: var(--blue, #1f6eb4);
    font-size: 12px; cursor: pointer; text-align: left;
}
.ms-linkbtn:hover { text-decoration: underline; }

/* The drawer takes the right rail from the table of contents while it is open. */
.ms-inline-drawer {
    flex: none; width: var(--ms-toc-w, 260px); align-self: flex-start; position: sticky; top: 0;
    max-height: 100vh; overflow-y: auto; padding: 4px 0 12px;
}
.ms-inline-drawer-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ms-inline-drawer-title {
    flex: 1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted, #7a7468);
}
.ms-inline-drawer-section { margin-bottom: 14px; }
.ms-inline-drawer-section h4 { margin: 0 0 6px; font-size: 12px; color: var(--ink-soft, #4a4a4a); }
.ms-inline-hint { font-size: 11.5px; margin: 0 0 6px; }
.ms-inline-drawer-item {
    border: 1px solid var(--line, #e2ded7); border-radius: 8px; padding: 7px 8px; margin-bottom: 7px;
    background: var(--card, #fff);
}
.ms-inline-drawer-item.active { border-color: var(--blue, #1f6eb4); box-shadow: 0 0 0 1px var(--blue-soft, #d3e3f3); }
.ms-inline-drawer-item.resolved { opacity: .72; }
.ms-inline-drawer-quote { display: block; width: 100%; border: none; background: transparent; padding: 0; cursor: pointer; text-align: left; }
.ms-inline-drawer-quote blockquote {
    margin: 0; padding: 0 0 0 7px; border-left: 3px solid rgba(202, 154, 20, .7);
    font-size: 12.5px; color: var(--ink, #2b2b2b);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ms-inline-drawer-item.resolved .ms-inline-drawer-quote blockquote { border-left-color: var(--muted, #7a7468); }
.ms-inline-drawer-meta { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; font-size: 11.5px; }

/* Floating variant (INLINE_COMMENTS_TICKETS §6): the ticket view has no side rail the drawer could take over,
   so it becomes an overlay panel pinned to the right edge. */
.ms-inline-drawer.floating {
    position: fixed; top: 64px; right: 12px; bottom: 12px; z-index: 42; width: min(320px, 92vw);
    padding: 10px 12px; border: 1px solid var(--line, #e2ded7); border-radius: 10px;
    background: var(--card, #fff); box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}

/* Badge multi-select (Settings → Rollen & Berechtigungen, table 2): the business roles that grant a permission
   code. Toggle-style like Jira components — click a badge to add or remove the grant. */
.ms-badgepick { display: flex; flex-wrap: wrap; gap: 4px; }
.ms-badge {
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px dashed var(--line-strong);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}
.ms-badge:hover:not(:disabled) { border-style: solid; color: var(--ink); }
.ms-badge-on {
    border-style: solid;
    border-color: var(--blue);
    background: var(--blue-soft);
    color: var(--blue-dark);
}
.ms-badge:disabled { cursor: default; opacity: .6; }

/* Provenance label on an imported inline-comment message (INLINE_COMMENTS_CONFLUENCE CD4). */
.ms-inline-imported {
    background: var(--panel, #f6f4f0); color: var(--muted, #7a7468); border: 1px solid var(--line, #e2ded7);
    font-size: 10px; padding: 0 5px;
}

/* ===================== Responsive / mobile (docs/temp/MOBILE_LAYOUT.md) =====================
   The desktop view must not change. Everything mobile therefore lives in the media queries below and no rule
   above this block is edited for it; the helper classes added to existing markup (ms-desktop-only,
   ms-table-scroll, …) have no effect outside a query. One breakpoint only — 767.98px — kept consistent by
   ResponsiveCssGuardTests. This block stays LAST so it wins over the duplicated selectors further up. */

/* Markup that exists only for the phone layout (hamburger, bottom bar, filter button, …) is hidden on every
   wider screen. */
@media (min-width: 768px) {
    .ms-mobile-only { display: none !important; }
}

/* Touch screens have no hover: information that only appears on :hover has to be visible up front. */
@media (hover: none) {
    .ms-tree-row .ms-tree-caret { opacity: 1; }
    /* The lightbox handles pinch-zoom itself (sumex-interop.js); the page must not zoom underneath. */
    .ms-lightbox-stage { touch-action: none; }
}

@media (max-width: 767.98px) {
    /* v1 is read-only on a phone except for the three write paths of MOBILE_LAYOUT §0.1; every other writing
       control carries this class. UX only — the server stays authoritative. */
    .ms-desktop-only { display: none !important; }

    /* ---- Foundation ---- */
    .ms-shell { height: 100dvh; }
    .ms-content { padding: 12px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
    .ms-section { padding: 12px 14px; }
    .ms-lockscreen { margin: 1.5rem auto; padding: 1.5rem 1rem; }
    .ms-form-grid { grid-template-columns: 1fr; }
    .ms-check-grid { grid-template-columns: repeat(2, 1fr); }

    /* iOS Safari zooms into any focused field under 16px and never zooms back out. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
    select, textarea, .ms-input, .ms-input-sm, .ms-toolbar input, .ms-toolbar select, .ms-search input,
    .ms-editor-area { font-size: 16px; }

    /* Thumb-sized targets (≥ 40–44px). */
    .ms-iconbtn { width: 40px; height: 40px; }
    .ms-btn { min-height: 40px; }
    .ms-btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
    .ms-navlink { height: 44px; font-size: 15px; }
    .ms-navlink-sub { font-size: 14px; }
    .ms-tree { padding-left: 20px; }
    .ms-tree ul { padding-left: 16px; }
    .ms-tree-item { height: 40px; font-size: 14.5px; }
    .ms-tree-caret { width: 22px; height: 40px; left: -21px; }
    .ms-menu-item, .ms-notif-item, .ms-notif-tasks, .ms-picker-row, .ms-palette-row { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .ms-modal-close { min-width: 40px; min-height: 40px; }
    .ms-toc-toggle { width: 36px; height: 36px; }
    .ms-date > .ms-input { padding-right: 40px; }
    .ms-date-btn { width: 36px; height: 36px; }
    .ms-chip-x { padding: 4px 6px; }
    .ms-linkbtn { padding: 8px 6px; }

    /* ---- Helpers ---- */
    /* Wide data tables scroll inside their own box instead of dragging the whole page sideways. */
    .ms-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 14px; }
    .ms-table-scroll > table { width: max-content; min-width: 100%; margin-bottom: 0; }
    .ms-sticky-first th:first-child, .ms-sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
    .ms-sticky-first th:first-child { background: var(--panel); }
    /* Segment controls and tab rows swipe instead of overflowing. */
    .ms-segmented, .ms-seg-group, .ms-hscroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .ms-segmented::-webkit-scrollbar, .ms-seg-group::-webkit-scrollbar, .ms-hscroll::-webkit-scrollbar { display: none; }
    .ms-segmented > *, .ms-seg-group > *, .ms-hscroll > * { flex: none; white-space: nowrap; }
}

/* ---- Shell: top bar, drawer, bottom bar, sheets (MOBILE_LAYOUT §4) ----
   Stacking on a phone: bottom bar 50 < drawer backdrop 55 < drawer 60 < sheet backdrop 65 < top bar 70 (its
   bell/account sheets live inside it) < overflow sheet 80 < toasts 90 < modals 100. */
@media (max-width: 767.98px) {
    .ms-topbar { gap: 2px; padding: 0 6px; z-index: 70; }
    .ms-brand { gap: 8px; margin-right: 0; min-width: 0; flex: 1 1 auto; overflow: hidden; }
    .ms-appname, .ms-search { display: none; }
    .ms-logo-img { height: 26px; max-width: 120px; }
    .ms-logo { font-size: 16px; }
    .ms-topbar-actions { gap: 2px; margin-left: 0; flex: none; }

    /* The sidebar becomes an off-canvas drawer. !important beats the width the desktop resize handle stored. */
    .ms-sidebar, .ms-sidebar.collapsed {
        position: fixed; top: 56px; bottom: 0; left: 0; z-index: 60;
        width: min(86vw, 320px) !important; overflow-y: auto;
        padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-105%); visibility: hidden;
        transition: transform .22s ease, visibility .22s;
        box-shadow: 0 0 32px rgba(9, 30, 66, .22);
    }
    .ms-sidebar.drawer-open { transform: none; visibility: visible; }
    .ms-sidebar-head, .ms-resize-handle { display: none; }
    .ms-drawer-backdrop, .ms-sheet-backdrop { position: fixed; inset: 0; background: rgba(9, 30, 66, .42); }
    .ms-drawer-backdrop { top: 56px; z-index: 55; }
    .ms-sheet-backdrop { z-index: 65; }

    /* Bell / account / overflow menus become bottom sheets. */
    .ms-menu-pop, .ms-menu-pop.ms-overflow-pop, .ms-notif-pop, .ms-help-pop {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; min-width: 0;
        max-height: 85dvh; overflow-y: auto; border: none; border-radius: 16px 16px 0 0;
        padding: 4px 10px calc(14px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 32px rgba(9, 30, 66, .25);
        animation: ms-sheet-in .2s ease-out;
    }
    .ms-menu-pop::before {
        content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
        background: var(--line-strong); margin: 6px auto 8px;
    }
    .ms-menu-pop.ms-overflow-pop { z-index: 80; }
    .ms-overflow-backdrop { z-index: 79; background: rgba(9, 30, 66, .42); }
    .ms-overflow-item { white-space: normal; }
    .ms-notif-list { max-height: none; }
    .ms-menu-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 4px 10px 8px; }
    .ms-menu-row .ms-lang button { padding: 8px 14px; font-size: 13px; }

    /* Thumb-reach tab bar. */
    .ms-bottomnav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex;
        background: var(--bg); border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 12px rgba(9, 30, 66, .06);
    }
    .ms-bottomnav-item {
        flex: 1 1 0; min-width: 0; height: 58px; position: relative;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        border: 0; background: transparent; color: var(--muted); cursor: pointer;
        font: inherit; font-size: 11px; font-weight: 600; text-decoration: none;
    }
    .ms-bottomnav-item:hover { text-decoration: none; color: var(--ink); }
    .ms-bottomnav-item.active { color: var(--blue); }
    .ms-bottomnav-item > span:not(.ms-bottomnav-badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ms-bottomnav-badge {
        position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
        border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; line-height: 18px; text-align: center;
    }

    /* Toasts rise above the tab bar instead of covering the top of the page. */
    .ms-toast-host { top: auto; left: 12px; right: 12px; width: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

    /* Route breadcrumbs shrink to a single "‹ back" link (or vanish where the tab bar already leads). */
    .ms-route-crumbs.ms-crumbs-nomobile { display: none; }
    .ms-route-crumbs > :not(.ms-crumb-back) { display: none; }
    .ms-crumb-back { font-size: 14px; font-weight: 600; color: var(--blue); padding: 4px 0; }

    @keyframes ms-sheet-in { from { transform: translateY(28px); opacity: .5; } to { transform: none; opacity: 1; } }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .ms-sidebar, .ms-sidebar.collapsed { transition: none; }
    .ms-menu-pop { animation: none; }
}

/* ---- Modals as bottom sheets (MOBILE_LAYOUT §5) ----
   Every <Modal> slides up from the bottom edge; Size="lg" (history, detail lists, …) and CssClass="ms-modal-full"
   take the whole screen. Head and footer stick, only the body scrolls. */
@media (max-width: 767.98px) {
    .ms-modal-backdrop { align-items: flex-end; padding: 0; }
    .ms-modal {
        width: 100%; max-width: none; max-height: 92dvh;
        border-radius: 16px 16px 0 0; padding: 0 16px; animation: ms-sheet-in .2s ease-out;
    }
    .ms-modal-lg, .ms-modal.ms-modal-full { height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .ms-modal-head {
        position: sticky; top: 0; z-index: 6; background: var(--bg);
        margin: 0 -16px 12px; padding: 10px 8px 8px 16px; border-bottom: 1px solid var(--line);
    }
    .ms-modal-head h3 { font-size: 16.5px; }
    .ms-modal > :last-child { margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    .ms-modal > .ms-modal-actions, .ms-modal > .ms-toolbar:last-child, .ms-modal > .ms-form-actions:last-child {
        position: sticky; bottom: 0; z-index: 6; background: var(--bg); flex-wrap: wrap;
        margin: 16px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--line);
    }
    .ms-modal > .ms-modal-actions .ms-btn, .ms-modal > .ms-toolbar:last-child .ms-btn,
    .ms-modal > .ms-form-actions:last-child .ms-btn { flex: 1 1 auto; justify-content: center; }
    .ms-palette { min-width: 0; }
    .ms-drawio-modal { min-width: 0; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .ms-modal { animation: none; }
}

/* ---- Ticket detail, inline comments, comment editor (MOBILE_LAYOUT §6, §7.3, §8.1) ---- */
@media (max-width: 767.98px) {
    .ms-content h1 { font-size: 1.3rem; }

    /* Status + transitions (W2) stay reachable: one swipeable row that sticks to the top while scrolling. */
    .ms-ticket-actions {
        position: sticky; top: 0; z-index: 20; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin: 0 -16px 14px; border-radius: 0; border-left: 0; border-right: 0; padding: 10px 16px;
        box-shadow: 0 4px 12px rgba(9, 30, 66, .06);
    }
    .ms-ticket-actions::-webkit-scrollbar { display: none; }
    .ms-ticket-actions > * { flex: none; white-space: nowrap; }

    /* The two-column body stacks. Its desktop geometry is inline style (left untouched on purpose), hence the
       !important here. The aside dissolves: its first card (the fields) moves above the content, the rest below. */
    .ms-ticket-layout { flex-direction: column !important; gap: 0 !important; align-items: stretch !important; }
    .ms-ticket-aside { display: contents !important; }
    .ms-ticket-aside > * { order: 1; }
    .ms-ticket-aside > :first-child { order: -1; }
    .ms-ticket-main { width: 100%; }
    .ms-ticket-aside .ms-fieldlist { display: grid; grid-template-columns: minmax(0, 40%) 1fr; gap: 8px 12px; align-items: baseline; }
    .ms-ticket-aside .ms-fieldlist dd { margin: 0; }
    .ms-ticket-aside .ms-fieldlist > :not(dt):not(dd) { grid-column: 1 / -1; }

    /* Inline comments are read-only on a phone (M9): threads open as a bottom sheet; composing, replying and
       closing stay on the desktop. */
    .ms-inline-selection-btn { display: none; }
    .ms-inline-popover {
        left: 0 !important; right: 0; top: auto !important; bottom: 0 !important; width: auto;
        max-height: 75dvh !important; z-index: 85; border-radius: 16px 16px 0 0;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .ms-inline-popover .ms-editor-wrap, .ms-inline-popover .ms-inline-actions { display: none; }
    .ms-inline-drawer.floating {
        top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 75dvh; z-index: 85;
        border-radius: 16px 16px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* The comment editor's toolbar (W3) is one swipeable row instead of several wrapped ones. */
    .ms-editor-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ms-editor-toolbar::-webkit-scrollbar { display: none; }
    .ms-editor-toolbar > * { flex: none; }
    .ms-tb-btn { min-width: 40px; height: 40px; }
}

/* ---- Wiki reading (MOBILE_LAYOUT §7) ---- */
@media (max-width: 767.98px) {
    .ms-wiki-layout { display: block; }
    .ms-wiki-topline { gap: 8px; margin-bottom: 12px; }
    .ms-wiki-title { font-size: 22px; flex-basis: 100%; }
    .ms-wiki-actions { justify-content: flex-start; margin-left: 0; gap: 6px; }
    .ms-meta-wrap { margin-bottom: 16px; }
    .ms-meta-table { max-width: none; width: 100%; }
    .ms-meta-table th { width: 38%; white-space: normal; }
    .ms-meta-table th, .ms-meta-table td { padding: 8px 10px; }

    /* Table of contents: no rail — a bottom sheet opened from the "On this page" button. */
    .ms-wiki-toc, .ms-toc-resize-handle { display: none; }
    .ms-wiki-toc.toc-open {
        display: block; position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 80;
        width: auto !important; max-height: 70dvh; overflow-y: auto; background: var(--bg);
        border-radius: 16px 16px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 32px rgba(9, 30, 66, .25); animation: ms-sheet-in .2s ease-out;
    }
    .ms-wiki-toc.toc-open nav { display: flex; }
    .ms-wiki-toc.toc-open .ms-toc-toggle { display: none; }
    .ms-wiki-toc.toc-open .ms-toc-link { padding-top: 9px; padding-bottom: 9px; font-size: 14.5px; white-space: normal; }
    .ms-sheet-backdrop { z-index: 65; }

    /* The comment drawer's rail becomes the same bottom sheet as on a ticket (read-only, M9). */
    .ms-inline-drawer {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 75dvh; max-height: none;
        z-index: 85; background: var(--bg); border: 1px solid var(--line); border-radius: 16px 16px 0 0;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 32px rgba(9, 30, 66, .25);
    }

    /* Rendered content reads comfortably on a narrow screen. */
    .ms-wiki-content { font-size: 15.5px; }
    .ms-wiki-content ul, .ms-wiki-content ol { padding-left: 20px; }
    .ms-wiki-content span.ticket-ref .chip-summary { max-width: 45vw; }
    .ms-wiki-content .ms-profile-card { display: flex; }
    .ms-diff-media-changed { flex-wrap: wrap; }
    .ms-lightbox-bar { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Lists: tickets / tasks as cards, filter sheet, search, pager (MOBILE_LAYOUT §9.1, §9.2) ---- */
@media (max-width: 767.98px) {
    .ms-toolbar > .ms-input, .ms-toolbar > select { flex: 1 1 auto; min-width: 0; }
    /* The ticket list's right-hand tool group: inline margin-left:auto on the desktop, a full-width row here. */
    .ms-tickets-tools { margin-left: 0 !important; width: 100%; flex-wrap: wrap; }
    .ms-tickets-tools > select { flex: 1 1 auto; min-width: 0; }

    /* Rows become cards: key + status on top, the summary as the headline, everything else as "label: value". */
    .ms-cards-mobile, .ms-cards-mobile tbody { display: block; width: 100%; border: 0; background: transparent; overflow: visible; }
    .ms-cards-mobile thead, .ms-cards-mobile .ms-col-select { display: none; }
    .ms-cards-mobile tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
        padding: 12px 14px; margin-bottom: 10px; background: var(--bg);
        border: 1px solid var(--line); border-radius: 12px;
    }
    .ms-cards-mobile tr.ms-row-click:active { background: var(--panel); }
    .ms-cards-mobile td { display: block; padding: 0; border: 0; font-size: 13px; min-width: 0; color: var(--ink-soft); }
    .ms-cards-mobile td[data-col="key"] { grid-row: 1; grid-column: 1; font-size: 12.5px; font-weight: 600; }
    .ms-cards-mobile td[data-col="status"] { grid-row: 1; grid-column: 2; justify-self: end; }
    .ms-cards-mobile td[data-col="summary"] {
        order: -1; grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .ms-cards-mobile td:not([data-col="key"]):not([data-col="status"]):not([data-col="summary"]) { grid-column: 1 / -1; }
    .ms-cards-mobile td[data-label]:not([data-col="key"]):not([data-col="status"]):not([data-col="summary"])::before {
        content: attr(data-label) ": "; color: var(--muted); font-size: 12px;
    }
    .ms-cards-mobile td.ms-overdue { color: var(--red); }

    .ms-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 12px; }
    .ms-search-hit-head { flex-wrap: wrap; }
    .ms-search-hit { padding: 12px 14px; }
}

/* ---- Dashboard, incident capture, governance views (MOBILE_LAYOUT §8.2, §9.3, §9.4) ---- */
@media (max-width: 767.98px) {
    /* Two tiles per row; the incident report tiles (W1) lead the pinned bar. */
    .ms-dash-pinned { margin: 8px 0 18px; padding: 12px; }
    .ms-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ms-dash-pinned .ms-tile-action { order: -1; }
    .ms-tile { min-height: 104px; padding: 10px 12px; }
    .ms-tile-value { font-size: 1.6rem; }
    .ms-tile-main { flex-wrap: wrap; }
    .ms-tile-viz { width: 64px; }
    .ms-tile-viz-wide { flex-basis: 100%; }
    .ms-minibar { max-width: none; }
    .ms-dash-grid { grid-template-columns: 1fr; }
    .ms-type-fixed { font-size: 15px; font-weight: 600; padding: 6px 0 2px; }

    /* Risk matrix: compact cells so the 4×4 grid fits a phone without sideways scrolling. */
    .ms-risk-cell { width: 64px; height: 56px; }
    .ms-risk-dots { margin-top: 12px; gap: 3px; }
    .ms-risk-dot { width: 22px; height: 22px; font-size: 11px; }
    .ms-risk-grid th { padding: 4px 6px; font-size: 11px; }
    .ms-risk-grid .ms-risk-corner { white-space: normal; }
    .ms-risk-legend { gap: 8px 14px; }

    /* Governance tables keep their Excel-like headers but scroll inside their own box. */
    .ms-col-head { min-width: 5rem; }
    .ms-trend-legend { flex-wrap: wrap; gap: .4rem 1rem; }
    .ms-soa-table textarea.ms-input { min-width: 10rem; }
    .ms-bar-name { width: 84px; }

    /* Deliberately no overflow-x:hidden on .ms-content: the optimised pages no longer overflow, and the ones left
       out (Settings) must stay scrollable rather than clipped. */

    /* Team edit: lead and reports-to stack (qualified: the base rule comes later in the file). */
    .ms-team-form .ms-team-lead-grid { grid-template-columns: 1fr; row-gap: 12px; }
}

/* ===================== Teams (employee dashboard + mitarbeiter ticket) =====================
   A person can be in several teams; each entry carries a Funktion (free text or a wiki page). The dashboard shows
   one chip per team (opens the team popup), the team popup lists members with their Funktion, and the edit popup
   stacks on top of it. All three popups leave the dashboard underneath untouched. */
.ms-team-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ms-team-chip { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); border-radius: 12px;
    padding: 1px 9px; font: inherit; font-size: 12.5px; cursor: pointer; line-height: 1.6; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s; }
.ms-team-chip:hover, .ms-team-chip:focus-visible { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-dark); outline: none; }
.ms-team-funktion-line { display: flex; align-items: baseline; gap: 4px; line-height: 1.55; }
.ms-team-funktion-team { font-size: 12px; white-space: nowrap; }
.ms-team-funktion-link { background: none; border: none; padding: 0; font: inherit; color: var(--blue); cursor: pointer; text-align: left; }
.ms-team-funktion-link:hover { text-decoration: underline; }
/* Edit mode of the employee dashboard ("Bearbeiten"): controls stay one line high and in the chip/table idiom — the
   "+ Team" picker is a dashed chip next to the team chips, the dropdowns are compact, the new row is a tinted first
   row under the same columns. Without edit mode none of this markup is rendered. */
.ms-team-chip-wrap { display: inline-flex; align-items: center; }
.ms-team-chip-wrap .ms-chip-x { padding: 0 3px; color: var(--muted); font-size: 13px; }
.ms-emp-team-join { appearance: none; -webkit-appearance: none; width: auto; max-width: 10rem; height: auto;
    border: 1px dashed var(--line-strong); border-radius: 12px; background: transparent; color: var(--muted);
    padding: 1px 10px; font: inherit; font-size: 12.5px; line-height: 1.6; cursor: pointer; }
.ms-emp-team-join:hover, .ms-emp-team-join:focus-visible { border-color: var(--blue); color: var(--blue-dark);
    background: var(--blue-soft); outline: none; }
.ms-emp-team-join option { color: var(--ink); background: var(--surface, #fff); }
.ms-emp-editing .ms-emp-inline-select { width: auto; max-width: 11rem; height: auto; padding: 2px 6px; font-size: 12.5px;
    border: 1px solid var(--line); border-radius: 6px; background-color: var(--panel); }
.ms-emp-editing .ms-emp-inline-select:hover { border-color: var(--line-strong); }
.ms-emp-edit-btn { background: none; border: none; padding: 0 2px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.ms-emp-edit-btn:hover { color: var(--blue); }
.ms-emp-funktion-edit { display: inline-flex; align-items: center; gap: 4px; }
.ms-emp-funktion-edit .ms-input { width: 11rem; }
.ms-emp-funktion-picker { display: inline-block; width: 14rem; }
.ms-emp-action-col { width: 1%; white-space: nowrap; }
.ms-emp-new-row > td { background: var(--blue-soft); border-bottom: 2px solid var(--line-strong); vertical-align: middle; }
.ms-emp-new-row .ms-emp-new-name { width: 100%; min-width: 9rem; }
.ms-emp-new-badge { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--blue-dark); background: var(--panel);
    border: 1px solid var(--blue); }
.ms-emp-new-actions { display: inline-flex; align-items: center; gap: 4px; }
.ms-emp-new-hint-row > td { background: var(--blue-soft); padding-top: 0; }
.ms-emp-date .ms-input { width: 7.5rem; }
/* The ampel: a warning opens its reasons on click; the date that trips it is marked in its own cell. */
.ms-emp-ampel > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.ms-emp-ampel > summary::-webkit-details-marker { display: none; }
/* The ampel sits in the first column: open its panel to the right (dropdowns open leftwards by default), so it stays
   on screen; the reasons wrap instead of inheriting a table cell's layout. */
.ms-emp-ampel-panel { left: 0; right: auto; min-width: 18rem; max-width: 28rem; font-size: 12.5px;
    white-space: normal; text-align: left; }
.ms-emp-ampel-panel ul { margin: 0; padding: 2px 4px 2px 18px; }
.ms-emp-ampel-panel li + li { margin-top: 4px; }
.ms-emp-expired { color: var(--amber-ink); font-weight: 600; }

@media (min-width: 768px) { .ms-modal.ms-team-modal { width: 560px; } }
/* A ticket opened from the employee dashboard: the full detail in a wide popup over the list. */
@media (min-width: 768px) { .ms-modal.ms-ticket-modal { width: 1200px; max-height: 90vh; } }
.ms-ticket-modal-bar { display: flex; justify-content: flex-end; margin: -6px 0 6px; }
.ms-team-head { display: flex; align-items: center; gap: 12px; margin: -2px 0 16px; }
.ms-team-badge { width: 44px; height: 44px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center; flex: none; letter-spacing: .02em; }
.ms-team-head-text { min-width: 0; }
.ms-team-title { font-size: 18px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.ms-team-section-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); margin: 0 0 6px; }
.ms-team-manager { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; }
.ms-team-person { display: flex; align-items: center; gap: 10px; }
.ms-team-person-name { font-weight: 600; color: var(--ink); }
a.ms-team-person-name:hover { color: var(--blue); }
.ms-team-avatar { color: #fff; flex: none; }
.ms-team-avatar-sm { width: 26px; height: 26px; font-size: .68rem; }
.ms-team-hint { margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px;
    background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); }
.ms-team-members { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ms-team-member { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.ms-team-member + .ms-team-member { border-top: 1px solid var(--line); }
.ms-team-member:hover { background: var(--panel); }
.ms-team-member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ms-team-members-edit .ms-team-member-main { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-team-member-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--ink-soft); }
.ms-team-member-leaving .ms-team-person-name { text-decoration: line-through; color: var(--muted); }
.ms-team-member-leaving .ms-team-avatar { opacity: .45; }
.ms-team-pill-new { background: #e3fcef; color: var(--green); }
.ms-team-pill-leave { background: #ffebe6; color: var(--red); }

.ms-team-form .ms-field-label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 12.5px; color: var(--ink-soft); }
.ms-team-form .ms-field-label:first-child { margin-top: 0; }
.ms-team-help { font-size: 12px; margin-top: 4px; }
/* Lead | reports-to side by side; stacked on a phone. */
.ms-team-lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin-top: 12px; }
.ms-team-lead-grid .ms-field-label { margin-top: 0; }
.ms-team-clearable { display: flex; align-items: center; gap: 4px; }
.ms-team-clearable > div { flex: 1; min-width: 0; }
.ms-team-pill-lead { background: var(--blue-soft); color: var(--blue-dark); }
.ms-team-lead-lock { color: var(--blue); font-size: 14px; padding: 0 6px; cursor: default; }
.ms-team-reports { font-size: 12.5px; margin: 6px 0 0 36px; }
.ms-team-add-list li.ms-employee-picker-selected { background: var(--blue-soft); }

/* "IMS-Konten verknüpfen": employee ↔ account pairs, each with why they were paired. */
.ms-ims-link-intro { font-size: 12.5px; margin: 0 0 10px; }
.ms-ims-link-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
.ms-ims-link-empty { padding: 18px 12px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; }
.ms-ims-link-list { max-height: 55vh; overflow-y: auto; }
.ms-ims-link-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.ms-ims-link-sub { font-size: 12px; }
.ms-ims-link-arrow { color: var(--muted); flex: none; }
.ms-ims-link-reason { flex: none; }
.ms-ims-link-reason-account, .ms-ims-link-reason-email { background: #e3fcef; color: var(--green); }
.ms-ims-link-reason-name { background: var(--amber-bg); color: var(--amber-ink); }
.ms-team-add { position: relative; margin-bottom: 8px; }
.ms-team-add-list { position: absolute; z-index: 50; left: 0; right: 0; margin: 2px 0 0; padding: 4px; list-style: none;
    background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px; max-height: 16rem; overflow: auto;
    box-shadow: 0 8px 22px rgba(40,40,45,.16); }
.ms-team-add-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.ms-team-add-list li:hover { background: var(--blue-soft); }
.ms-team-add-teams { margin-left: auto; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }

/* Ticket form: one row per team (name | Funktion | remove). */
.ms-team-editor { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ms-team-editor-row { display: grid; grid-template-columns: 1fr; gap: 4px; width: 100%; padding: 6px; border: 1px solid var(--line);
    border-radius: 8px; position: relative; padding-right: 26px; }
.ms-team-editor-name { width: 100%; font-weight: 600; }
.ms-team-editor-funktion { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ms-team-editor-funktion > .ms-input { flex: 1; min-width: 0; }
.ms-team-editor-picker { display: flex; gap: 4px; align-items: center; flex: 1; min-width: 0; }
.ms-team-editor-picker > :first-child { flex: 1; min-width: 0; }
.ms-team-editor-remove { position: absolute; top: 8px; right: 6px; color: var(--muted); }
.ms-team-editor-remove:hover { color: var(--red); }
.ms-team-page-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 8px; border-radius: 12px;
    background: var(--blue-soft); color: var(--blue-dark); font-size: 12.5px; }
.ms-team-page-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* Page preview popup. */
.ms-page-preview-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.ms-page-preview-locked { display: flex; align-items: center; gap: 10px; padding: 24px 12px; color: var(--ink-soft); justify-content: center; }

/* In-app help (VERSIONING_RELEASE_NOTES_HELP §6): topic list left, topic right. */
.ms-helpcenter { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.ms-help-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-help-search { width: 100%; margin-bottom: 8px; }
.ms-help-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 8px 4px; }
.ms-help-link { display: block; padding: 5px 8px; border-radius: 6px; color: var(--ink); font-size: 13px; }
.ms-help-link:hover { background: var(--panel); text-decoration: none; }
.ms-help-link.active { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.ms-help-showall { margin-top: 14px; padding: 0 8px; font-size: 12px; color: var(--muted); }
.ms-help-nomatch { padding: 4px 8px; }
.ms-help-content { max-width: 760px; }
.ms-help-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; }
.ms-help-overview h2 { font-size: 14px; margin: 16px 0 6px; }
.ms-help-overview ul { margin: 0; padding-left: 18px; }
.ms-help-fallback { background: var(--panel); border-radius: 6px; padding: 8px 12px; font-size: 13px; color: var(--ink-soft); }
.ms-help-body { line-height: 1.6; }
.ms-help-body h2 { font-size: 16px; margin: 22px 0 8px; }
.ms-help-body h3 { font-size: 14px; margin: 18px 0 6px; }
.ms-help-body table { border-collapse: collapse; margin: 8px 0 14px; }
.ms-help-body th, .ms-help-body td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top; }
.ms-help-body th { background: var(--panel); }
.ms-help-body code { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 12px; }
.ms-help-body blockquote { margin: 12px 0; padding: 6px 12px; border-left: 3px solid var(--blue); background: var(--panel); color: var(--ink-soft); }
/* Compact help (floating panel, help window): one column — the topic list or one topic. */
.ms-helpcenter-compact { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ms-helpcenter-compact .ms-help-nav { position: static; }
.ms-helpcenter-compact .ms-help-content { max-width: none; }
.ms-helpcenter-compact .ms-help-content h1 { font-size: 18px; margin: 4px 0 10px; }
.ms-help-back { display: inline-block; font-size: 12.5px; margin-bottom: 6px; }
/* The floating help panel (HelpPanel.razor): not modal, above the modals (100), below the lightbox (200). The head
   drags it, the browser's corner grip resizes it; once JS runs, the position is held in left/top. */
.ms-help-panel {
    position: fixed; top: 72px; right: 24px; z-index: 150;
    width: 440px; height: min(640px, calc(100vh - 96px));
    min-width: 300px; min-height: 220px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
    display: flex; flex-direction: column; overflow: hidden; resize: both;
    background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 48px rgba(40,40,45,.22);
}
.ms-help-panel:focus { outline: none; }
.ms-help-panel-head { flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--line); background: var(--panel); cursor: move; user-select: none; touch-action: none; }
.ms-help-panel-head button { cursor: pointer; }
.ms-help-panel-title { flex: 1; font-size: 13.5px; font-weight: 600; }
.ms-help-panel-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px 16px; }
.ms-help-panel-dragging { user-select: none; }
@media (max-width: 767.98px) {
    .ms-helpcenter { grid-template-columns: 1fr; gap: 12px; }
    .ms-help-nav { position: static; }
}
@media (max-width: 767.98px) {
    .ms-sticky-actions { left: 16px; right: 16px; bottom: 16px; justify-content: flex-end; }
}