/* Not in sqout-colors.css: that file is the two-theme palette, and neither a typeface nor
   a height has a light and a dark value.

   Two chrome tokens, not one (T8): the six pages that subtract 140px are clearing the
   header AND the footer, which a single header token cannot express. Every offset in the
   codebase is now stated relative to one of these two, so changing the bar's height moves
   all fifteen sites at once. */
:root {
    --sqout-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;

    --sqout-header-h: 56px;
    --sqout-chrome-h: 140px;

    /* The rail is sized in rem, not in grid columns: a percentage of the banded row is what
       made "Redaction preview" wrap at `standard` and overlap the form at `narrow`. */
    --sqout-rail-w: 15rem;
    --sqout-rail-tree-w: 20rem;

    /* What a page's content actually gets: the viewport less the chrome above and below it,
       less `.page`'s own padding-block. Every full-height surface reads this — subtracting
       only the chrome leaves the padding over, and the page scrolls by it. */
    --sqout-content-h: calc(100vh - var(--sqout-chrome-h) - 3.25rem);
    /* The same, on a `page--flush` page: no bottom gutter to leave room for. */
    --sqout-canvas-h: calc(100vh - var(--sqout-chrome-h) - 0.25rem);

    --sqout-page-narrow: 72ch;
    --sqout-page-standard: 1320px;
    --sqout-page-max: 2560px;
}

@media (max-width: 575.98px) {
    :root {
        /* The footer's links wrap to a second line below this width. */
        --sqout-chrome-h: 172px;
    }
}

html {
    height: 100%;
}

/* The header had no declared height at all — it was intrinsic, set by its content — so
   --sqout-header-h would have been a number describing nothing. */
header.navbar.fixed-top {
    height: var(--sqout-header-h);
    padding-top: 0;
    padding-bottom: 0;
    /* Bootstrap's .navbar is flex-wrap: wrap. With a fixed height, a wrapped second row
       would spill out of the bar instead of growing it, so the bar must not wrap. */
    flex-wrap: nowrap;
}

/* The rail sits beside the banded column, so the header offset and the growth that keeps
   the footer down belong to the shell — .page must be free to stop at its band. */
.qds-shell {
    display: flex;
    align-items: stretch;
    flex-grow: 1;
    flex-shrink: 0;
    margin-top: var(--sqout-header-h);
}

/* One width contract replacing four regimes (D8, ledger row 6). A page that declares no
   band gets `standard`, from the block default in base.html. */
.page {
    flex: 1 1 auto;
    /* Without it a flex item refuses to shrink below its content, and one wide table pushed
       the whole column past the viewport instead of scrolling inside itself. */
    min-width: 0;
    /* Explicit: the header offset belongs to .qds-shell, and .page carrying one too stacked
       two 56px gaps and pushed the breadcrumb a whole bar's height below the rail heading. */
    margin-block: 0;
    margin-inline: auto;
    padding-inline: 0.75rem;
    /* The wrapper each page used to carry its own `mt-3` on; one value here instead. The top
       is a hairline, not a rhythm step: the breadcrumb belongs against the bar, and 56px of
       fixed header already sits above it. */
    padding-block: 0.25rem 3rem;
}

.page--narrow   { max-width: var(--sqout-page-narrow); }
.page--standard { max-width: var(--sqout-page-standard); }

/* `standard` is the floor beside a rail. The rail already spends 15rem, and 72ch next to it
   is a slot rather than a page — Build QDS bundle, Decode tracking code and Create external
   command are dense staff forms, not prose. Enforced here rather than left to each author,
   so a page added later cannot reintroduce it. */
.qds-rail-slot ~ .page--narrow { max-width: var(--sqout-page-standard); }
/* `wide` means "take the room a canvas or a 10-column table needs", not "take the monitor".
   The cap is above every ordinary display, so it engages only on an ultrawide, where an
   uncapped table row is a head-turn from one end to the other. */
.page--wide     { max-width: var(--sqout-page-max); }

/* A canvas runs to the footer. Its container reads --sqout-canvas-h, which is the same
   arithmetic without the gutter this removes — the two have to move together. */
.page--flush { padding-block-end: 0; }

/* Ported back from the 127-line inline <style> Phase 5 deleted with the platform-admin shim.
   Thirteen templates kept emitting the class and nothing defined it, so every heading and its
   actions stacked instead of sitting opposite each other. */
.platform-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

#main-content {
    /* Without this the fixed header covers the target after the jump — SC 2.4.11. */
    scroll-margin-top: var(--sqout-header-h);
}

#main-content:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    left: 0.5rem;
    top: calc(var(--sqout-header-h) * -1);
    z-index: 1090;
    padding: 0.5rem 1rem;
    background: var(--sqout-surface);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus {
    top: 0.5rem;
}

/* The shell had no visible focus state at all (prd.md:115,142). One rule on the shared
   control surface, consuming the ring token Phase 1a contrast-checked in both themes. */
:focus-visible {
    outline: 2px solid var(--sqout-focus-ring-color);
    outline-offset: 2px;
}

/* Guards every transition in this file, including ones added later. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Moved out of base.html's inline <style> */
#user-menu::after {
    color: var(--sqout-btn-color);
}

/* Nav — the seven-group Bases panel, and the bar's own icons */
.qds-bases-menu {
    padding: 0.5rem 0.75rem;
    --bs-dropdown-item-padding-y: 0.125rem;
    --bs-dropdown-header-padding-y: 0.25rem;
}

.qds-bases-group {
    break-inside: avoid;
    padding-bottom: 0.5rem;
}

.qds-bases-group--overview {
    column-span: all;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-dropdown-divider-bg);
}

.qds-bases-panel .dropdown-header {
    padding-left: 0.5rem;
}

/* Columns, not a grid: a grid lines groups up in rows, so a short group beside a long one leaves a hole. */
@media (min-width: 1200px) {
    /* Centred under its toggle: start-aligned, the three columns ran off the right of the window. */
    .qds-bases-menu[data-bs-popper] {
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: calc(100vw - 2rem);
    }

    .qds-bases-panel {
        columns: 3;
        column-gap: 1rem;
    }

    header.navbar .dropdown-menu {
        max-height: calc(100vh - var(--sqout-header-h) - 1rem);
        overflow-y: auto;
    }
}

.qds-navbar-icon {
    font-size: 1.25rem;
    color: var(--sqout-btn-color);
}

.qds-avatar {
    font-size: 1.75rem;
    color: var(--sqout-btn-color);
    vertical-align: middle;
}

.qds-notif-menu {
    width: 360px;
    max-width: 92vw;
}

.qds-review-dot {
    width: 15px;
    height: 15px;
}

/* Below the drawer's breakpoint every dropdown in it renders inline instead of as an
   absolutely-positioned menu — which is what makes the same markup an accordion in the
   drawer and a dropdown in the bar. An absolute menu inside a 320px offcanvas overflows it. */
@media (max-width: 1199.98px) {
    #nav-drawer .dropdown-menu {
        position: static;
        float: none;
        border: 0;
        box-shadow: none;
        padding-left: 1rem;
    }

    .qds-bases-menu {
        padding: 0;
    }
}

/* Moved out of messages.html's inline <style> */
.sqout-toast-stack {
    position: fixed;
    top: calc(var(--sqout-header-h) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    width: min(92vw, 640px);
    pointer-events: none;
}

.sqout-toast {
    pointer-events: auto;
}

.sqout-toast.sqout-toast-hiding {
    opacity: 0;
    transition: opacity .4s ease;
}

body {
    height: 100%;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    /* No @font-face ever declared Roboto-*, so the three families it named resolved to
       sans-serif and the weight they were standing in for was never applied. */
    font-family: var(--sqout-font-sans);
    font-weight: 400;
    display: flex;
    flex-direction: column;
}


h1,
h2,
h3,
h4,
h5 {
    font-family: var(--sqout-font-sans);
    font-weight: 300;
}

strong {
    font-weight: 700;
}

a {
    color: var(--bs-link-color);
    text-decoration: none;
}

a:hover {
    color: var(--bs-link-color);
    text-decoration: underline;
}

a .anchor::before {
    content: "";
    display: block;
    margin-top: -5rem;
    position: absolute;
}

a.partial-underline {
    text-decoration: none;
}

a.partial-underline .hover-line {
    text-decoration: underline;
}


.user {
    color: var(--sqout-btn-color);
    padding-right: 5px;
    display: inline-block;
    max-width: 25ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}


.message {
    margin-top: 5px;
}

.decrease-size {
    font-size: 0.6rem;
}

.nowrap {
    white-space: nowrap;
}


.admin-button {
    float:right;
}

.dropdown-submenu:hover .dropdown-submenu {
    display: block;
}


.right-menu {
    right: 0px;
    display: block;
    margin-left: auto; /* Automatically adjust margin to the left to push it to the right */


}

.breadcrumb {
    margin-bottom: 5px;
    margin-top: 0;
    padding-top: 0;
}

.navbar-brand {
    padding-right:0px;
}
.navbar-brand:hover { text-decoration: none; }
.navbar-brand:hover .brand-name { text-decoration: underline; }

/* Bootstrap's navbar links are white at 55%, which is 4.33:1 on this ground. The palette
   already defines the value meant for text on the always-dark navbar; wire it up. */
header.navbar {
    --bs-navbar-color: var(--sqout-on-dark-muted);
    --bs-navbar-hover-color: var(--sqout-btn-color);
}

/* Prevent nav-link text + badge from wrapping and inflating navbar height */
header.navbar .nav-link {
    white-space: nowrap;
}
@media (min-width: 1200px) and (max-width: 1499.98px) {
    header.navbar .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Below xl the drawer IS the navbar, which does not follow the theme — a body-coloured
   panel put `--bs-navbar-color`'s white links on a white ground and the menu read empty. */
@media (max-width: 1199.98px) {
    header.navbar .offcanvas {
        --bs-offcanvas-bg: rgba(var(--bs-dark-rgb), 1);
        --bs-offcanvas-color: var(--sqout-on-dark-muted);
        --bs-offcanvas-border-color: var(--sqout-on-dark-divider);
    }

    header.navbar .offcanvas .offcanvas-title {
        color: var(--sqout-btn-color);
    }

    header.navbar .offcanvas .btn-close {
        filter: var(--bs-btn-close-white-filter);
    }
}

.overflow-x-auto {
    overflow-x: auto;
}

.organization-logo-div {
    text-align: center;
}
.organization-logo {
    max-width: 300px;
    text-align: center;
}


.sort-indicator {
    color: var(--bs-secondary-color);
}

.link-foot {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    margin-left: 10px;
}
.link-foot:hover {
    color: var(--sqout-on-dark-muted);
}


/* Add to your CSS */
.pagination {
    margin: 20px 0;
    text-align: center;
}
.pagination .step-links {
    display: inline-block;
}
.pagination a {
    padding: 5px 10px;
    text-decoration: none;
    border: 1px solid var(--bs-border-color);
    margin: 0 4px;
}
.pagination .current {
    padding: 5px 10px;
    border: 1px solid var(--bs-border-color);
    margin: 0 4px;
}

/* =================================================================
   Content components (T3, ledger row 14a)

   One definition, previously two: templates/user/user_management_base.html and
   templates/platform_admin/base.html each carried a full copy in an inline <style>,
   with different values — the same .stat-card was flat-UI blue on one page and
   SQOUT-palette blue on the next. The platform-admin values were on-palette and are
   the ones kept, resolved through tokens so both themes work.
   ================================================================= */

.stat-card {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 0.125rem 0.25rem var(--sqout-shadow-sm);
    background-color: var(--sqout-surface);
    transition: transform 0.15s ease-in-out;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 600;
}

.stat-card .stat-label {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.stat-card.stat-primary { border-left: 4px solid var(--bs-primary); }
.stat-card.stat-success { border-left: 4px solid var(--bs-success); }
.stat-card.stat-warning { border-left: 4px solid var(--bs-warning); }
.stat-card.stat-danger  { border-left: 4px solid var(--bs-danger); }
.stat-card.stat-info    { border-left: 4px solid var(--bs-info); }

.data-card {
    background-color: var(--sqout-surface);
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem var(--sqout-shadow-sm);
    margin-bottom: 1rem;
}

.data-card .card-header {
    background-color: var(--sqout-surface-alt);
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
}

.data-table {
    background-color: var(--sqout-surface);
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem var(--sqout-shadow-sm);
}

.data-table thead th {
    background-color: var(--sqout-surface-alt);
    border-bottom: 2px solid var(--bs-border-color);
    font-weight: 600;
}

.filter-card {
    background-color: var(--sqout-surface);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.125rem 0.25rem var(--sqout-shadow-sm);
}

.action-card {
    background-color: var(--sqout-surface);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.125rem 0.25rem var(--sqout-shadow-sm);
    border-left: 4px solid var(--bs-primary);
}

.member-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--sqout-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.member-card:hover {
    background-color: var(--sqout-surface-alt);
}

.member-card .member-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-card .member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: var(--sqout-btn-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.member-card .member-details .name {
    font-weight: 500;
}

.member-card .member-details .email {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.member-card .member-actions {
    display: flex;
    gap: 0.5rem;
}

.team-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.team-card .team-header {
    background-color: var(--sqout-surface-alt);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-card .team-header.border-leader { border-left: 4px solid var(--bs-success); }
.team-card .team-header.border-member { border-left: 4px solid var(--bs-primary); }

.team-card .team-body {
    padding: 1rem 1.25rem;
    background-color: var(--sqout-surface);
}

/* Bootstrap pins --bs-badge-color to #fff for both themes, and these grounds lighten in
   dark — white on them measures ~1.7:1. The component's own hook flips it instead. */
.badge { --bs-badge-color: var(--sqout-on-accent); }
/* .bg-dark is a dark ground in BOTH themes (#3a434a / #2a3036 — the value sqout-colors.css
   line 102 says was judged on this very badge), so it keeps a light foreground. */
.badge.bg-dark { --bs-badge-color: var(--sqout-btn-color); }

.badge-active    { background-color: var(--bs-success); }
.badge-leader    { background-color: var(--bs-success); }
.badge-inactive  { background-color: var(--bs-secondary); }
.badge-deleted   { background-color: var(--bs-danger); }
.badge-suspended { background-color: var(--bs-warning); color: var(--sqout-on-tint); }
.badge-admin     { background-color: var(--sqout-badge-admin); }
.badge-expiring  { background-color: var(--sqout-badge-expiring); }

.license-bar {
    height: 8px;
    border-radius: 4px;
    background-color: var(--sqout-surface-sunken);
    overflow: hidden;
}

.license-bar .progress {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--bs-secondary-color);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.card-title {
    color: var(--bs-link-color);
}
.card-text {
    color: var(--bs-secondary-color);
}


/* =========== Killchain =============== */


.killchain-node { 
    margin: 15px 5px; 
    padding: 10px; 
    background-color: var(--bs-primary-bg-subtle); 
    border-radius: 10px; 
    z-index: 100;
}
.killchain-node p { 
    margin: 0px; 
}
.chain-path {
    position: relative;
    display: flex; 
    flex-direction: column; 
    align-items: center;
}
.killchain-grid {
    display: flex;
    position: relative;  /* Ensure this is relative so SVG positions correctly */
}

.killchain-phase {
    position: relative;  /* This is important for absolute positioning of SVG */
    flex-grow: 1;
    margin: 10px;
    padding-top: 20px; /* Adjust based on your layout */
    background-color: var(--sqout-surface-sunken);
    border-radius: 10px; 
    padding: 10px;
    text-align: center;
}

.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1; /* Ensure SVG is above other content but below text/nodes if needed */
}

.connection-lines line {
    stroke: var(--bs-body-color); /* Ensure this is a color visible against your background */
    stroke-width: 2; /* Adjust thickness as needed */
}
/* =========== FILTER =============== */
.filter-controls {
    padding: 0.25rem 0;
}

.filter-controls button {
    border-color: var(--bs-border-color);
    background: var(--sqout-surface);
    color: var(--bs-body-color);
}

.filter-controls button:hover {
    background: var(--sqout-surface-alt);
}

.filter-controls .layout-button:active {
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: var(--sqout-surface-alt);
}

.center-controls .filter-controls .btn-toolbar {
    justify-content: left;
}

/* Inside the sidebar, stack filter dropdowns vertically */
.sidebar .filter-controls .btn-toolbar {
    flex-direction: column;
    align-items: stretch;
}

.sidebar .filter-controls .btn-group {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 0.25rem;
}

.sidebar .filter-controls .btn-group .dropdown-toggle {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    padding: 3px 6px;
}

/* Thin separator between adjacent buttons inside a merged btn-group */
.btn-group-divided .btn:not(:first-of-type) {
    border-left: 1px solid var(--sqout-on-dark-divider) !important;
}

.nav-tabs-sm .nav-link {
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
}

/* ============= TABLES ======================*/

.table-object-count {
    display: flex;
    justify-content: flex-end;
}
.div-count {
    margin-top: auto;
    margin-bottom: 0;
}

pre {
    color: var(--bs-body-color);
    background-color: var(--sqout-surface-sunken);
    border-radius: 5px;
    padding: 1rem;
}

code {
    color: var(--sqout-code-color);
}

.description-body {
    line-height: 1.8rem;
}

.description-body.in-table {
    padding: 0.75rem 1.25rem;
}

.description-body.in-table p {
    margin-bottom: 0;
}

.description-body.card-description {
    padding: 0.3rem 0 0 0;
}

.description-body.card-description p {
    margin-bottom: 0;
}

/* CKEditor rich-text rendering: manuals, blog, pages, advanced_description */
.rich-content h1 { font-size: 1.875rem; }
.rich-content h2 { font-size: 1.625rem; }
.rich-content h3 { font-size: 1.375rem; }
.rich-content h4 { font-size: 1.125rem; }
.rich-content h5 { font-size: 1rem; }
.rich-content h6 { font-size: 1rem; }

.rich-content figure.table { margin: 1rem 0; }

.rich-content img { max-width: 100%; height: auto; }

.rich-content figure.image {
    display: table;
    clear: both;
    text-align: center;
    margin: 1rem auto;
    min-width: 50px;
}
.rich-content figure.image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.rich-content figure.image.image_resized {
    display: block;
    box-sizing: border-box;
}
.rich-content figure.image.image_resized img { width: 100%; }
.rich-content figure.image.image_resized figcaption { display: block; }

.rich-content figure.image.image-style-align-center { margin-left: auto; margin-right: auto; }
.rich-content figure.image.image-style-align-left { float: left; margin-right: 1.5rem; margin-left: 0; }
.rich-content figure.image.image-style-align-right { float: right; margin-left: 1.5rem; margin-right: 0; }
.rich-content figure.image.image-style-side { float: right; margin-left: 1.5rem; max-width: 50%; }

.rich-content figure.image figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
    text-align: center;
    color: var(--bs-secondary-color);
    background-color: var(--sqout-surface-alt);
}

.rich-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.rich-content table td,
.rich-content table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.rich-content table th {
    font-weight: 700;
    border-bottom: 2px solid var(--bs-border-color);
}

.rich-content table tbody tr:nth-child(even) {
    background-color: var(--sqout-surface-alt);
}

.card {
    background: var(--sqout-surface);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.button-group {
    display: flex;
    justify-content: end;
}

.button-group a.button+a.button {
    margin-left: 22px;
}

.button-group button {
    justify-content: center;
    width: 100%;
}

.button-group a.w-40 {
    width: 40%;
}

.card-filter {
    width: 20%;
    top: 9.3rem;
    float: right;
    background: var(--sqout-surface-sunken);
}

@media screen and (max-width: 90.62rem) {
    .card-filter {
        display: contents;
    }
}

.card-presentation {
    margin-bottom: 30px;
}

.card-attackcon {
    width: 100%;
}

.card-data {
    margin-bottom: 0.5rem;
}

.card-header {
    color: var(--bs-body-color);
    background: var(--sqout-surface-alt);
    border-bottom-color: var(--bs-border-color);
}

a.partial-underline {
    text-decoration: none;
}

a.partial-underline .hover-line {
    text-decoration: underline;
}

.contact-card {
    border-radius: 0.75em;
    overflow: hidden;
}

.contact-card .card-footer {
    padding: 0 1.25rem 1.25rem;
}

.contact-card .card-footer.button-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.contact-card .card-footer-no-button {
    padding: 0.5rem 1.25rem;
    min-height: 4rem;
    max-height: fit-content;
}

.contact-card .card-header {
    padding: 1.25rem 1.25rem 0;
}

.contact-card .card-header.background {
    background: var(--bs-dark);
    color: var(--sqout-btn-color);
    padding-bottom: 1.25rem;
}

.contact-card .card-header.no-background,
.contact-card .card-footer.no-background {
    background: var(--sqout-surface);
    color: var(--bs-body-color);
    border: unset;
}

.contact-card .card-body p {
    margin: 0;
}

.contact-card .card-body.background {
    background: var(--sqout-surface-sunken);
}

.card-body>.table {
    border-right: 0;
    border-left: 0;
    margin-bottom: 0;
}

.card-body>.table:last-child {
    border-bottom: 0;
}

.card-body>.table:not(.table-sm) th,
.card-body>.table:not(.table-sm) td {
    padding: 0.75rem 1.25rem;
}

.card-body>.table td:first-child,
.card-body>.table th:first-child {
    border-left: 0;
}

.card-body>.table td:last-child,
.card-body>.table th:last-child {
    border-right: 0;
}

.card-body>.table tr:first-child td,
.card-body>.table tr:first-child th {
    border-top: 0;
}

.card-body>.table tr:last-child td {
    border-bottom: 0;
}

.card-body .card-header+.table {
    border-top: 0;
}

.card-data:last-of-type {
    margin-bottom: 0;
}

.card-title {
    font-size: 1.1rem;
    color: var(--bs-body-color);
}

.contact-card-title {
    font-size: 1.1rem;
    font-weight: bold;
}

.card-title-icon {
    float: right;
    color: var(--bs-link-color);
}
/* ============= MATRIX ======================*/

.matrix-container {
    border: 1px solid var(--bs-border-color);
    background: var(--sqout-surface-sunken);
    /*background: white;*/
}

.matrix-container+.matrix-container {
    margin-top: to-rem(16);
}

.matrix-container .matrix-border {
    border-left: 1px solid var(--bs-border-color);
    padding-left: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.matrix-container .matrix-title {
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.matrix-container .scroll-indicator-group {
    white-space: nowrap;
    display: flex;
}

.matrix-container .scroll-indicator-group .matrix-scroll-box {
    flex-grow: 1;
    display: inline-block;
}

.matrix-container .scroll-indicator-group .scroll-indicator {
    width: 0px;
    display: inline-block;
    position: relative;
}

.matrix-container .scroll-indicator-group .scroll-indicator .cover {
    width: 50px;
    height: 100%;
    position: absolute;
    pointer-events: none;
}

.matrix-container .scroll-indicator-group .scroll-indicator.right .cover {
    right: 0;
}

.matrix-container .scroll-indicator-group .scroll-indicator.right.show .cover {
    background: linear-gradient(to right, transparent, var(--sqout-surface));
}

.matrix-container .scroll-indicator-group .scroll-indicator.left .cover {
    left: 0;
}

.matrix-container .scroll-indicator-group .scroll-indicator.left.show .cover {
    background: linear-gradient(to left, transparent, var(--sqout-surface));
}

.matrix {
    white-space: normal;
    line-height: 14px;
}

.matrix.side .tactic {
    padding: 2px 5px;
    width: 1%;
    vertical-align: top;
}

.matrix.side .tactic:first-child {
    padding: 2px 5px 2px 2px;
}

.matrix.side .tactic:last-child {
    padding: 2px 2px 2px 5px;
}

.matrix.side .tactic:hover:not(.name, .count) {
    background: var(--sqout-surface-sunken);
}

.matrix.side .tactic:hover:not(.name, .count) .sidebar.expanded .angle {
    background: var(--sqout-surface-sunken);
}

.matrix.side .tactic.name,
.matrix.side .tactic.count {
    text-align: center;
    font-size: 16px;
}

.matrix.side .tactic.name {
    font-weight: bold;
}

.matrix.side .tactic.count {
    font-size: 13px;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.matrix.side .tactic .techniques-table {
    border-collapse: collapse;
    width: 100%;
}

.matrix.side .tactic .techniques-table tr,
.matrix.side .tactic .techniques-table td {
    padding: 0;
}

.matrix.side .tactic .techniques-table tr {
    height: 1px;
}

.matrix.side .tactic .supertechnique {
    border-collapse: collapse;
    width: 100%;
    padding: 0;
    margin: 0;
}

.matrix.side .tactic .supertechnique td {
    padding: 0;
    vertical-align: top;
}

.matrix.side .tactic .supertechnique td.technique {
    outline: 1px solid var(--bs-secondary);
    outline-offset: -1px;
}

.matrix.side .tactic .subtechniques {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: -1px;
    border-left: 2px solid var(--bs-secondary);
    outline: 1px solid var(--bs-secondary);
    outline-offset: -1px;
    white-space: nowrap;
    vertical-align: top;
}

.matrix.side .tactic .subtechniques.hidden {
    display: none;
}

.matrix.side .tactic .subtechniques .subtechnique {
    height: 100%;
    flex-grow: 1;
}

.matrix.side .tactic .handle {
    text-align: center;
    vertical-align: middle;
    transform: rotate(-90deg);
    color: var(--sqout-btn-color);
    width: 12px;
    height: 12px;
    font-size: 16px;
    line-height: 12px;
}

.matrix.side .tactic .sidebar {
    min-width: 8px;
    width: 12px;
    padding: 0;
    background: var(--bs-secondary);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

.matrix.side .tactic .sidebar .angle {
    display: none;
}

.matrix.side .tactic .sidebar.expanded .angle {
    margin: 0 auto;
    height: 12px;
    display: block;
    position: absolute;
    background: var(--sqout-surface);
}

.matrix.side .tactic .sidebar.expanded .angle svg {
    fill: var(--bs-secondary);
    vertical-align: baseline;
}

.matrix.side .tactic .sidebar.expanded .angle.top {
    top: 0px;
}

.matrix.side .tactic .sidebar.expanded .angle.bottom {
    bottom: 0px;
}

.matrix.flat .tactic {
    margin-right: 5px;
    width: 1%;
    vertical-align: top;
}

.matrix.flat .tactic.name,
.matrix.flat .tactic.count {
    text-align: center;
    font-size: 16px;
}

.matrix.flat .tactic.name {
    font-weight: bold;
}

.matrix.flat .tactic.count {
    font-size: 13px;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.matrix.flat .tactic .subtechniques-row.hidden {
    display: none;
}

.matrix.flat .tactic .supertechnique {
    border-collapse: collapse;
    width: 100%;
    padding: 0;
    margin: 0;
}

.matrix.flat .tactic .supertechnique td {
    padding: 0;
    vertical-align: top;
}

.matrix.flat .tactic .supertechnique td.sidebar.technique {
    min-width: 8px;
    width: 12px;
    padding: 0;
    background: var(--bs-secondary);
    cursor: pointer;
    vertical-align: middle;
}

.matrix.flat .tactic .supertechnique td.sidebar.technique .handle {
    text-align: center;
    vertical-align: middle;
    transform: rotate(-90deg);
    color: var(--sqout-btn-color);
    width: 12px;
    height: 9px;
    font-size: 16px;
    line-height: 12px;
}

.matrix.flat .tactic .supertechnique td.sidebar.subtechniques svg {
    fill: var(--bs-secondary);
    vertical-align: baseline;
}

.matrix.flat .tactic .supertechnique td.sidebar {
    border-right: 2px solid var(--bs-secondary);
}

.matrix.flat .tactic .supertechnique td.technique {
    outline: 1px solid var(--bs-secondary);
    outline-offset: -1px;
}

.matrix.flat .tactic .more-icon {
    transition: all ease 0.125s;
    vertical-align: top;
    transform: scale(0.5) rotate(-90deg);
    width: 12px;
    height: 12px;
}

.matrix.flat .tactic .more-icon.expanded {
    transform: scale(0.5);
}

.matrix .technique-cell {
    height: 100%;
    display: flex;
    align-items: center;
    background-color: var(--sqout-surface);
    font-size: 13px;
    line-height: 14px;
    outline: 1px solid transparent;
    outline-offset: -1px;
}

.matrix .technique-cell a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 7px 3px;
}

.matrix .technique-cell:not(.colored):not(.supertechniquecell) {
    outline-color: var(--bs-border-color);
}

.matrix-controls {
    max-width: 100%;
    width: 100%;
    padding: 0.5rem 1rem;
}

.matrix-page-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    text-align: center;
}

.matrix-controls .layout-button:active {
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: var(--sqout-surface-alt);
}

.table-matrix {
    border: none !important;
}

.table-matrix thead th {
    text-align: center !important;
    vertical-align: middle !important;
    border: 0.0625rem solid var(--bs-border-color) !important;
}

.table-matrix td,
.table-matrix th {
    text-align: center !important;
    vertical-align: middle !important;
    border-top: none !important;
    padding: 0.125rem !important;
    font-size: 0.75rem !important;
}

.table-matrix td.border,
.table-matrix th.border {
    border: 0.0625rem solid var(--bs-border-color) !important;
}

.table-matrix td.no-border,
.table-matrix th.no-border {
    border: none !important;
}

.table-matrix td {
    background: var(--sqout-surface);
    color: var(--bs-body-color);
}

.matrix-tactics-url {
    color: var(--sqout-btn-color);
}

.matrix-tactics-url:visited,
.matrix-tactics-url:hover,
.matrix-tactics-url:active {
    color: var(--sqout-btn-color);
}

/* Matrix filter highlight mode */
.technique-cell.matrix-dimmed {
    opacity: 0.35;
}

.technique-cell.matrix-dimmed a {
    color: var(--bs-secondary-color);
}

/* Matrix filter controls — toggle-pill layout */
#matrix-filters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: auto;
    padding: 0.5rem 0;
}

.filter-row {
    flex-wrap: wrap;
    /* The title above and the count below are both centred; leaving the controls flush left
       put the only left-aligned band between two centred ones. */
    justify-content: center;
}

.filter-label {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.select-toggle-link {
    font-size: 0.75rem;
    text-decoration: none;
    color: var(--bs-secondary-color);
}

.select-toggle-link:hover {
    color: var(--bs-link-color);
    text-decoration: underline;
}

.secondary-controls {
    font-size: 0.85rem;
}

#matrix-stats {
    text-align: center;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin: 0.25rem 0;
    padding: 0;
}

/* CM coverage: colored left border on technique cells */
.technique-cell.cm-active {
    border-left: 3px solid transparent;
}

.technique-cell.cm-active.cm-covered {
    border-left-color: var(--bs-success);
}

.technique-cell.cm-active.cm-uncovered {
    border-left-color: var(--bs-danger);
}

/* CM coverage: count badge */
.cm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

.cm-badge-covered {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.cm-badge-uncovered {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

#cm-legend {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

#cm-legend .cm-covered {
    color: var(--bs-success);
    font-weight: 600;
}

#cm-legend .cm-uncovered {
    color: var(--bs-danger);
    font-weight: 600;
}

#no-match-message {
    text-align: center;
    padding: 1rem;
    color: var(--bs-secondary-color);
    font-size: 14px;
}

.sidebar-collapse-btn {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.sidebar-chevron {
    transition: transform 0.2s ease;
}

.sidebar-collapse-btn.collapsed .sidebar-chevron {
    transform: rotate(-90deg);
}

/* Collapsible section cards on item detail pages */
.section-card {
    border: 1px solid var(--bs-border-color);
}

.section-card .card-header {
    background-color: var(--sqout-surface-alt);
    border-bottom: 1px solid var(--bs-border-color);
}

.section-card .card-header:hover {
    background-color: var(--sqout-surface-sunken);
}

.section-chevron {
    transition: transform 0.2s ease;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

[aria-expanded="false"] .section-chevron {
    transform: rotate(-90deg);
}

/* Light row borders inside section cards */
.section-card .table td,
.section-card .table th {
    border-color: var(--bs-border-color);
}

.section-card .table thead {
    font-size: 0.85rem;
}

.section-card .section-description {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin: 0;
}

/* List hierarchy: child indentation indicator */
.list-child-indicator {
    color: var(--bs-secondary-color);
    font-size: 0.85em;
    user-select: none;
}

tr.sub.technique {
    background-color: var(--sqout-surface-alt);
}

/* Print view: hide non-content elements, expand all sections
   (td_app_bases_technical_improvements.md §6.2) */
@media print {
    /* Hide navigation, sidebar, left menu, interactive elements */
    .navbar, .sidebar, #sidebars, .btn-group,
    .qds-rail, .card-admin, .card-dashboard,
    .expand-button, .resizer, .qds-desktop-only,
    form, .modal, .popover, footer,
    [data-action], [data-toggle="collapse"],
    .nav-tabs, .tab-content .nav { display: none !important; }

    /* Expand all collapsed sections */
    .collapse { display: block !important; height: auto !important; }

    /* Full width for content column */
    .col-md-8, .col-md-10 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    .col-md-4 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

    /* Clean typography */
    body { font-size: 11pt; color: #000; }
    a { color: #000; text-decoration: none; }
    a[href]:after { content: none; }

    /* Page breaks */
    h1, h2, h3 { page-break-after: avoid; }
    table, .card { page-break-inside: avoid; }
}


.report-result {
    padding: 0.5rem;
    margin: 0.5rem;
    border: 1px solid var(--bs-border-color);
}

.report-not-threat-background {
    background: var(--sqout-verdict-safe);
    font-weight: bold;
    padding: 0.25rem;
}
.report-potential-threat-back {
    background: var(--sqout-verdict-warn);
    font-weight: bold;
    padding: 0.25rem;
}
.report-threat-back {
    background: var(--sqout-verdict-threat);
    font-weight: bold;
    padding: 0.25rem;
}
.report-mitigated-back {
    background: var(--sqout-verdict-mitigated);
    font-weight: bold;
    padding: 0.25rem;
}

.report-result ul {
    margin-top: 0;
    margin-bottom: 0;
}

/* ============= HOME DASHBOARD ======================*/

.card.shadow-sm.border-0 .card-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.card.shadow-sm.border-0 .card-footer {
    font-size: 0.875rem;
}

/* Subscription expiry badges */
.badge.bg-warning {
    color: var(--sqout-btn-color);
}

.badge.bg-danger {
    color: var(--sqout-btn-color);
}

/* --- Field help (dotted-underline + click popover) --- */
.field-help-active {
    text-decoration: underline dotted;
    text-decoration-color: var(--bs-secondary);
    text-underline-offset: 3px;
    cursor: help;
}

/* Popper centres the popover on the trigger's box, and a full-width <h3> put it in the middle
   of the column rather than under the heading it explains. Headings only: `data-field-help`
   also sits on <th>, where inline-block drops the cell out of the table's column model and
   the whole header row collapses to the left of its own columns. */
h1.field-help-active, h2.field-help-active, h3.field-help-active,
h4.field-help-active, h5.field-help-active, h6.field-help-active {
    display: inline-block;
}

.field-help-popover {
    max-width: 320px;
}

.field-help-popover .popover-body {
    font-size: 0.8125rem;
    line-height: 1.45;
}

.field-help-summary {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.field-help-extended {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: var(--sqout-surface-alt);
    border-left: 3px solid var(--bs-info);
    border-radius: 0 0.2rem 0.2rem 0;
    font-size: 0.75rem;
    color: var(--bs-body-color);
    line-height: 1.45;
}

.node-ref {
    border-bottom: 1px dotted var(--bs-border-color);
    cursor: help;
}

.node-ref-popover-tip .popover-body {
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ============= QSYSTEM PROFILE LAYOUT (QBuilder + QAnalyser) ======================*/
.diagram-float-container {
    overflow: hidden; /* Contain floats */
}
.diagram-float {
    float: right;
    min-width: 450px;
    max-width: 55%;
    margin-left: 25px;
    margin-bottom: 15px;
    margin-top: 15px;
    background-color: var(--sqout-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 15px;
}
.diagram-float-empty {
    min-width: 300px;
    max-width: 350px;
    padding: 15px;
}
/* Without a formatting context of its own a panel's background runs under the
   floated diagram; only its text wraps. */
.diagram-float-container .alert,
.diagram-float-container .card {
    display: flow-root;
}
/* Responsive: stack on smaller screens */
@media (max-width: 992px) {
    .diagram-float {
        float: none;
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
    }
}
.svg-preview-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 550px;
    overflow: hidden;
}
.svg-preview-container svg {
    max-width: 100%;
    max-height: 520px;
    height: auto !important;
    width: auto !important;
}
.profile-properties li {
    padding: 4px 0;
}
.profile-properties i {
    width: 20px;
    text-align: center;
}
.profile-description {
    font-size: 1.1em;
    line-height: 1.6;
}
.profile-description-long {
    line-height: 1.7;
    text-align: justify;
}
/* =================================================================
   Sidebar chassis (T4, ledger rows 1-5)

   One implementation replacing five: two inline <style> blocks in the shims,
   .sidenav-wrapper, .sidenav-wrapper.manual-nav and .card-toc. Two shapes —
   flat for a section/object rail, tree for the lmenu and the manual — and the
   active item is marked with aria-current="page" only. The role="tablist" the
   old containers carried needed role="tab" children driven by aria-selected;
   a screen reader was announcing "tab 3 of 11, not selected" over a link list.
   ================================================================= */

/* The slot is the strip: it runs header to footer at a fixed width and carries the ground
   and the edge, so the rail inside it is just a list. As a rounded card on a near-white
   ground (#f8f9fa on #ffffff) it read as nothing at all. */
.qds-rail-slot {
    flex: 0 0 var(--sqout-rail-w);
    width: var(--sqout-rail-w);
    background-color: var(--sqout-surface-alt);
    border-right: 1px solid var(--bs-border-color);
    /* No height and no sticky HERE. The strip stretches to the shell, which is what makes it
       meet the footer; giving it a viewport-height box instead forced the document to
       100vh + footer (a scrollbar over nothing) and, once that was subtracted, left it
       ending a footer short of the bottom. The rail inside it is what sticks. */
}

.qds-rail-slot > .qds-rail {
    position: sticky;
    top: var(--sqout-header-h);
    max-height: calc(100vh - var(--sqout-header-h));
    overflow-y: auto;
}

.qds-rail-slot--tree {
    flex-basis: var(--sqout-rail-tree-w);
    width: var(--sqout-rail-tree-w);
    /* Anchors the drag handle. The slot no longer positions itself, so without this the
       handle would resolve against the shell. */
    position: relative;
}

/* The tree does NOT share the rule above's sticky contract: uncapped, it is routinely taller
   than the viewport, and a sticky box taller than the viewport pins its top and puts its
   bottom out of reach entirely. It scrolls with the page instead, so it needs no rule here. */

@media (max-width: 991.98px) {
    .qds-rail-slot,
    .qds-rail-slot--tree {
        flex: 1 1 100%;
        width: 100%;
        height: auto;
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .qds-shell {
        flex-wrap: wrap;
    }
}

.qds-rail {
    /* Matches .page's top padding so the rail heading and the breadcrumb start on one line.
       No height: the slot owns the box now, and filling it pushed Back to Main to the floor
       of the viewport with a scrollbar above it. */
    padding: 0.25rem 0;
}

.qds-rail-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    /* Weighted ABOVE the heading, not below it: the gap belongs between one group and the
       next, and the old 0.25/0.5 split pushed each caption toward the group under it. */
    padding: 0.45rem 1.25rem 0.15rem;
    font-weight: 600;
}

.qds-rail .nav-link {
    color: var(--bs-body-color);
    /* Vertical only — the horizontal inset is the rail's gutter and is shared with the
       headings. 0.3rem keeps the row about 34px tall, comfortably over the 24px minimum
       pointer target WCAG 2.5.8 asks for; going tighter buys a few pixels and costs that. */
    padding: 0.3rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qds-rail .nav-link:hover {
    background-color: var(--sqout-surface-sunken);
    text-decoration: none;
}

.qds-rail .nav-link.active {
    color: var(--sqout-btn-color);
    background-color: var(--bs-primary);
}

.qds-rail .nav-link i {
    width: 1.25rem;
    text-align: center;
}

.qds-rail-divider {
    border-top: 1px solid var(--bs-border-color);
    /* The rule and the heading above the next group both separate, so 0.75rem on top of a
       heading's own padding spaced the groups twice. */
    margin: 0.4rem 0;
}

/* The tree shape keeps the lmenu's own nesting; only the frame is shared. */
.qds-rail--tree {
    /* No height, no cap, no scroller: a taxonomy of 100+ techniques got its own scrollbar
       inside a page that already scrolls. It runs its full length and the page carries it. */
    display: flex;
    flex-direction: column;
    padding: 0.5rem 4px 0.5rem 0.5rem;
}

.qds-rail--toc {
    background-color: var(--sqout-surface);
    padding: 0;
    position: sticky;
    top: 1rem;
    /* .qds-rail sets height:100%; a box that fills its container never scrolls past it, and
       a sticky box that never scrolls past its container does nothing. */
    height: auto;
}

/* ---- The tree shape's own nesting, ported from the retired .sidenav-wrapper prefix.
   Phase 5 said "the tree keeps the lmenu's own nesting; only the frame is shared" and then
   deleted the nesting with the prefix, leaving three templates emitting classes no rule
   matched: no indentation, no active highlight, an invisible chevron, an unstyled badge and
   a resize handle with no cursor. ---- */

.sidebar.nav {
    /* The tree inside scrolls, not this box: a scroll container is the sticky ancestor its
       child sticks to, and one that never scrolls pins the child to nothing. */
    overflow-x: hidden;
    z-index: 0;
    flex-wrap: nowrap !important;
    scrollbar-gutter: stable;
    /* Width comes from .qds-rail-slot--tree and from the inline width resizer.js writes. */
}

/* Drag-to-resize handle: positioned at right edge, out of flex flow */
.sidebar.nav > .resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    background: var(--bs-border-color);
    opacity: 0;
    transition: opacity 0.2s;
}

.sidebar.nav > .resizer:hover,
.sidebar.nav > .resizer.active {
    opacity: 1;
}

.sidebar.nav > #sidebars {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}



@media screen and (max-width: 1520px) {
    .qds-rail--tree {
        display: block;
    }
}


.qds-rail--tree .heading {
    border-bottom: 1px solid var(--bs-border-color);
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
}

.qds-rail--tree .heading .heading-title {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.qds-rail--tree .checkbox-div {
    border-bottom: 1px solid var(--bs-border-color);
    flex: 0 1 0;
}

.qds-rail--tree .sidenav-list {
    flex: 1 0 0;
   /* overflow-y: auto;*/
}

.qds-rail--tree .sidenav-list .sidenav {
    width: 100%;
    word-break: break-word;
    font-size: 0.85rem;
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-head {
    display: flex;
    flex-direction: row;
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-head a,
.qds-rail--tree .sidenav-list .sidenav .sidenav-head .expand-button {
    cursor: pointer;
    color: var(--bs-body-color);
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-head a:hover,
.qds-rail--tree .sidenav-list .sidenav .sidenav-head .expand-button:hover {
    background: var(--sqout-surface-sunken);
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-head a,
.qds-rail--tree .sidenav-list .sidenav .sidenav-head span {
    padding: 2px 2px 2px 0;
    display: inline-block;
    flex-grow: 1;
    height: 100%;
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-head a:hover,
.qds-rail--tree .sidenav-list .sidenav .sidenav-head span:hover {
    text-decoration: none;
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-head .expand-button {
    padding: 5px;
    border-left: 1px solid var(--bs-border-color);
    display: inline-block;
    display: flex;
    flex-direction: row;
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-head .expand-button :first-child {
    cursor: pointer;
    display: inline-block;
    flex-grow: 1;
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-head .expand-button:after,
.qds-rail--tree .sidenav-list .sidenav .sidenav-head .expand-button::after {
    content: "";
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    vertical-align: top;
    /* Masked rather than painted: a data: URI cannot read a custom property, so a filled
       SVG keeps its baked colour in both themes. The mask takes only the alpha channel
       and the colour comes from background-color, which can be a token. */
    background-color: var(--bs-body-color);
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    z-index: 1;
    transition: all 0.2s ease;
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-head .expand-button:not(.collapsed):after,
.qds-rail--tree .sidenav-list .sidenav .sidenav-head .expand-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-head.active,
.qds-rail--tree .sidenav-list .sidenav .sidenav-head.active>a {
    color: var(--bs-link-color) !important;
    font-weight: bolder;
    background: var(--sqout-surface-sunken);
    font-weight: 700;
}

.qds-rail--tree .sidenav-list .sidenav .sidenav-body {
    padding-left: 0.75rem;
}

.qds-rail--tree .sidenav-list .sidenav .sidenav {
    padding-left: 0.75rem;
}

/* Left menu: item count badges and empty group styling */
.qds-rail--tree .sidenav-list .sidenav .sidenav-head a .badge {
    background-color: var(--bs-secondary);
    color: var(--sqout-on-accent);
    font-size: 0.7rem;
    font-weight: normal;
    padding: 0.15rem 0.4rem;
    border-radius: 0.5rem;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.qds-rail--tree .sidenav-list .sidenav.lmenu-empty {
    display: none;
    opacity: 0.5;
}

.qds-rail--tree .sidenav-list.show-empty .sidenav.lmenu-empty {
    display: block;
}

/* ===== Manuals sidebar — refined styling (scoped via .qds-rail--manual; the bases
   left menu reuses .qds-rail--tree and is intentionally left untouched). ===== */
.qds-rail--manual .heading {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.4rem 0.5rem 0.55rem;
    margin-bottom: 0.4rem;
}

.qds-rail--manual .heading .heading-title {
    color: var(--bs-body-color);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.qds-rail--manual .heading .heading-title i {
    color: var(--bs-link-color);
}

.qds-rail--manual .sidenav-list .sidenav {
    font-size: 0.875rem;
}

.qds-rail--manual .sidenav-list .sidenav .sidenav-head {
    border-left: 3px solid transparent;
    border-radius: 7px;
    margin: 1px 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.qds-rail--manual .sidenav-list .sidenav .sidenav-head:hover {
    background: var(--bs-primary-bg-subtle);
}

.qds-rail--manual .sidenav-list .sidenav .sidenav-head a,
.qds-rail--manual .sidenav-list .sidenav .sidenav-head span {
    padding: 0.4rem 0.55rem;
    line-height: 1.4;
    color: var(--bs-body-color);
    transition: color 0.15s ease;
}

/* Hover lives on the whole row now — drop the shared flat per-element grey. */
.qds-rail--manual .sidenav-list .sidenav .sidenav-head a:hover,
.qds-rail--manual .sidenav-list .sidenav .sidenav-head .expand-button:hover {
    background: transparent;
}

.qds-rail--manual .sidenav-list .sidenav .sidenav-head .expand-button {
    border-left: none;
    padding: 0 0.15rem;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.qds-rail--manual .sidenav-list .sidenav .sidenav-head:hover .expand-button {
    opacity: 0.9;
}

.qds-rail--manual .sidenav-list .sidenav .sidenav-head.active {
    background: var(--bs-primary-bg-subtle);
    border-left-color: var(--bs-link-color);
}

.qds-rail--manual .sidenav-list .sidenav .sidenav-head.active,
.qds-rail--manual .sidenav-list .sidenav .sidenav-head.active > a {
    color: var(--bs-link-color) !important;
    font-family: inherit;
    font-weight: 600;
}

/* Keep the blue tint on the row, not doubled on the inner link (overrides the
   shared flat grey on .active > a). */
.qds-rail--manual .sidenav-list .sidenav .sidenav-head.active > a {
    background: transparent;
}

/* Hierarchy guide line for nested manual entries. */
.qds-rail--manual .sidenav-list .sidenav .sidenav-body {
    padding-left: 0.55rem;
    margin-left: 0.5rem;
    border-left: 1px solid var(--bs-border-color);
}

.qds-rail--manual .sidenav-list .sidenav .sidenav {
    padding-left: 0;
}

/* Section anchor navigation — sticky TOC card (td_app_bases_technical_improvements.md §2.2) */

.qds-rail--toc .nav-toc .nav-link {
    color: var(--bs-body-color);
    font-size: 0.85rem;
}

.qds-rail--toc .nav-toc .nav-link:hover {
    color: var(--bs-link-color);
}

@media (max-width: 991.98px) {
    .qds-rail {
        max-height: none;
    }
}

/* A drag-and-drop canvas and the notice that replaces it are mutually exclusive: the
   notice is hidden on desktop, the canvas below 992px. Declared as one pair so neither can
   be shown without the other being hidden. */
.qds-desktop-only {
    display: none;
}

@media (max-width: 991.98px) {
    .qds-desktop-only {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .qds-canvas-only,
    .qds-form-desktop-only {
        display: none !important;
    }
}

/* Moved out of two templates' inline <style> (criterion 6). Both are platform-wide: select2
   and CKEditor are used across apps, and platform.css is already loaded on every page. */
.dashboard-health-table td,
.dashboard-health-table th {
    border-color: var(--bs-border-color) !important;
}

.select2-container { width: 100% !important; }
.select2-results__option .badge { font-size: 0.7em; }

/* django-jsoneditor floats its container and never clears it. Bootstrap positions a
   checkbox by floating the input too, so a checkbox in the field after a JSON editor is
   placed BESIDE the editor — off in the right margin, 800px from its own label, which is
   how `names_individual` looked like a label with no field. The float only exists so
   `resize: both` applies; a block at the same width resizes identically.

   `!important` because the vendor rule is `div .outer_jsoneditor`, which out-specifies a
   bare class, and it arrives through `{{ form.media }}` — after this file. Same reason the
   CKEditor palette override below has to out-specify rather than follow. */
.outer_jsoneditor { float: none !important; }

/* Relations-page junction editors start short; out-specifies the vendor 300px min-height, which loads later. */
.ck-compact .ck.ck-content.ck-editor__editable {
    min-height: 80px;
}
.ck-editor-container .ck.ck-editor { max-width: 100%; }

/* CKEditor paints its palette on a bare `:root` from a stylesheet that loads after ours, so
   this has to out-specify it rather than follow it. Light needs no counterpart: the vendor
   defaults already ARE the light ground. */
:root[data-bs-theme="dark"] {
    --ck-color-base-background:                  var(--bs-body-bg);
    --ck-color-base-foreground:                  var(--sqout-surface-alt);
    --ck-color-base-border:                      var(--bs-border-color);
    --ck-color-base-text:                        var(--bs-body-color);
    --ck-color-text:                             var(--bs-body-color);
    --ck-color-base-active:                      var(--bs-primary);
    --ck-color-base-active-focus:                var(--bs-primary);
    --ck-color-base-focus:                       var(--bs-primary);

    --ck-color-toolbar-background:               var(--sqout-surface-alt);
    --ck-color-toolbar-border:                   var(--bs-border-color);

    --ck-color-button-default-background:        transparent;
    --ck-color-button-default-hover-background:  var(--bs-tertiary-bg);
    --ck-color-button-default-active-background: var(--bs-tertiary-bg);
    --ck-color-button-default-disabled-background: transparent;
    --ck-color-button-on-background:             var(--bs-tertiary-bg);
    --ck-color-button-on-hover-background:       var(--bs-tertiary-bg);
    --ck-color-button-on-active-background:      var(--bs-tertiary-bg);
    --ck-color-button-on-color:                  var(--bs-primary);

    --ck-color-panel-background:                 var(--sqout-surface);
    --ck-color-panel-border:                     var(--bs-border-color);
    --ck-color-dropdown-panel-background:        var(--sqout-surface);
    --ck-color-dropdown-panel-border:            var(--bs-border-color);

    --ck-color-list-background:                  var(--sqout-surface);
    --ck-color-list-button-hover-background:     var(--bs-tertiary-bg);
    --ck-color-list-button-on-background:        var(--bs-tertiary-bg);
    --ck-color-list-button-on-text:              var(--bs-body-color);

    --ck-color-input-background:                 var(--bs-body-bg);
    --ck-color-input-border:                     var(--bs-border-color);
    --ck-color-input-text:                       var(--bs-body-color);
    --ck-color-input-disabled-background:        var(--sqout-surface-sunken);
    --ck-color-input-disabled-text:              var(--bs-secondary-color);

    --ck-color-engine-placeholder-text:          var(--bs-secondary-color);
    --ck-color-shadow-drop:                      var(--sqout-shadow-sm);
    --ck-color-shadow-inner:                     var(--sqout-shadow-sm);
}