/* =====================================================================
   Partner Cyber Security Platform - Design system of the platform (neutral, configurable brand colors)
   ===================================================================== */

:root {
    --brand-black: #000000;
    --brand-ink: #0a0a0b;
    --brand-graphite: #17181a;
    --brand-steel: #2a2c30;
    --brand-steel-light: #3a3d42;
    --brand-silver: #c8ccd1;
    --brand-silver-dark: #8c9198;
    --brand-silver-light: #e6e8eb;
    --brand-paper: #f5f6f7;
    --brand-white: #ffffff;
    --brand-accent: #0078d6;
    --brand-accent-dark: #005ba3;
    --brand-accent-soft: rgba(0, 120, 214, .12);

    --level-1: #e5484d;
    --level-2: #f76b15;
    --level-3: #e2a300;
    --level-4: #3e9b4f;
    --level-5: #0078d6;

    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;

    --radius: 4px;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
    --shadow-strong: 0 12px 40px rgba(0,0,0,.25);
    --transition: .2s cubic-bezier(.2,.7,.2,1);

    --page-bg: var(--brand-paper);
    --card-bg: var(--brand-white);
    --card-border: #e3e5e8;
    --text-main: #16171a;
    --text-muted: #6b7076;
    --divider: #e3e5e8;
    --loading-veil: rgba(245, 246, 247, .72);
}

[data-bs-theme="dark"] {
    --page-bg: #0b0c0d;
    --card-bg: #141517;
    --card-border: #26282c;
    --text-main: #eceef0;
    --text-muted: #9aa0a7;
    --divider: #26282c;
    --loading-veil: rgba(11, 12, 13, .72);
    --bs-body-bg: #0b0c0d;
    --bs-body-color: #eceef0;
    --bs-border-color: #2b2e33;
    --bs-secondary-color: #9aa0a7;
}

html, body {
    min-height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: .925rem;
    color: var(--text-main);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

#mainForm {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--brand-accent);
    text-decoration: none;
}

a:hover {
    color: var(--brand-accent-dark);
}

h1, h2, .display-title {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: .01em;
}

h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -.005em;
}

.text-muted-brand {
    color: var(--text-muted) !important;
}

.eyebrow {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand-silver-dark);
    font-weight: 600;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

.btn {
    border-radius: var(--radius);
    font-weight: 500;
    letter-spacing: .01em;
    transition: all var(--transition);
}

.btn-brand-primary {
    background: var(--brand-accent);
    border: 1px solid var(--brand-accent);
    color: #fff;
}

.btn-brand-primary:hover, .btn-brand-primary:focus {
    background: var(--brand-accent-dark);
    border-color: var(--brand-accent-dark);
    color: #fff;
}

.btn-brand-dark {
    background: var(--brand-black);
    border: 1px solid var(--brand-black);
    color: #fff;
}

.btn-brand-dark:hover {
    background: var(--brand-steel);
    color: #fff;
}

.btn-brand-outline {
    border: 1px solid rgba(255,255,255,.55);
    color: #fff;
    background: transparent;
}

.btn-brand-outline:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.btn-brand-ghost {
    border: 1px solid var(--card-border);
    color: var(--text-main);
    background: var(--card-bg);
}

.btn-brand-ghost:hover {
    border-color: var(--brand-silver-dark);
    color: var(--text-main);
}

.btn .fa-solid {
    margin-right: .35rem;
}

.btn-icon .fa-solid {
    margin-right: 0;
}

/* ---------------------------------------------------------------
   Navbar
   --------------------------------------------------------------- */

.brand-navbar {
    background: var(--brand-black);
    border-bottom: 1px solid #1c1d20;
    min-height: 64px;
    padding-top: .35rem;
    padding-bottom: .35rem;
    z-index: 1030;
}

/* name and subline sit under the logo, so the brand stays narrow next to a wide menu */
.brand-navbar .navbar-brand {
    flex-direction: column;
    align-items: flex-start !important;
    gap: .2rem;
    padding-top: 0;
    padding-bottom: 0;
}

.brand-logo {
    /*width: 38px;*/
    height: 40px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: .02em;
}

.brand-subline {
    font-size: .56rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-silver-dark);
}

.brand-navbar .nav-link {
    color: rgba(255,255,255,.78);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .02em;
    padding: .65rem .8rem !important;
    position: relative;
    white-space: nowrap;
}

.brand-navbar .nav-link:hover, .brand-navbar .nav-link.show {
    color: #fff;
}

/* the brand gives way first, so the bar never pushes the page wider than the screen */
.brand-navbar .navbar-brand {
    min-width: 0;
    flex-shrink: 1;
}

.brand-navbar .brand-text {
    min-width: 0;
}

.brand-navbar .brand-name, .brand-navbar .brand-subline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1200px) {
    .brand-navbar .navbar-nav > .nav-item > .nav-link::after {
        transition: transform var(--transition);
    }

    .brand-navbar .navbar-nav:first-child > .nav-item > .nav-link::before {
        content: "";
        position: absolute;
        left: .8rem;
        right: .8rem;
        bottom: .2rem;
        height: 1px;
        background: var(--brand-silver);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition);
    }

    .brand-navbar .navbar-nav:first-child > .nav-item > .nav-link:hover::before,
    .brand-navbar .navbar-nav:first-child > .nav-item > .nav-link.show::before {
        transform: scaleX(1);
    }
}

.brand-navbar .dropdown-menu {
    background: var(--brand-graphite);
    border: 1px solid #2a2c30;
    border-radius: var(--radius);
    box-shadow: var(--shadow-strong);
    padding: .5rem;
    margin-top: .4rem;
}

.brand-navbar .dropdown-item {
    color: rgba(255,255,255,.82);
    font-size: .84rem;
    border-radius: 3px;
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.brand-navbar .dropdown-item .fa-solid {
    width: 18px;
    text-align: center;
    color: var(--brand-silver-dark);
}

.brand-navbar .dropdown-item:hover, .brand-navbar .dropdown-item:focus, .brand-navbar .dropdown-item.active {
    background: var(--brand-steel);
    color: #fff;
}

.brand-navbar .dropdown-item:hover .fa-solid, .brand-navbar .dropdown-item.active .fa-solid {
    color: #fff;
}

/* action menus in the page content: a fixed-width icon column with space before the text */
.page-container .dropdown-item > .fa-solid:first-child {
    width: 1.1em;
    margin-right: .55rem;
    text-align: center;
}

.brand-navbar .dropdown-header {
    color: var(--brand-silver-dark);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .5rem .75rem .35rem;
}

.brand-navbar .dropdown-divider {
    border-color: #2a2c30;
}

.mega-menu {
    min-width: min(980px, 92vw);
}

/* desktop: the panel is centered under the whole bar instead of hanging from its menu item, so it stays on
   screen whatever the item's position (it moves with the length of the translated menu labels) */
@media (min-width: 1200px) {
    .brand-navbar .mega-dropdown {
        position: static;
    }

    .brand-navbar .mega-menu[data-bs-popper] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: calc(100vw - 2rem);
        margin-top: 0;
    }
}

/* compact desktop bar (1200-1499px): the user toggle shows only the avatar (name and organization move into
   its menu) and the links are a little tighter, so all items fit in one row in every language */
.user-menu-header, .user-menu-header-divider {
    display: none;
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
    .brand-navbar .navbar-nav:first-child > .nav-item > .nav-link {
        padding-left: .6rem !important;
        padding-right: .6rem !important;
    }

    .brand-navbar .navbar-nav:first-child > .nav-item > .nav-link::before {
        left: .6rem;
        right: .6rem;
    }

    .user-menu-toggle .user-menu-text {
        display: none;
    }

    .user-menu-header {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        padding: .4rem .75rem .25rem;
    }

    .user-menu-header-divider {
        display: list-item;
        list-style: none;
    }
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .25rem 1rem;
}

/* administration: the selected company and the platform are separate bands of the same panel */
@media (min-width: 1200px) {
    .mega-menu {
        min-width: min(1120px, 94vw);
    }
}

.mega-menu-band + .mega-menu-band {
    border-top: 1px solid var(--card-border);
    margin-top: .5rem;
    padding-top: .5rem;
}

.mega-menu-band-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 1rem .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-silver-dark);
}

.mega-menu-band-header b {
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
    color: #fff;
}

.mega-menu-hint {
    font-size: .85rem;
    color: var(--brand-silver-dark);
}

.language-code {
    display: inline-block;
    min-width: 28px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--brand-silver-dark);
}

.navbar-tools .nav-link {
    font-size: .85rem;
}

.token-pill {
    border: 1px solid #2a2c30;
    border-radius: 999px;
    padding: .3rem .8rem !important;
    color: var(--brand-silver) !important;
    margin-right: .25rem;
}

/* "waiting for me" count next to a menu entry (Evidence verification 3) */
.menu-count {
    display: inline-block;
    min-width: 1.35rem;
    margin-left: .4rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: var(--brand-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    vertical-align: .1em;
}

.notification-badge {
    position: absolute;
    top: .35rem;
    right: .25rem;
    background: var(--level-1);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .1rem .35rem;
    line-height: 1.2;
}

.user-menu-toggle {
    display: flex !important;
    align-items: center;
    gap: .6rem;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e9ebee, #8c9198);
    color: #000;
    font-size: .72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .04em;
}

.user-menu-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.user-menu-name {
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
}

.user-menu-organization {
    color: var(--brand-silver-dark);
    font-size: .68rem;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------
   CIRC banner
   --------------------------------------------------------------- */

.circ-banner {
    background: linear-gradient(90deg, #1b0d0e, #120b0b 60%, #0d0d0e);
    border-bottom: 1px solid #3a1416;
    color: #f2c9cb;
    font-size: .78rem;
    padding: .45rem 0;
}

.circ-banner .fa-tower-broadcast {
    color: var(--level-1);
}

.circ-contact {
    color: #fff;
    font-weight: 600;
}

.circ-contact:hover {
    color: #fff;
    text-decoration: underline;
}

.circ-separator {
    color: #6d3a3d;
}

/* ---------------------------------------------------------------
   Messages
   --------------------------------------------------------------- */

#messages {
    z-index: 2000;
    margin-top: 76px;
    width: min(560px, 92vw);
}

#messages .alert {
    box-shadow: var(--shadow-strong);
    border-radius: var(--radius);
    border: 0;
    font-size: .88rem;
}

.alert {
    border-radius: var(--radius);
    font-size: .875rem;
}

/* ---------------------------------------------------------------
   Layout
   --------------------------------------------------------------- */

.page-main {
    flex: 1 0 auto;
}

.page-container {
    padding: 2rem 1rem 3rem;
}

@media (min-width: 992px) {
    .page-container {
        padding: 2.25rem 2.25rem 3.5rem;
    }
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--divider);
}

.page-header h1 {
    font-size: 2.35rem;
    margin: 0;
    line-height: 1.05;
}

.page-header .page-subtitle {
    color: var(--text-muted);
    margin: .4rem 0 0;
    max-width: 760px;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.content-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.4rem;
    margin-bottom: 1.5rem;
}

.content-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.content-card-title {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0;
}

/* KPI tiles */
.kpi-tile {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.kpi-tile::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--kpi-color, var(--brand-silver-dark));
}

.kpi-label {
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.kpi-value {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.05;
    margin-top: .35rem;
}

.kpi-delta {
    font-size: .78rem;
    font-weight: 600;
}

.kpi-delta.up {
    color: var(--level-4);
}

.kpi-delta.down {
    color: var(--level-1);
}

/* level badges */
.level-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .2rem .55rem;
    border-radius: 999px;
    color: #fff;
    background: var(--brand-silver-dark);
}

.level-badge.level-1 { background: var(--level-1); }
.level-badge.level-2 { background: var(--level-2); }
.level-badge.level-3 { background: var(--level-3); color: #1a1a1a; }
.level-badge.level-4 { background: var(--level-4); }
.level-badge.level-5 { background: var(--level-5); }

.status-pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: var(--page-bg);
    color: var(--text-main);
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   Forms
   --------------------------------------------------------------- */

.form-control, .form-select {
    border-radius: var(--radius);
    border-color: #d4d7db;
    font-size: .9rem;
}

[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select {
    border-color: #33363b;
    background-color: #111214;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 .2rem var(--brand-accent-soft);
}

.form-floating > label {
    color: var(--text-muted);
}

.form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .02em;
}

.code-input {
    font-size: 1.6rem !important;
    letter-spacing: .5em;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   Offcanvas (login / register / forgot)
   --------------------------------------------------------------- */

.brand-offcanvas {
    width: 420px !important;
    border-left: 0 !important;
}

.brand-offcanvas.offcanvas-wide {
    width: 560px !important;
}

.brand-offcanvas .offcanvas-header {
    background: var(--brand-black);
    color: #fff;
    padding: 1.4rem 1.6rem;
}

.brand-offcanvas .offcanvas-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 500;
}

.brand-offcanvas .offcanvas-body {
    padding: 1.6rem;
}

.offcanvas-lead {
    color: var(--text-muted);
    font-size: .88rem;
    margin-bottom: 1.25rem;
}

.mfa-icon {
    font-size: 2.2rem;
    color: var(--brand-accent);
    margin-bottom: .75rem;
}

/* ---------------------------------------------------------------
   Landing page
   --------------------------------------------------------------- */

.hero {
    position: relative;
    background: radial-gradient(1200px 520px at 75% 10%, rgba(200,204,209,.16), transparent 60%),
                radial-gradient(800px 400px at 10% 90%, rgba(0,120,214,.16), transparent 60%),
                linear-gradient(180deg, #000 0%, #0a0a0b 100%);
    color: #fff;
    overflow: hidden;
    padding: 6.5rem 0 5rem;
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .35;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero .eyebrow {
    color: var(--brand-silver);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.6rem, 5.2vw, 4.6rem);
    line-height: 1.02;
    margin: 1rem 0 1.4rem;
    background: linear-gradient(180deg, #ffffff 0%, #c8ccd1 70%, #8c9198 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-text {
    font-size: 1.08rem;
    color: rgba(255,255,255,.72);
    max-width: 620px;
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2.2rem;
}

.hero-actions .btn {
    padding: .8rem 1.6rem;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 4.5rem;
    padding-top: 2rem;
}

.hero-stat-value {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    color: #fff;
}

.hero-stat-label {
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand-silver-dark);
    margin-top: .5rem;
}

@media (max-width: 767px) {
    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.hero-visual {
    position: relative;
    z-index: 1;
}

.maturity-ring-card {
    background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    padding: 1.6rem;
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-strong);
}

.section {
    padding: 5rem 0;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 500;
    margin-bottom: 2.5rem;
}

.feature-card {
    border-top: 1px solid var(--text-main);
    padding-top: 1.4rem;
    height: 100%;
}

.feature-number {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text-muted);
}

.feature-card h3 {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 500;
    margin: .4rem 0 .8rem;
}

.feature-card p {
    color: var(--text-muted);
    line-height: 1.65;
}

.section-dark {
    background: var(--brand-black);
    color: #fff;
}

.section-dark .section-title {
    color: #fff;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    counter-reset: step;
}

.process-step {
    position: relative;
    padding: 0 1.25rem 0 0;
}

.process-step::before {
    counter-increment: step;
    content: "0" counter(step);
    display: block;
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: var(--brand-silver-dark);
    line-height: 1;
    margin-bottom: 1rem;
}

.process-step::after {
    content: "";
    position: absolute;
    top: 1.3rem;
    left: 4.2rem;
    right: 1.25rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0));
}

.process-step:last-child::after {
    display: none;
}

.process-step h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.process-step p {
    color: rgba(255,255,255,.6);
    font-size: .87rem;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .process-steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .process-step::after {
        display: none;
    }
}

.framework-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.framework-badge {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 999px;
    padding: .55rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
}

/* industry pages (industries/{slug}) and their cards on the landing page */
.section-muted {
    background: var(--card-bg);
    border-top: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
}

.industry-card {
    display: block;
    height: 100%;
    padding: 2rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--page-bg);
    color: var(--text-main);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.industry-card:hover {
    border-color: var(--brand-accent);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
    color: var(--text-main);
}

.industry-card-icon {
    font-size: 1.8rem;
    color: var(--brand-accent);
}

.industry-card h3 {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 500;
    margin: 1rem 0 .6rem;
}

.industry-card p {
    color: var(--text-muted);
    line-height: 1.65;
}

.industry-card-link {
    font-weight: 600;
    font-size: .88rem;
    color: var(--brand-accent);
}

.industry-hero {
    padding: 4.5rem 0 4rem;
}

.industry-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    font-size: .8rem;
    color: var(--brand-silver-dark);
}

.industry-breadcrumb li + li::before {
    content: "/";
    margin-right: .5rem;
}

.industry-breadcrumb a {
    color: var(--brand-silver);
}

.industry-body h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 500;
    margin-bottom: 1.2rem;
}

.industry-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 2rem;
}

.industry-aside .framework-badge {
    font-size: .76rem;
    padding: .4rem .85rem;
}

.industry-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--divider);
    color: var(--text-main);
    font-weight: 600;
    font-size: .9rem;
}

.industry-link:last-child {
    border-bottom: 0;
}

.industry-link span {
    flex: 1;
}

.industry-link:hover {
    color: var(--brand-accent);
}

.industry-cta-text {
    color: rgba(255,255,255,.7);
    max-width: 640px;
    line-height: 1.65;
    margin: 0;
}

/* ---------------------------------------------------------------
   Tables / DataTables
   --------------------------------------------------------------- */

.table {
    font-size: .86rem;
    --bs-table-bg: transparent;
}

.table thead th {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border-radius: var(--radius);
}

.page-item.active .page-link {
    background-color: var(--brand-black);
    border-color: var(--brand-black);
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--brand-silver);
    border-color: var(--brand-silver);
    color: #000;
}

.page-link {
    color: var(--text-main);
}

/* ---------------------------------------------------------------
   Modals
   --------------------------------------------------------------- */

.modal-content {
    border-radius: var(--radius);
    border: 0;
    box-shadow: var(--shadow-strong);
}

.modal-header {
    border-bottom: 1px solid var(--divider);
}

.modal-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
}

/* ---------------------------------------------------------------
   Status pages
   --------------------------------------------------------------- */

.status-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem;
}

.status-page-icon {
    font-size: 3rem;
    color: var(--brand-silver-dark);
    margin-bottom: 1.25rem;
}

.status-page h1 {
    font-size: 2.6rem;
}

.auth-card {
    max-width: 480px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.site-footer {
    background: var(--brand-black);
    color: rgba(255,255,255,.7);
    font-size: .78rem;
    padding: 1.4rem 0;
    margin-top: auto;
}

.footer-brand span:first-child {
    font-family: var(--font-display);
    font-size: 1rem;
    color: #fff;
    margin-right: .75rem;
}

.footer-muted {
    color: var(--brand-silver-dark);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.footer-links a {
    color: rgba(255,255,255,.78);
}

.footer-links a:hover {
    color: #fff;
}

/* ---------------------------------------------------------------
   Utility
   --------------------------------------------------------------- */

.ai-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7b3fe4;
    background: rgba(123,63,228,.1);
    border-radius: 999px;
    padding: .2rem .6rem;
}

.confidential-mark {
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--level-1);
    font-weight: 700;
}

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

.empty-state .fa-solid {
    font-size: 2rem;
    margin-bottom: .75rem;
    color: var(--brand-silver-dark);
}

.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
}

.spinner-overlay.show {
    display: flex;
}

/* ---------------------------------------------------------------
   Print
   --------------------------------------------------------------- */

@media print {
    .brand-navbar, .circ-banner, .site-footer, .page-actions, #messages, .no-print {
        display: none !important;
    }

    body, .page-main {
        background: #fff !important;
        color: #000 !important;
    }

    .content-card {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* quick links (home) */
.quick-link {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    color: var(--text-main);
    font-weight: 600;
    transition: all var(--transition);
}

.quick-link .fa-solid:first-child {
    font-size: 1.15rem;
    color: var(--brand-silver-dark);
    width: 24px;
    text-align: center;
}

.quick-link-arrow {
    margin-left: auto;
    color: var(--brand-silver-dark);
    transition: transform var(--transition);
}

.quick-link:hover {
    color: var(--text-main);
    border-color: var(--brand-silver-dark);
    box-shadow: var(--shadow-soft);
}

.quick-link:hover .quick-link-arrow {
    transform: translateX(4px);
    color: var(--brand-accent);
}

/* CMS / legal content */
.cms-content h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1.5rem;
}

.cms-content p, .cms-content li {
    line-height: 1.7;
    color: var(--text-main);
}

/* the display serif uses old-style figures by default; numbers must read clearly */
h1, h2, .display-title, .hero-title, .hero-stat-value, .feature-number, .process-step::before, .kpi-value, .section-title, .import-chip b, .group-card-title,
.modal-title, .designer-section-title {
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

/* ---------------------------------------------------------------
   Admin components
   --------------------------------------------------------------- */

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.filter-tab {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-main);
    border-radius: 999px;
    padding: .4rem .95rem;
    font-size: .8rem;
    font-weight: 600;
    transition: all var(--transition);
}

.filter-tab:hover {
    border-color: var(--brand-silver-dark);
}

.filter-tab.active {
    background: var(--brand-black);
    border-color: var(--brand-black);
    color: #fff;
}

[data-bs-theme="dark"] .filter-tab.active {
    background: var(--brand-silver-light);
    border-color: var(--brand-silver-light);
    color: #000;
}

.filter-count {
    font-weight: 500;
    opacity: .7;
    margin-left: .2rem;
}

.filter-count.highlight:not(:empty) {
    background: var(--level-2);
    color: #fff;
    opacity: 1;
    border-radius: 999px;
    padding: 0 .45rem;
}

.status-pill.status-active { background: rgba(62,155,79,.12); border-color: rgba(62,155,79,.35); color: #2b7a3a; }
.status-pill.status-inactive { background: rgba(140,145,152,.12); color: var(--text-muted); }
.status-pill.status-deleted { background: rgba(229,72,77,.1); border-color: rgba(229,72,77,.35); color: #c62f34; }
.status-pill.status-pending { background: rgba(247,107,21,.1); border-color: rgba(247,107,21,.4); color: #c4520c; }

[data-bs-theme="dark"] .status-pill.status-active { color: #6fd283; }
[data-bs-theme="dark"] .status-pill.status-deleted { color: #ff8b8f; }
[data-bs-theme="dark"] .status-pill.status-pending { color: #ffa064; }

.small-avatar {
    width: 30px;
    height: 30px;
    font-size: .66rem;
    flex: 0 0 30px;
}

.group-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .35rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: .75rem 1rem;
}

.request-summary {
    border-left: 3px solid var(--level-2);
    background: var(--page-bg);
    padding: .85rem 1rem;
    border-radius: var(--radius);
}

.translation-code {
    min-width: 42px;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* group cards */
.group-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.group-card:hover {
    border-color: var(--brand-silver-dark);
    box-shadow: var(--shadow-soft);
}

.group-card-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    margin: .15rem 0 0;
}

.group-card-stats {
    display: flex;
    gap: 1.25rem;
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: auto;
    padding-bottom: .9rem;
}

.group-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    border-top: 1px solid var(--divider);
    padding-top: .9rem;
}

/* search results dropdown */
.search-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-strong);
    max-height: 320px;
    overflow-y: auto;
}

.search-result {
    display: block;
    padding: .6rem .9rem;
    color: var(--text-main);
    border-bottom: 1px solid var(--divider);
    font-size: .85rem;
}

.search-result span {
    display: block;
    font-size: .76rem;
    color: var(--text-muted);
}

a.search-result:hover {
    background: var(--page-bg);
    color: var(--text-main);
}

/* authorization page */
.subject-panel .nav-tabs .nav-link {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.subject-panel .nav-tabs .nav-link.active {
    color: var(--text-main);
}

.subject-list {
    max-height: 62vh;
    overflow-y: auto;
    margin: 0 -.5rem;
}

.subject-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .6rem;
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: .85rem;
    border: 1px solid transparent;
}

.subject-item:hover {
    background: var(--page-bg);
    color: var(--text-main);
}

.subject-item.active {
    background: var(--brand-black);
    color: #fff;
}

.subject-item.active .text-muted-brand {
    color: var(--brand-silver) !important;
}

[data-bs-theme="dark"] .subject-item.active {
    background: var(--brand-silver-light);
    color: #000;
}

.subject-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex: 0 0 30px;
}

.rule-count {
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .1rem .5rem;
    background: var(--page-bg);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
}

.rules-explained {
    padding-left: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.rules-explained li {
    margin-bottom: .4rem;
}

.matrix-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.matrix-subject {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 500;
    margin: .1rem 0 0;
}

.matrix-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    color: var(--text-muted);
}

.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: .4rem;
    vertical-align: -1px;
}

.legend-swatch.allow { background: rgba(62,155,79,.35); border: 1px solid #3e9b4f; }
.legend-swatch.deny { background: rgba(229,72,77,.3); border: 1px solid #e5484d; }
.legend-swatch.inherited { background: transparent; border: 1px dashed var(--brand-silver-dark); }

.matrix-wrapper {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

.permission-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card-bg);
    text-align: center;
    padding: .7rem .5rem;
}

.permission-matrix td {
    padding: .45rem .35rem;
    text-align: center;
    min-width: 112px;
}

.permission-matrix .function-column {
    text-align: left;
    min-width: 200px;
    position: sticky;
    left: 0;
    background: var(--card-bg);
    z-index: 1;
}

.permission-matrix thead .function-column {
    z-index: 3;
}

.permission-matrix .valid-column {
    min-width: 140px;
}

.function-key {
    font-family: Consolas, monospace;
    font-size: .68rem;
    color: var(--text-muted);
}

.module-row td {
    background: var(--page-bg) !important;
    text-align: left !important;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    padding: .55rem .75rem !important;
}

.cell-na {
    color: var(--card-border);
}

.perm-cell {
    font-size: .76rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
}

.perm-cell.cell-allow {
    background-color: rgba(62,155,79,.12);
    border-color: rgba(62,155,79,.5);
    font-weight: 600;
}

.perm-cell.cell-deny {
    background-color: rgba(229,72,77,.1);
    border-color: rgba(229,72,77,.5);
    font-weight: 600;
}

.perm-cell.cell-empty {
    color: var(--text-muted);
}

.perm-cell.is-expired {
    text-decoration: line-through;
    opacity: .6;
}

.inherited-hint {
    font-size: .66rem;
    color: var(--text-muted);
    margin-top: .2rem;
    white-space: nowrap;
}

.inherited-hint span {
    opacity: .75;
}

.effective-badge {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .2rem .65rem;
    cursor: help;
}

.effective-badge.allow { background: rgba(62,155,79,.14); color: #2b7a3a; }
.effective-badge.deny { background: rgba(229,72,77,.12); color: #c62f34; }
.effective-badge.none { color: var(--text-muted); }

[data-bs-theme="dark"] .effective-badge.allow { color: #6fd283; }
[data-bs-theme="dark"] .effective-badge.deny { color: #ff8b8f; }

[data-bs-theme="dark"] .subject-item.active .text-muted-brand {
    color: #4a4d52 !important;
}

.subject-panel .nav-tabs {
    flex-wrap: nowrap;
}

.subject-panel .nav-tabs .nav-link {
    padding: .45rem .35rem;
    white-space: nowrap;
}

.row-valid-until {
    font-size: .74rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------
   Master data (organizations, service areas, countries, regions, import)
   --------------------------------------------------------------- */

.page-tabs {
    border-bottom: 1px solid var(--divider);
    gap: .25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.page-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
    padding: .65rem .9rem;
    white-space: nowrap;
    background: none;
}

.page-tabs .nav-link:hover {
    color: var(--text-main);
}

.page-tabs .nav-link.active {
    color: var(--text-main);
    border-bottom-color: var(--text-main);
}

.filter-select {
    width: auto;
    min-width: 170px;
    max-width: 260px;
}

.status-pill.status-closed {
    background: rgba(23,24,26,.06);
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(140,145,152,.6);
}

.country-code {
    display: inline-block;
    min-width: 26px;
    padding: .05rem .3rem;
    border: 1px solid var(--card-border);
    border-radius: 3px;
    font-family: Consolas, monospace;
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-muted);
    background: var(--page-bg);
}

.country-code.more {
    border-style: dashed;
}

.eu-badge {
    background: #003399;
    color: #ffcc00;
    font-size: .62rem;
    vertical-align: 1px;
}

.service-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: .2rem;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    font-size: .72rem;
    color: var(--text-main);
}

.service-icon .ev-mark {
    position: absolute;
    right: -4px;
    bottom: -3px;
    font-size: .58rem;
    color: var(--level-4);
}

.setting-box {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--page-bg);
    padding: .9rem 1rem;
}

.service-tree .service-node {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: .55rem .8rem;
    margin-bottom: .5rem;
}

.service-tree .service-parent label {
    font-weight: 600;
}

.service-tree .service-child {
    margin-left: 1.6rem;
    margin-top: .25rem;
    font-size: .86rem;
}

.checklist-box {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: .6rem .8rem;
    max-height: 330px;
    overflow-y: auto;
}

.timeline {
    list-style: none;
    padding: 0 0 0 1.1rem;
    margin: 0;
    border-left: 2px solid var(--divider);
}

.timeline li {
    position: relative;
    padding: 0 0 1rem .6rem;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: -1.48rem;
    top: .3rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--brand-silver-dark);
}

.timeline-title {
    font-weight: 600;
    font-size: .88rem;
}

.usage-bar {
    height: 6px;
    background: var(--page-bg);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: .2rem;
    max-width: 180px;
}

.usage-bar span {
    display: block;
    height: 100%;
    background: var(--brand-accent);
}

.info-note {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    border-left: 3px solid var(--brand-accent);
    background: var(--brand-accent-soft);
    padding: .7rem 1rem;
    border-radius: var(--radius);
    font-size: .85rem;
}

.info-note i {
    color: var(--brand-accent);
    margin-top: .15rem;
}

/* service areas */
.service-card.is-inactive,
.sub-area.is-inactive {
    opacity: .55;
}

.service-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-black);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;     /* stays round next to long titles in a flex row (e.g. the form cards on phones) */
}

[data-bs-theme="dark"] .service-card-icon {
    background: var(--brand-silver-light);
    color: #000;
}

.sub-area-list {
    border-top: 1px solid var(--divider);
    padding-top: .75rem;
}

.sub-area {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem 0;
}

.sub-area > i {
    width: 22px;
    text-align: center;
    color: var(--text-muted);
}

.icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: .35rem;
}

.icon-option {
    height: 42px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text-main);
}

.icon-option:hover {
    border-color: var(--brand-silver-dark);
}

.icon-option.active {
    background: var(--brand-black);
    border-color: var(--brand-black);
    color: #fff;
}

[data-bs-theme="dark"] .icon-option.active {
    background: var(--brand-silver-light);
    color: #000;
}

/* regions */
.region-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.selected-countries {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    min-height: 32px;
    max-height: 110px;
    overflow-y: auto;
    padding: .4rem;
    border: 1px dashed var(--card-border);
    border-radius: var(--radius);
}

.country-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .2rem .1rem .45rem;
    border-radius: 3px;
    background: var(--brand-black);
    color: #fff;
    font-family: Consolas, monospace;
    font-size: .72rem;
    font-weight: 700;
}

.country-chip a {
    color: #fff;
    text-decoration: none;
    padding: 0 .25rem;
    opacity: .7;
}

.country-chip a:hover {
    opacity: 1;
}

[data-bs-theme="dark"] .country-chip,
[data-bs-theme="dark"] .country-chip a {
    background: var(--brand-silver-light);
    color: #000;
}

.country-picker {
    max-height: 52vh;
    overflow-y: auto;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: .25rem .9rem .75rem;
}

.country-group-title {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    padding: .6rem 0 .35rem;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 1px solid var(--divider);
    margin-bottom: .4rem;
}

.country-group-title a {
    letter-spacing: normal;
    text-transform: none;
}

.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .1rem 1rem;
    font-size: .85rem;
}

/* import */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: .55rem;
    border-radius: 50%;
    background: var(--brand-black);
    color: #fff;
    font-size: .7rem;
    letter-spacing: 0;
}

[data-bs-theme="dark"] .step-number {
    background: var(--brand-silver-light);
    color: #000;
}

.import-type-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    margin-bottom: .5rem;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.import-type-card input {
    display: none;
}

.import-type-card > i {
    font-size: 1.2rem;
    width: 28px;
    text-align: center;
    color: var(--text-muted);
}

.import-type-card span b,
.import-type-card span small {
    display: block;
}

.import-type-card span small {
    color: var(--text-muted);
    font-size: .76rem;
}

.import-type-card.active {
    border-color: var(--text-main);
    background: var(--page-bg);
}

.import-type-card.active > i {
    color: var(--text-main);
}

.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2.2rem 1rem;
    border: 2px dashed var(--card-border);
    border-radius: var(--radius);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.drop-zone > i {
    font-size: 2rem;
    color: var(--brand-silver-dark);
}

.drop-zone small {
    color: var(--text-muted);
}

.drop-zone:hover,
.drop-zone.is-dragging {
    border-color: var(--brand-accent);
    background: var(--brand-accent-soft);
}

.drop-zone.has-file {
    border-style: solid;
    border-color: var(--level-4);
}

.drop-zone.has-file > i {
    color: var(--level-4);
}

.import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.import-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    font-size: .82rem;
    color: var(--text-muted);
}

.import-chip b {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text-main);
    line-height: 1;
}

.import-chip.outcome-created i { color: var(--level-4); }
.import-chip.outcome-updated i { color: var(--brand-accent); }
.import-chip.outcome-skipped i { color: var(--brand-silver-dark); }
.import-chip.outcome-error i { color: var(--level-1); }

.outcome-pill.outcome-created { background: rgba(62,155,79,.12); border-color: rgba(62,155,79,.35); color: #2b7a3a; }
.outcome-pill.outcome-updated { background: var(--brand-accent-soft); border-color: rgba(0,120,214,.35); color: var(--brand-accent-dark); }
.outcome-pill.outcome-error { background: rgba(229,72,77,.1); border-color: rgba(229,72,77,.35); color: #c62f34; }

[data-bs-theme="dark"] .outcome-pill.outcome-created { color: #6fd283; }
[data-bs-theme="dark"] .outcome-pill.outcome-updated { color: #6cb6ff; }
[data-bs-theme="dark"] .outcome-pill.outcome-error { color: #ff8b8f; }

/* ---------------------------------------------------------------
   Forms: list, designer, preview, question bank, form renderer
   --------------------------------------------------------------- */

.min-width-0 { min-width: 0; }

.status-pill.status-draft { background: var(--brand-accent-soft); border-color: rgba(0,120,214,.35); color: var(--brand-accent-dark); }
[data-bs-theme="dark"] .status-pill.status-draft { color: #6cb6ff; }

.eyebrow-link { color: inherit; }
.eyebrow-link:hover { color: var(--brand-accent); }

.info-note.is-warning { border-left-color: var(--level-2); background: rgba(247,107,21,.08); }
.info-note.is-warning i { color: var(--level-2); }
.info-note.is-danger { border-left-color: var(--level-1); background: rgba(229,72,77,.08); }
.info-note.is-danger i { color: var(--level-1); }

/* form list */
.form-card.is-inactive { opacity: .7; }

.form-card-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.form-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    align-items: center;
    font-size: .78rem;
    color: var(--text-muted);
}

.version-table th {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.version-number {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

.version-note { max-width: 320px; }

/* designer: sidebar */
.designer-sidebar {
    position: sticky;
    top: calc(64px + 1rem);
    max-height: calc(100vh - 64px - 2rem);
    overflow-y: auto;
}

.designer-outline { max-height: 46vh; overflow-y: auto; }

.outline-section {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    padding: .35rem .25rem;
    color: var(--text-main);
    font-size: .82rem;
    border-top: 1px solid var(--divider);
}

.outline-section:first-child { border-top: 0; }
.outline-section b { min-width: 1.3rem; }
.outline-section span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline-section small { color: var(--text-muted); }

.outline-questions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: 0 .25rem .5rem 1.8rem;
}

.outline-question {
    font-family: Consolas, monospace;
    font-size: .68rem;
    padding: .05rem .35rem;
    border-radius: 3px;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
}

.outline-question.is-critical { border-color: var(--brand-black); color: var(--text-main); font-weight: 700; }
[data-bs-theme="dark"] .outline-question.is-critical { border-color: var(--brand-silver); }
.outline-question.has-warning { border-color: var(--level-3); background: rgba(226,163,0,.12); }
.outline-question.has-error { border-color: var(--level-1); background: rgba(229,72,77,.12); color: #c62f34; }

.filter-tabs-small .filter-tab { padding: .2rem .65rem; font-size: .72rem; }

.issue-count {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    font-size: .78rem;
    font-weight: 700;
    margin-left: .6rem;
}

.issue-count.is-error i { color: var(--level-1); }
.issue-count.is-warning i { color: var(--level-3); }

.issue-list { max-height: 38vh; overflow-y: auto; }

.issue-item {
    display: flex;
    gap: .5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-top: 1px solid var(--divider);
    padding: .45rem .1rem;
    font-size: .78rem;
    color: var(--text-main);
}

.issue-item:hover { background: var(--page-bg); }
.issue-item i { margin-top: .15rem; }
.issue-item.is-error i { color: var(--level-1); }
.issue-item.is-warning i { color: var(--level-3); }

/* designer: sections and questions */
.designer-section-header {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}

.designer-section-title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 500;
    margin: 0 0 .25rem;
}

.designer-section-description {
    font-size: .85rem;
    color: var(--text-muted);
    margin: .6rem 0 0 3.1rem;
}

.designer-questions { margin-top: 1rem; }

.designer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .3rem;
}

.designer-chip {
    font-size: .7rem;
    padding: .1rem .45rem;
    border-radius: 3px;
    background: var(--page-bg);
    border: 1px solid var(--card-border);
    color: var(--text-main);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.designer-chip.is-muted { color: var(--text-muted); }
.designer-chip.is-critical { background: var(--brand-black); border-color: var(--brand-black); color: #fff; font-weight: 600; }
[data-bs-theme="dark"] .designer-chip.is-critical { background: var(--brand-silver-light); border-color: var(--brand-silver-light); color: #000; }
.designer-chip.is-logic { border-color: rgba(0,120,214,.35); color: var(--brand-accent-dark); }
[data-bs-theme="dark"] .designer-chip.is-logic { color: #6cb6ff; }

.designer-question {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .7rem .6rem;
    border-top: 1px solid var(--divider);
    cursor: pointer;
    transition: background var(--transition);
    border-left: 3px solid transparent;
}

.designer-question:hover { background: var(--page-bg); }
.designer-question.has-warning { border-left-color: var(--level-3); }
.designer-question.has-error { border-left-color: var(--level-1); }
.designer-question.is-flashing, .designer-section.is-flashing { animation: designer-flash 1.6s ease-out; }

@keyframes designer-flash {
    0% { background: var(--brand-accent-soft); }
    100% { background: transparent; }
}

.designer-code {
    font-family: Consolas, monospace;
    font-size: .75rem;
    font-weight: 700;
    min-width: 2.6rem;
    padding-top: .1rem;
}

.designer-type-icon {
    color: var(--brand-silver-dark);
    width: 1.1rem;
    text-align: center;
    padding-top: .2rem;
}

.designer-question-title { font-size: .9rem; line-height: 1.35; }
.designer-question-issues { font-size: .74rem; margin-top: .3rem; }
.designer-question-actions { opacity: .55; }
.designer-question:hover .designer-question-actions { opacity: 1; }

.designer-section-footer {
    display: flex;
    gap: .5rem;
    border-top: 1px solid var(--divider);
    padding-top: .8rem;
}

.rule-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .6rem 0;
    border-top: 1px solid var(--divider);
}

.rule-item:first-child { border-top: 0; }

/* designer: editors */
.language-switch { display: inline-flex; gap: .25rem; }

.language-switch-button {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    border-radius: 3px;
    padding: .15rem .5rem;
    position: relative;
}

.language-switch-button.has-text::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--level-4);
}

.language-switch-button.active { background: var(--brand-black); border-color: var(--brand-black); color: #fff; }
[data-bs-theme="dark"] .language-switch-button.active { background: var(--brand-silver-light); border-color: var(--brand-silver-light); color: #000; }

.option-table th {
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.option-table .option-code { width: 6.5rem; }
.option-table .option-score { width: 5.5rem; }
.option-table .option-evidence { min-width: 8rem; }
.option-table .option-logic, .option-table .option-target { min-width: 10rem; }
.option-details > td { background: var(--page-bg) !important; }
.toggle-option-details.active { color: var(--brand-accent); }

.inline-translations { margin-top: .25rem; }

.nested-item {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: .5rem;
    margin-bottom: .5rem;
}

.nested-item .nested-code, .nested-item .nested-score { max-width: 6.5rem; }

.band-row, .framework-row, .condition-row {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-bottom: .5rem;
}

.band-row span { padding-top: .25rem; color: var(--text-muted); }
.framework-row .framework-id { max-width: 55%; }
.condition-row .condition-question { max-width: 42%; }
.condition-row .condition-operator { max-width: 12rem; }
.condition-row .condition-value { flex: 1; }

.condition-options { display: flex; flex-wrap: wrap; gap: .3rem .8rem; }

.condition-option {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    font-size: .78rem;
    margin-right: .6rem;
}

.file-type-list { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

.file-type-option {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    font-family: Consolas, monospace;
    font-size: .8rem;
}

.bank-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .65rem 0;
    border-top: 1px solid var(--divider);
}

.bank-item:first-child { border-top: 0; }

/* preview */
.section-nav {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

.section-nav-item {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    white-space: nowrap;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .78rem;
    color: var(--text-main);
}

.section-nav-item span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.section-nav-item:hover { border-color: var(--brand-silver-dark); color: var(--text-main); }

.preview-panel { position: sticky; top: calc(64px + 1rem); }

/* side by side with a long form: a panel taller than the screen would stay stuck until the form ends, so it scrolls on its own */
@media (min-width: 1200px) {
    .preview-panel {
        max-height: calc(100vh - 64px - 2rem);
        overflow-y: auto;
        scrollbar-width: thin;
        padding: 0 .35rem 0 0;
    }
    .preview-panel > .content-card:last-child { margin-bottom: 0; }
}
.preview-services { max-height: 230px; overflow-y: auto; }
.preview-service-group { font-size: .78rem; font-weight: 600; margin-top: .35rem; }
.progress-thin { height: 5px; }
.progress-thin .progress-bar { background: var(--brand-accent); }

.score-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.score-value {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1.05;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

.score-value-muted { color: var(--text-muted); }

.preview-block-title {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    margin: 1.2rem 0 .5rem;
}

.section-score-row {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) 80px 2.6rem;
    gap: .5rem;
    align-items: center;
    font-size: .8rem;
    margin-bottom: .3rem;
}

.section-score-code { font-weight: 700; }
.section-score-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.section-score-bar {
    height: 6px;
    background: var(--page-bg);
    border-radius: 3px;
    overflow: hidden;
}

.section-score-bar span { display: block; height: 100%; background: var(--brand-silver-dark); }
.section-score-bar .level-fill-1 { background: var(--level-1); }
.section-score-bar .level-fill-2 { background: var(--level-2); }
.section-score-bar .level-fill-3 { background: var(--level-3); }
.section-score-bar .level-fill-4 { background: var(--level-4); }
.section-score-bar .level-fill-5 { background: var(--level-5); }
.section-score-value { text-align: right; font-variant-numeric: tabular-nums; }

.critical-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .8rem;
    padding: .25rem 0;
    color: var(--text-main);
}

.critical-row span:not(.ms-auto) { font-family: Consolas, monospace; font-size: .72rem; color: var(--text-muted); }

/* form renderer */
.fr-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.4rem;
    margin-bottom: 1.5rem;
    scroll-margin-top: calc(64px + 1rem);
}

.fr-section-header {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin-bottom: .5rem;
}

.fr-section-code {
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 2.2rem;
    border-radius: 50%;
    background: var(--brand-black);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
}

[data-bs-theme="dark"] .fr-section-code { background: var(--brand-silver-light); color: #000; }

.fr-section-title { font-size: 1.6rem; margin: 0; }
.fr-section-progress { font-size: .78rem; color: var(--text-muted); white-space: nowrap; padding-top: .4rem; }
.fr-section-progress .is-complete { color: var(--level-4); font-weight: 700; }
.fr-section-description { font-size: .88rem; color: var(--text-muted); margin-left: 3.1rem; }
.fr-section-hidden-note { font-size: .8rem; color: var(--text-muted); margin-left: 3.1rem; }

.fr-question {
    border-top: 1px solid var(--divider);
    padding: 1.1rem 0 .9rem;
    scroll-margin-top: calc(64px + 1rem);
}

.fr-question.is-skipped, .fr-question.is-hidden { opacity: .45; }
.fr-question.is-not-applicable .fr-input { opacity: .5; }

.fr-question-head {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.fr-code {
    font-family: Consolas, monospace;
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 2.4rem;
    padding-top: .15rem;
}

.fr-title { flex: 1; font-weight: 600; line-height: 1.4; }
.fr-required { color: var(--level-1); margin-left: .2rem; }

.fr-badges, .fr-design-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: .4rem 0 0 3.15rem;
}

.fr-design-chips { margin-left: 0; }

.fr-chip {
    display: inline-block;
    font-size: .68rem;
    padding: .05rem .4rem;
    border-radius: 3px;
    border: 1px solid var(--card-border);
    background: var(--page-bg);
    color: var(--text-muted);
    white-space: nowrap;
}

.fr-score-chip { color: var(--level-4); border-color: rgba(62,155,79,.35); }
.fr-logic-chip { color: var(--brand-accent-dark); border-color: rgba(0,120,214,.35); }
[data-bs-theme="dark"] .fr-logic-chip { color: #6cb6ff; }

.fr-critical {
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 3px;
    background: var(--brand-black);
    color: #fff;
}

[data-bs-theme="dark"] .fr-critical { background: var(--brand-silver-light); color: #000; }

.fr-help { margin: .5rem 0 0 3.15rem; font-size: .84rem; }
.fr-help summary { color: var(--brand-accent); cursor: pointer; font-size: .8rem; }
.fr-help > div { padding: .5rem .8rem; border-left: 2px solid var(--divider); margin-top: .4rem; }

.fr-input, .fr-companions, .fr-na, .fr-evidence, .fr-skip-note { margin-left: 3.15rem; }
.fr-input { margin-top: .7rem; }
.fr-companions { margin-top: .5rem; }
.fr-na { margin-top: .5rem; font-size: .85rem; }

.fr-options { display: grid; gap: .4rem; }
.fr-options-inline { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.fr-option {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: .55rem .75rem;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.fr-option:hover { border-color: var(--brand-silver-dark); }
.fr-option:has(.fr-option-input:checked) { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.fr-option .fr-option-input { margin-top: .2rem; flex: 0 0 auto; }

.fr-level {
    flex: 0 0 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
}

.fr-option:has(.fr-option-input:checked) .fr-level { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.fr-option-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.fr-option-label { font-size: .88rem; }
.fr-option-description { font-size: .76rem; color: var(--text-muted); }
.fr-option-info { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }

.fr-number { max-width: 260px; }
.fr-date { max-width: 220px; }

.fr-file-placeholder {
    border: 1px dashed var(--card-border);
    border-radius: var(--radius);
    padding: .9rem;
    color: var(--text-muted);
    font-size: .85rem;
}

.fr-matrix th, .fr-group th { font-size: .78rem; font-weight: 600; }
.fr-matrix tbody th { font-weight: 500; }

.fr-evidence-box {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-top: .6rem;
    padding: .55rem .8rem;
    border-radius: var(--radius);
    font-size: .82rem;
    border: 1px solid var(--card-border);
}

.fr-evidence-box.is-required { border-color: rgba(247,107,21,.45); background: rgba(247,107,21,.07); }
.fr-evidence-box.is-required i { color: var(--level-2); }
.fr-evidence-box.is-optional i { color: var(--brand-silver-dark); }
/* files of an earlier answer that no longer needs evidence */
.fr-evidence-box.is-none { border-style: dashed; }
.fr-evidence-box.is-none i { color: var(--brand-silver-dark); }
.fr-evidence-box i { margin-top: .15rem; }

.fr-skip-note { font-size: .78rem; color: var(--brand-accent); margin-top: .4rem; }
.fr-skip-note:empty { display: none; }

@media (max-width: 767px) {
    .fr-input, .fr-companions, .fr-na, .fr-evidence, .fr-skip-note, .fr-help, .fr-badges, .fr-section-description, .fr-section-hidden-note { margin-left: 0; }
    .condition-row { flex-wrap: wrap; }
    .condition-row .condition-question, .condition-row .condition-operator { max-width: none; }
}


/* =========================================================
   Assessments: campaigns, filling, review, progress, targets, notifications
   ========================================================= */

.status-pill.status-review { background: rgba(107,79,216,.09); border-color: rgba(107,79,216,.35); color: #5a3fc4; }
[data-bs-theme="dark"] .status-pill.status-review { color: #b4a2ff; }

/* status distribution bars (campaigns, progress, deadlines) */
.status-bar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--page-bg);
    border: 1px solid var(--card-border);
}

.status-bar-part { height: 100%; }
.bar-approved { background: var(--level-4); }
.bar-inReview { background: #6b4fd8; }
.bar-submitted { background: #a08ff0; }
.bar-correctionRequested { background: var(--level-2); }
.bar-inProgress { background: var(--brand-accent); }
.bar-assigned { background: var(--brand-silver); }
.bar-overdue { background: var(--level-1); }
.bar-exempt { background: repeating-linear-gradient(45deg, var(--brand-silver-dark) 0 3px, var(--brand-silver) 3px 6px); }

.status-legend { display: inline-flex; flex-wrap: wrap; gap: .75rem; }

.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: 1px;
}

/* campaigns */
.campaign-card.is-inactive { opacity: .7; }

.target-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .6rem;
}

.target-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .76rem;
    padding: .2rem .35rem .2rem .65rem;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--page-bg);
}

.target-chip.is-static { padding-right: .65rem; }
.target-chip b { font-weight: 600; color: var(--text-muted); }

.remove-target {
    border: 0;
    background: none;
    color: var(--text-muted);
    padding: 0 .3rem;
    line-height: 1;
}

.remove-target:hover { color: var(--level-1); }

.audience-builder {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem;
    height: 100%;
}

.audience-preview {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px dashed var(--card-border);
    border-radius: var(--radius);
    background: var(--page-bg);
}

.audience-count {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    font-variant-numeric: lining-nums;
}

.audience-countries {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .6rem;
}

.audience-sample { margin-top: .75rem; }

.audience-sample-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .8rem;
    columns: 2;
    column-gap: 1.25rem;
}

.audience-sample-list li { break-inside: avoid; padding: .1rem 0; }

button.search-result {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--divider);
}

button.search-result:hover { background: var(--page-bg); }

/* my assessments */
.assessment-card { border-top: 3px solid var(--card-border); }
.assessment-card.status-inProgress { border-top-color: var(--brand-accent); }
.assessment-card.status-correctionRequested { border-top-color: var(--level-2); }
.assessment-card.status-overdue { border-top-color: var(--level-1); }
.assessment-card.status-submitted, .assessment-card.status-inReview { border-top-color: #6b4fd8; }
.assessment-card.status-approved { border-top-color: var(--level-4); }

/* fill page */
.fill-page .section-nav-item small {
    font-size: .7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.fill-page .section-nav-item.is-complete { border-color: rgba(62,155,79,.45); }
.fill-page .section-nav-item.is-complete b { color: var(--level-4); }
.fill-page .section-nav-item.is-mine { box-shadow: inset 0 -2px 0 var(--brand-accent); }

.save-status { color: var(--text-muted); min-height: 1.3rem; }

.fr-extras { margin-left: 3.15rem; }
.fr-extras:empty { display: none; }

.fr-question.is-pending-confirmation,
.fr-question.is-reopened,
.fr-question.needs-decision {
    border-left: 3px solid transparent;
    padding-left: .75rem;
    margin-left: -.9rem;
}

.fr-question.is-pending-confirmation { border-left-color: var(--level-3); }
.fr-question.is-reopened { border-left-color: var(--level-2); }
.fr-question.needs-decision { border-left-color: rgba(0,120,214,.4); }
.fr-question.is-locked-section .fr-input { opacity: .65; }
.fr-question.is-filtered-out { display: none !important; }

/* review: items still marked "correction requested" block forwarding and approval */
.fr-question.has-open-correction { border-left: 3px solid var(--level-2); padding-left: .75rem; margin-left: -.9rem; }
.fr-question.is-flashing, .evidence-item.is-flashing { animation: designer-flash 1.6s ease-out; }
.correction-hint { margin-top: .4rem; font-size: .78rem; color: var(--level-2); }
.review-blocker-list { list-style: none; padding: 0; margin: .45rem 0 0; }
.review-blocker-list li + li { margin-top: .2rem; }
.review-blocker-item {
    display: flex;
    gap: .45rem;
    align-items: baseline;
    width: 100%;
    border: 0;
    background: none;
    padding: .1rem 0;
    text-align: left;
    color: inherit;
    text-decoration: underline dotted;
}
.review-blocker-item:hover:not(:disabled) { color: var(--level-2); }
.review-blocker-item:disabled { text-decoration: none; cursor: default; }
.info-note .review-blocker-item i { margin-top: 0; color: var(--level-2); }
.review-blocker-tag { font-size: .7rem; padding: 0 .35rem; border-radius: 999px; background: rgba(247,107,21,.15); white-space: nowrap; text-decoration: none; }
.review-blocker-steps { padding-left: 1.1rem; margin: .2rem 0 0; }
.review-counter .review-counter-flagged { margin-left: .65rem; font-weight: 600; font-variant-numeric: tabular-nums; border: 0; background: none; padding: 0; text-decoration: underline dotted; }

/* fill: what still blocks submitting, with question codes that jump to the question */
.fill-jump { border: 0; background: none; padding: 0; color: inherit; font-weight: 600; text-decoration: underline dotted; }
.fill-jump:hover { color: var(--brand-accent); }
.fill-blocker-list { padding-left: 1.1rem; margin: .3rem 0; }
.fill-blocker-list li + li { margin-top: .2rem; }
.correction-hint.is-done { color: var(--level-4); }
.fr-section-locked-note { font-size: .85rem; }

/* fill: evidence upload as three numbered steps; a chosen file is "not uploaded yet" until the button is clicked */
.upload-steps { list-style: none; padding: 0; margin: 0; }
.upload-step { display: flex; gap: .65rem; padding: .55rem .6rem; border: 1px solid transparent; border-radius: var(--radius); }
.upload-step + .upload-step { margin-top: .25rem; }
.upload-step-number { flex: 0 0 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .75rem; font-weight: 700; background: var(--divider); color: var(--text-muted); }
.upload-step-body { flex: 1 1 auto; min-width: 0; }
.upload-step-title { font-size: .8rem; font-weight: 600; margin-bottom: .3rem; color: var(--text-muted); }
.upload-step.is-current { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.upload-step.is-current .upload-step-number { background: var(--brand-accent); color: #fff; }
.upload-step.is-current .upload-step-title { color: inherit; }
.upload-step.is-done .upload-step-number { background: var(--level-4); color: #fff; }
.fill-upload .drop-zone.has-file { border-style: solid; border-color: var(--level-2); background: rgba(247,107,21,.06); }
.fill-upload .drop-zone.has-file > i { color: var(--level-2); }
.upload-pending-chip { display: inline-block; font-size: .7rem; font-weight: 600; padding: 0 .4rem; border-radius: 999px; background: rgba(247,107,21,.15); color: var(--level-2); white-space: nowrap; }
.upload-pending-note { margin-top: .35rem; font-size: .78rem; color: var(--level-2); }
.upload-hint.is-ready { color: var(--level-2); font-weight: 600; }

.prefill-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    padding: .45rem .75rem;
    font-size: .8rem;
    border-radius: var(--radius);
    border: 1px solid rgba(226,163,0,.4);
    background: rgba(226,163,0,.09);
}

.prefill-bar .btn { margin-left: auto; }
.prefill-bar.is-confirmed { border-color: rgba(62,155,79,.35); background: rgba(62,155,79,.07); color: var(--text-muted); }

.review-line { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

.review-badge {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 600;
    padding: .12rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    white-space: nowrap;
}

.review-badge.review-accepted { color: #2b7a3a; border-color: rgba(62,155,79,.4); background: rgba(62,155,79,.08); }
.review-badge.review-correctionRequested { color: #c4520c; border-color: rgba(247,107,21,.4); background: rgba(247,107,21,.08); }
.review-badge.review-rejected { color: #c62f34; border-color: rgba(229,72,77,.4); background: rgba(229,72,77,.08); }
[data-bs-theme="dark"] .review-badge.review-accepted { color: #6fd283; }
[data-bs-theme="dark"] .review-badge.review-correctionRequested { color: #ffa064; }
[data-bs-theme="dark"] .review-badge.review-rejected { color: #ff8b8f; }

.fr-chip.is-warning { color: #c4520c; border-color: rgba(247,107,21,.4); background: rgba(247,107,21,.08); }

.fr-thread { margin-top: .6rem; }
.fr-thread summary { cursor: pointer; font-size: .8rem; color: var(--text-muted); }
.fr-thread[open] summary { margin-bottom: .4rem; }

.review-thread {
    border-left: 2px solid var(--divider);
    padding-left: .8rem;
}

.thread-comment { margin-bottom: .6rem; }
.thread-head { font-size: .76rem; }
.thread-time { margin-left: .5rem; color: var(--text-muted); }

.thread-text {
    font-size: .85rem;
    margin-top: .2rem;
    padding: .45rem .65rem;
    border-radius: var(--radius);
    background: var(--page-bg);
}

.thread-comment.is-reviewer .thread-text { background: var(--brand-accent-soft); }
.thread-event { font-size: .74rem; color: var(--text-muted); margin-bottom: .45rem; }

.thread-reply {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}

.thread-reply textarea { flex: 1; }

/* evidence */
.evidence-list {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
}

.evidence-item {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .5rem .65rem;
    margin-bottom: .4rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--card-bg);
}

.evidence-item.review-rejected { opacity: .65; }
.evidence-icon { font-size: 1.2rem; color: var(--brand-silver-dark); margin-top: .1rem; }
.evidence-main { flex: 1; min-width: 0; }
.evidence-name { font-weight: 600; word-break: break-all; }
.evidence-meta { font-size: .74rem; color: var(--text-muted); }
.evidence-review-comment { font-size: .78rem; margin-top: .2rem; }

.evidence-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    justify-content: flex-end;
}

.evidence-upload { margin-top: .65rem; }
.drop-zone-small { padding: .75rem 1rem; flex-direction: row; justify-content: center; font-size: .82rem; }
.drop-zone-small > i { font-size: 1.2rem; }
.drop-zone.has-file { border-style: solid; border-color: var(--brand-accent); }
.fr-evidence-box.is-missing { border-color: rgba(229,72,77,.55); }
.fr-file-area .evidence-list { margin-top: 0; }

/* side panel */
.delegation-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--divider);
    font-size: .84rem;
}

.delegation-row:last-child { border-bottom: 0; }
.delegation-row > b { width: 1.4rem; font-family: Consolas, monospace; font-size: .75rem; }

.fr-section-assignees {
    font-size: .74rem;
    color: var(--text-muted);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: .5rem;
}

.submit-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.submit-checklist li {
    display: flex;
    gap: .55rem;
    align-items: baseline;
    padding: .35rem 0;
    font-size: .88rem;
}

.submit-checklist .is-ok > i { color: var(--level-4); }
.submit-checklist .is-missing > i { color: var(--level-1); }

.assign-users .form-check {
    padding-top: .4rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--divider);
}

/* review page */
.review-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.review-panel {
    margin-top: .8rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--divider);
}

.review-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    margin-bottom: .5rem;
}

.previous-answer { font-size: .78rem; color: var(--text-muted); }
.previous-answer.is-changed { color: var(--text-main); font-weight: 600; }

.review-decision {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.review-decision .btn-group .btn.active { color: #fff; }
.trust-gap { font-size: .85rem; }

.review-counter {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .82rem;
    padding: .3rem 0;
}

.review-counter b { margin-left: .65rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.section-score-bar { position: relative; }
.section-score-bar .declared-shadow { position: absolute; left: 0; top: 0; opacity: .25; background: var(--brand-silver-dark); }
.section-score-bar span:not(.declared-shadow) { position: relative; }

/* reviews queue */
.interim-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: .75rem;
    border-radius: var(--radius);
    background: var(--page-bg);
    font-size: .85rem;
}

/* progress */
.group-table td, .group-table th { white-space: nowrap; }

/* targets and deadlines */
.section-heading {
    font-family: var(--font-display);
    font-size: 1.45rem;
    margin: .5rem 0 .9rem;
}

.deadline-card.is-inactive { opacity: .65; }
.deadline-countdown { font-weight: 700; font-size: 1.05rem; font-variant-numeric: lining-nums; }
.deadline-countdown.is-near { color: var(--level-2); }
.deadline-countdown.is-passed { color: var(--level-1); }

/* notifications */
.narrow-page { max-width: 920px; margin-left: auto; margin-right: auto; }

.notification-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--divider);
}

.notification-item:last-child { border-bottom: 0; }
.notification-item.is-unread { background: var(--brand-accent-soft); }

.notification-link {
    display: flex;
    gap: .85rem;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.notification-link:hover { color: inherit; }
.notification-icon { width: 1.4rem; margin-top: .2rem; color: var(--brand-silver-dark); text-align: center; }
.notification-title { font-weight: 600; }
.is-unread .notification-icon { color: var(--brand-accent); }

@media (max-width: 767px) {
    .fr-extras { margin-left: 0; }
    .audience-sample-list { columns: 1; }
    .interim-compare { grid-template-columns: 1fr; }
    .fr-question.is-pending-confirmation, .fr-question.is-reopened, .fr-question.needs-decision, .fr-question.has-open-correction { margin-left: 0; }
}


/* =========================================================
   Improvement: scoring models, action plan, certificates, resource library, incident log
   ========================================================= */

.card-heading {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: .75rem;
}

/* system settings: reCAPTCHA keys and the test widget */
.recaptcha-key { font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .85rem; }

.recaptcha-test {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    border: 1px dashed var(--divider);
    border-radius: var(--radius);
}

.text-warning-brand { color: #b35c00 !important; }
[data-bs-theme="dark"] .text-warning-brand { color: #ffb066 !important; }

.version-chip {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: .7rem;
    font-weight: 600;
    padding: .05rem .45rem;
    border-radius: 3px;
    background: var(--brand-steel);
    color: var(--brand-white);
    vertical-align: 2px;
}

.fr-chip.chip-critical { color: var(--level-1); border-color: rgba(229,72,77,.4); }
.chip-button { cursor: pointer; }
.chip-button:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

.result-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem .9rem;
    margin: 0;
    font-size: .85rem;
}

.result-list dt { font-weight: 500; color: var(--text-muted); }
.result-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.btn-close-sm { width: .55rem; height: .55rem; padding: .15rem; background-size: .55rem; }

/* scoring models */
.scoring-model-card.is-default { border-color: rgba(0,120,214,.45); box-shadow: inset 3px 0 0 var(--brand-accent); }

.threshold-strip {
    display: flex;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--card-border);
}

.threshold-part {
    display: flex;
    flex-direction: column;
    padding: .3rem .45rem;
    color: #fff;
    min-width: 0;
    font-size: .72rem;
    line-height: 1.2;
}

.threshold-part.level-1 { background: var(--level-1); }
.threshold-part.level-2 { background: var(--level-2); }
.threshold-part.level-3 { background: var(--level-3); }
.threshold-part.level-4 { background: var(--level-4); }
.threshold-part.level-5 { background: var(--level-5); }
.threshold-level { font-weight: 700; font-size: .85rem; }
.threshold-min { opacity: .9; white-space: nowrap; }

.weight-list { display: flex; flex-direction: column; gap: .4rem; }

.weight-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
}

.weight-label { width: 10rem; flex-shrink: 0; line-height: 1.25; }
.weight-value { width: 2.8rem; text-align: right; font-weight: 600; flex-shrink: 0; }

.maturity-chip {
    display: inline-block;
    margin: 0 .3rem .3rem 0;
    padding: .05rem .4rem;
    border: 1px solid var(--card-border);
    border-radius: 3px;
    background: var(--page-bg);
    font-size: .75rem;
}

.maturity-chip b { color: var(--text-muted); margin-right: .15rem; }

.run-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--divider);
}

.run-row:last-child { border-bottom: 0; }
.run-row > i { font-size: 1.1rem; width: 1.3rem; text-align: center; }

/* action plan */
.priority-badge {
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.priority-badge.priority-critical { background: rgba(229,72,77,.12); color: #c62f34; border-color: rgba(229,72,77,.35); }
.priority-badge.priority-high { background: rgba(247,107,21,.12); color: #b8500c; border-color: rgba(247,107,21,.35); }
.priority-badge.priority-medium { background: rgba(226,163,0,.12); color: #8a6400; border-color: rgba(226,163,0,.35); }
.priority-badge.priority-low { background: var(--page-bg); color: var(--text-muted); border-color: var(--card-border); }
[data-bs-theme="dark"] .priority-badge.priority-critical { color: #ff8b8f; }
[data-bs-theme="dark"] .priority-badge.priority-high { color: #ffa56b; }
[data-bs-theme="dark"] .priority-badge.priority-medium { color: #f5c94a; }

.risk-chip {
    display: inline-block;
    min-width: 2.6rem;
    padding: .05rem .45rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: .8rem;
    text-align: center;
}

.risk-chip.risk-high { background: rgba(229,72,77,.14); color: #c62f34; }
.risk-chip.risk-medium { background: rgba(247,107,21,.14); color: #b8500c; }
.risk-chip.risk-low { background: rgba(62,155,79,.14); color: #2f7a3d; }
[data-bs-theme="dark"] .risk-chip.risk-high { color: #ff8b8f; }
[data-bs-theme="dark"] .risk-chip.risk-medium { color: #ffa56b; }
[data-bs-theme="dark"] .risk-chip.risk-low { color: #7fd18d; }

.impact-list { list-style: none; margin: 0; padding: 0; }

.impact-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--divider);
}

.impact-item:last-child { border-bottom: 0; }
.impact-item .whatif-check { margin-top: .3rem; flex-shrink: 0; cursor: pointer; }
.impact-main { flex: 1; cursor: pointer; font-size: .86rem; }
.impact-title { font-weight: 500; }
.impact-answers { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .2rem; }

.impact-gain {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    min-width: 4.5rem;
    font-size: .95rem;
    color: var(--level-4);
}

.impact-flag {
    font-size: .68rem;
    font-weight: 600;
    color: var(--brand-accent-dark);
    white-space: nowrap;
}

[data-bs-theme="dark"] .impact-flag { color: #6cb6ff; }
.impact-action { min-width: 7.5rem; text-align: right; }

.whatif-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .75rem;
    padding: .65rem .85rem;
    border-radius: var(--radius);
    background: var(--brand-accent-soft);
    font-size: .85rem;
}

.whatif-bar > i { color: var(--brand-accent); }

.action-card {
    margin-bottom: .75rem;
    border-left: 3px solid var(--brand-silver);
}

.action-card.priority-critical { border-left-color: var(--level-1); }
.action-card.priority-high { border-left-color: var(--level-2); }
.action-card.priority-medium { border-left-color: var(--level-3); }
.action-card.status-dismissed { opacity: .65; }
.action-card.status-verified { border-left-color: var(--level-4); }
.action-card.is-overdue { box-shadow: inset 0 0 0 1px rgba(229,72,77,.35); }

.action-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.action-title {
    font-size: .98rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    min-width: 12rem;
}

.action-status { display: flex; gap: .3rem; }

.action-answers {
    margin-top: .6rem;
    padding: .45rem .65rem;
    border-radius: var(--radius);
    background: var(--page-bg);
    font-size: .82rem;
}

.action-answers .kpi-label { display: inline; margin-right: .2rem; }
.action-description { margin: .6rem 0 0; font-size: .86rem; white-space: pre-line; }
.action-note { margin-top: .5rem; font-size: .82rem; color: var(--text-muted); white-space: pre-line; }

.action-resources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    margin-top: .6rem;
    font-size: .82rem;
}

.action-resources .kpi-label { margin: 0; }
.action-evidence { margin-top: .5rem; }

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
    padding-top: .65rem;
    border-top: 1px solid var(--divider);
}

/* certificates */
.cert-funnel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem;
}

.cert-funnel-step {
    position: relative;
    padding: .85rem 1rem;
    border-radius: var(--radius);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-top: 3px solid var(--brand-silver);
}

.cert-funnel-step > i { position: absolute; right: .85rem; top: .85rem; color: var(--brand-silver-dark); }
.cert-funnel-step.step-inProgress { border-top-color: var(--brand-accent); }
.cert-funnel-step.step-certified { border-top-color: var(--level-4); }
.cert-funnel-step.step-expiring { border-top-color: var(--level-2); }
.cert-funnel-step.step-expired { border-top-color: var(--level-1); }

.expiring-list { list-style: none; margin: 0; padding: 0; }

.expiring-list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--divider);
    font-size: .86rem;
}

.expiring-list li:last-child { border-bottom: 0; }

.cert-card { border-left: 3px solid var(--brand-silver); }
.cert-card.status-certified { border-left-color: var(--level-4); }
.cert-card.status-inProgress { border-left-color: var(--brand-accent); }
.cert-card.status-expired { border-left-color: var(--level-1); }
.cert-card.is-expiring { border-left-color: var(--level-2); }
.cert-copy { font-size: .85rem; margin-top: .5rem; overflow-wrap: anywhere; }

.stage-stepper {
    display: flex;
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    counter-reset: stage;
}

.stage-stepper li {
    flex: 1;
    position: relative;
    padding-top: 1.1rem;
    font-size: .7rem;
    color: var(--text-muted);
    text-align: center;
}

.stage-stepper li::before {
    content: "";
    position: absolute;
    top: .3rem;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--divider);
}

.stage-stepper li.is-done::before,
.stage-stepper li.is-current::before { background: var(--brand-accent); }
.stage-stepper li.is-current { color: var(--text-main); font-weight: 600; }

.roadmap-phase { margin-top: 1.25rem; }

.roadmap-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.roadmap-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    color: #fff;
    font-size: .8rem;
    background: var(--level-3);
}

.phase-1 .roadmap-number { background: var(--level-1); }
.phase-2 .roadmap-number { background: var(--level-2); }

.roadmap-control {
    display: flex;
    gap: .85rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--divider);
}

.roadmap-reference {
    width: 7.5rem;
    flex-shrink: 0;
    font-weight: 600;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.roadmap-question {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .15rem 0;
    font-size: .84rem;
    color: var(--text-muted);
}

.roadmap-question.is-gap { color: var(--text-main); }
.roadmap-question-title { flex: 1; min-width: 10rem; }
.roadmap-score { font-weight: 600; min-width: 2.5rem; text-align: right; }
.roadmap-question.is-gap .roadmap-score { color: var(--level-1); }

/* resource library */
.resource-card {
    display: flex;
    flex-direction: column;
}

.resource-card.is-inactive { opacity: .65; }

.resource-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--brand-accent-soft);
    color: var(--brand-accent);
    font-size: 1.1rem;
}

.type-template .resource-icon { background: rgba(62,155,79,.12); color: var(--level-4); }
.type-training .resource-icon { background: rgba(226,163,0,.14); color: #a37600; }
.type-link .resource-icon { background: var(--page-bg); color: var(--text-muted); }

.resource-description {
    margin: .6rem 0;
    font-size: .85rem;
    color: var(--text-muted);
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.resource-description.is-full { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* incident log */
.severity-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.severity-badge.severity-low { background: var(--page-bg); color: var(--text-muted); border: 1px solid var(--card-border); }
.severity-badge.severity-medium { background: rgba(226,163,0,.14); color: #8a6400; }
.severity-badge.severity-high { background: rgba(247,107,21,.14); color: #b8500c; }
.severity-badge.severity-critical { background: var(--level-1); color: #fff; }
[data-bs-theme="dark"] .severity-badge.severity-medium { color: #f5c94a; }
[data-bs-theme="dark"] .severity-badge.severity-high { color: #ffa56b; }

.column-chart {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 170px;
}

.column-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.column-bar-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--divider);
}

.column-bar {
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    border-radius: 2px 2px 0 0;
    background: var(--brand-accent);
    overflow: hidden;
}

.column-bar-severe { width: 100%; background: var(--level-1); }

/* labels are only shown on every few columns and may use the width of their neighbours */
.column-label {
    font-size: .62rem;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    margin-top: .25rem;
}

.legend-severe { background: var(--level-1); }

@media (max-width: 991px) {
    .cert-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .cert-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .impact-item { flex-wrap: wrap; }
    .impact-main { flex-basis: calc(100% - 2rem); }
    .impact-gain { flex-direction: row; align-items: center; margin-left: 1.75rem; }
    .impact-action { min-width: 0; text-align: left; margin-left: auto; }
    .roadmap-control { flex-direction: column; gap: .2rem; }
    .roadmap-reference { width: auto; }
    .weight-label { width: 7rem; }
    .column-chart { height: 130px; }
}


/* =====================================================================
   Reports & dashboards (Phase 7)
   ===================================================================== */

.min-w-0 { min-width: 0; }

.section-label {
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.kpi-hint {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-button {
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.kpi-button:hover:not([disabled]),
.kpi-button.is-active {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 .15rem var(--brand-accent-soft);
}

.kpi-button[disabled] {
    cursor: default;
    opacity: .7;
}

.kpi-button .kpi-value { font-size: 2rem; }

.chart-note {
    font-size: .8rem;
    color: var(--text-muted);
    margin: -.35rem 0 .6rem;
}

.report-chart {
    width: 100%;
    height: 320px;
    position: relative;
}

.report-chart.chart-sm { height: 220px; }
.report-chart.chart-lg { height: 400px; }
.report-chart.chart-map { height: 440px; }
.report-chart.chart-gauge { height: 240px; }
.report-chart.chart-calendar { height: 180px; }

.chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--text-muted);
    font-size: .85rem;
    text-align: center;
    padding: 1rem;
}

.chart-empty i {
    font-size: 1.6rem;
    opacity: .5;
}

/* loading screen of the report builder: a veil over the old KPIs and charts and a revving speedometer card */
.report-results { position: relative; }
.report-results.is-loading { min-height: 22rem; }

.report-loading-veil,
.report-loading {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

.report-results.is-loading .report-loading-veil,
.report-results.is-loading .report-loading {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease .1s, visibility 0s;   /* the short delay avoids a flash on very fast answers */
}

.report-loading-veil {
    position: absolute;
    inset: -.5rem;
    z-index: 6;
    background: var(--loading-veil);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: var(--radius);
}

/* fixed to the screen: on laptops the report area starts below the fold, right under the filters that were just changed;
   clicks pass through, so the filters and tabs under it stay usable, and open filter lists (z-index 1000) cover it */
.report-loading {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 990;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .7rem 1.25rem .7rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-strong);
    pointer-events: none;
    white-space: nowrap;
}

.loading-gauge {
    display: block;
    width: 4.75rem;
    flex-shrink: 0;
    overflow: visible;
}

.loading-gauge path { fill: none; stroke-width: 6; stroke-linecap: round; }
.loading-gauge .gauge-track { stroke: var(--card-border); }
.loading-gauge .gauge-redline { stroke: var(--level-1); opacity: .35; stroke-linecap: butt; }
.loading-gauge .gauge-sweep { stroke: var(--brand-accent); stroke-dasharray: 145; stroke-dashoffset: 143; }
.loading-gauge .gauge-ticks line { stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; }
.loading-gauge .gauge-needle { stroke: var(--text-main); stroke-width: 2.5; stroke-linecap: round; transform-origin: 60px 64px; transform: rotate(-88deg); }
.loading-gauge .gauge-hub { fill: var(--text-main); stroke: var(--card-bg); stroke-width: 2; }

.report-results.is-loading .gauge-needle,
.dashboard-loading .gauge-needle { animation: gaugeNeedle 2s ease-in-out infinite; }
.report-results.is-loading .gauge-sweep,
.dashboard-loading .gauge-sweep { animation: gaugeSweep 2s ease-in-out infinite; }

/* home dashboard: in-flow placeholder roughly as tall as the first chart row; fades in late to avoid a flash on fast answers */
.dashboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    min-height: 22rem;
    animation: dashboardLoadingIn .2s ease .15s both;
}

.dashboard-loading .loading-gauge { width: 6.5rem; }

@keyframes dashboardLoadingIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.report-loading-text {
    color: var(--text-main);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .01em;
}

/* rev up, ease off, rev to the redline, drop back to idle (needle angle and arc fill move together) */
@keyframes gaugeNeedle {
    0%   { transform: rotate(-88deg); }
    40%  { transform: rotate(60deg); }
    50%  { transform: rotate(40deg); }
    65%  { transform: rotate(82deg); }
    100% { transform: rotate(-88deg); }
}

@keyframes gaugeSweep {
    0%   { stroke-dashoffset: 143; }
    40%  { stroke-dashoffset: 24; }
    50%  { stroke-dashoffset: 40; }
    65%  { stroke-dashoffset: 6; }
    100% { stroke-dashoffset: 143; }
}

@media (prefers-reduced-motion: reduce) {
    .report-results.is-loading .gauge-needle,
    .report-results.is-loading .gauge-sweep,
    .dashboard-loading .gauge-needle,
    .dashboard-loading .gauge-sweep { animation: none; }
    .loading-gauge .gauge-needle { transform: rotate(0deg); }
    .loading-gauge .gauge-sweep { stroke-dashoffset: 72; }
}

.filter-panel .form-label {
    margin-bottom: .2rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* multi-select dropdown (MultiSelect in site.js) */
.multi-select { width: 100%; }

.multi-select-toggle {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multi-select-text.is-empty { color: var(--text-muted); }

.multi-select-menu {
    width: 100%;
    min-width: 15rem;
    max-width: calc(100vw - 2rem);
    padding: .4rem;
}

.multi-select-search { padding-bottom: .4rem; }

.multi-select-options {
    max-height: 16rem;
    overflow-y: auto;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .45rem;
    border-radius: var(--radius);
    font-size: .85rem;
    cursor: pointer;
}

.multi-select-option:hover { background: var(--brand-accent-soft); }
.multi-select-option.is-child { padding-left: 1.6rem; }
.multi-select-option .form-check-input { margin: 0; flex-shrink: 0; }
.multi-select-label { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }

.multi-select-count {
    color: var(--text-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.multi-select-empty {
    color: var(--text-muted);
    font-size: .82rem;
    padding: .4rem .45rem;
}

.multi-select-actions {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--card-border);
    margin-top: .3rem;
    padding-top: .3rem;
}

.multi-select-actions .btn {
    text-decoration: none;
    padding: .1rem .3rem;
    font-size: .8rem;
}

.report-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: thin;
}

.report-tabs .filter-tab {
    white-space: nowrap;
    flex-shrink: 0;
}

.report-tabs .filter-tab i { margin-right: .35rem; }

@media (min-width: 1200px) {
    .report-tabs { flex-wrap: wrap; overflow-x: visible; }
}

.views-menu { min-width: 16rem; max-width: 22rem; }

/* drill-down path */
.drill-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
}

.drill-root { color: var(--text-muted); font-weight: 600; }
.drill-separator { font-size: .6rem; color: var(--text-muted); }

.drill-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--brand-accent-soft);
    color: var(--brand-accent);
    border-radius: 999px;
    padding: .15rem .3rem .15rem .7rem;
    font-weight: 600;
}

.drill-remove {
    border: 0;
    background: transparent;
    color: inherit;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    line-height: 1;
    padding: 0;
}

.drill-remove:hover { background: rgba(0, 120, 214, .18); }

/* lists inside report cards */
.report-list {
    display: flex;
    flex-direction: column;
}

.report-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--divider);
}

.report-list-item:last-child { border-bottom: 0; }

.report-list-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.risk-value {
    color: var(--level-1);
    font-size: 1.05rem;
}

/* goals and deadlines */
.goal-row { padding: .65rem 0; border-bottom: 1px solid var(--divider); }
.goal-row:last-child { border-bottom: 0; }

.goal-bar,
.stacked-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--divider);
    overflow: visible;
    display: flex;
}

.stacked-bar { overflow: hidden; }
.stacked-bar span { display: block; height: 100%; }
.stacked-bar-lg { height: 16px; }

.goal-fill {
    height: 100%;
    border-radius: 999px;
}

.goal-projection {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 18px;
    background: var(--text-main);
    border-radius: 2px;
    transform: translateX(-1px);
}

/* clusters */
.cluster-card {
    border-left: 3px solid var(--cluster-color, var(--brand-accent));
    padding: .6rem .9rem;
    margin-bottom: .75rem;
    background: var(--page-bg);
    border-radius: var(--radius);
}

.cluster-members {
    font-size: .8rem;
    margin-top: .35rem;
    line-height: 1.6;
}

.cert-status {
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.cert-certified { color: var(--level-4); }
.cert-inProgress { color: var(--level-2); }
.cert-planned { color: var(--level-3); }
.cert-none { color: var(--text-muted); }

/* organization search */
.organization-search {
    position: relative;
    max-width: 640px;
}

.organization-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    box-shadow: var(--shadow-soft);
    max-height: 360px;
    overflow-y: auto;
}

/* organization report */
.control-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--divider);
    font-size: .88rem;
}

.control-row:last-child { border-bottom: 0; }
.control-row i { font-size: 1.05rem; }
.control-met i { color: var(--level-4); }
.control-failed i { color: var(--level-1); }
.control-open i { color: var(--text-muted); }
.control-failed { font-weight: 600; }
.control-unverified i { color: var(--level-2); }

.control-code {
    font-weight: 700;
    min-width: 2rem;
}

.mini-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    text-align: center;
    font-size: .75rem;
    color: var(--text-muted);
}

.mini-stats span {
    display: block;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.1;
}

.answer-section {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    padding: 1rem 0 .4rem;
    border-bottom: 1px solid var(--divider);
}

.answer-row {
    display: flex;
    gap: .9rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--divider);
    align-items: flex-start;
}

.answer-code {
    font-weight: 700;
    font-size: .8rem;
    min-width: 3rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    align-items: flex-start;
}

.answer-main {
    flex: 1;
    min-width: 0;
}

.answer-question { font-size: .88rem; }

.answer-value {
    font-size: .84rem;
    color: var(--text-muted);
    margin-top: .15rem;
    overflow-wrap: anywhere;
}

.answer-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    font-size: .8rem;
    margin-top: .35rem;
}

.answer-scores {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    min-width: 4.5rem;
}

.score-chip {
    display: inline-block;
    min-width: 2.6rem;
    text-align: center;
    border-radius: 999px;
    padding: .1rem .5rem;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    background: var(--score-color, var(--brand-silver-dark));
}

.critical-chip {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    color: var(--level-1);
    border: 1px solid var(--level-1);
    border-radius: 999px;
    padding: 0 .4rem;
    line-height: 1.4;
}

/* benchmark */
.benchmark-score {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--score-color, var(--text-main));
    text-align: right;
}

/* scheduled reports */
.schedule-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.schedule-controls .form-select { width: auto; }

/* dashboard */
.dashboard-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--brand-accent);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}

.dashboard-cta > i {
    font-size: 1.5rem;
    color: var(--brand-accent);
}

.dashboard-cta.is-overdue { border-left-color: var(--level-1); }
.dashboard-cta.is-overdue > i { color: var(--level-1); }

/* ---------------------------------------------------------------
   Presentation mode (dark executive slides)
   --------------------------------------------------------------- */

body.presentation-mode .brand-navbar,
body.presentation-mode .circ-banner,
body.presentation-mode .site-footer {
    display: none !important;
}

body.presentation-mode .page-main { padding: 0; }

.presentation-stage {
    position: relative;
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #1b1d21 0%, #050506 70%);
    color: #eceef0;
    overflow: hidden;
}

.presentation-stage:fullscreen { width: 100vw; height: 100vh; }

.presentation-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0a7;
}

.slide {
    position: absolute;
    inset: 0 0 64px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s;
    padding: 3.5vh 4vw 1vh;
}

.slide.is-active {
    opacity: 1;
    visibility: visible;
}

.slide-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.slide-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    font-weight: 600;
    margin-bottom: 2vh;
    color: #fff;
}

.slide-chart {
    flex: 1;
    min-height: 260px;
    width: 100%;
}

.slide-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    min-height: 0;
}

.slide-grid .slide-chart { height: 100%; }

.slide-note {
    color: #9aa0a7;
    font-size: 1rem;
    margin: 1vh 0 0;
}

.slide-empty {
    color: #9aa0a7;
    font-size: 1.1rem;
    padding: 2rem 0;
}

.slide-list {
    overflow-y: auto;
    padding-right: .5rem;
}

.slide-goal { margin-bottom: 1.6rem; }
.slide-goal-name { font-size: 1.05rem; margin-bottom: .45rem; }

.slide-goal-bar {
    position: relative;
    height: 14px;
    background: rgba(255,255,255,.1);
    border-radius: 999px;
}

.slide-goal-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #3e9b4f;
}

.slide-goal-bar i {
    position: absolute;
    top: -5px;
    width: 3px;
    height: 24px;
    background: #fff;
    border-radius: 2px;
}

.slide-goal-meta { color: #9aa0a7; font-size: .9rem; margin-top: .35rem; }

.title-slide {
    margin: auto 0;
    max-width: 70vw;
}

.title-eyebrow {
    font-size: .85rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #8c9198;
    margin-bottom: 2vh;
}

.title-slide h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    font-weight: 600;
    line-height: 1.05;
    color: #fff;
}

.title-sub { font-size: 1.25rem; color: #c8ccd1; margin-top: 3vh; }
.title-meta { color: #8c9198; }

.big-figures {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vh 3vw;
    align-content: center;
}

.big-figure {
    border-top: 3px solid var(--figure-color, #8c9198);
    padding-top: 1.5vh;
}

.big-figure-value {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

.big-figure-label {
    font-size: .9rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #c8ccd1;
    margin-top: 1vh;
}

.big-figure-hint { color: #8c9198; font-size: .95rem; }

.risk-board {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4vh 3vw;
    align-content: start;
}

.risk-board-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 1.2vh 0;
}

.risk-rank {
    font-family: var(--font-display);
    font-size: 2rem;
    color: #8c9198;
    width: 2.2rem;
}

.risk-name { font-size: 1.1rem; }
.risk-detail { color: #9aa0a7; font-size: .85rem; }
.risk-board .risk-value { font-size: 1.6rem; font-weight: 700; color: #e5484d; }

.presentation-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.25rem;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
}

.presentation-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: transparent;
    color: #eceef0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.presentation-button:hover { background: rgba(255,255,255,.1); color: #fff; }

.presentation-select {
    background: transparent;
    color: #eceef0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: .25rem .6rem;
}

.presentation-select option { color: #000; }
.presentation-counter { color: #9aa0a7; font-size: .85rem; margin-left: .5rem; }

.presentation-circ {
    color: #f9c9b5;
    font-size: .78rem;
    margin-left: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.presentation-dots {
    display: flex;
    gap: .35rem;
    margin-left: auto;
}

.slide-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(255,255,255,.25);
}

.slide-dot.is-active { background: #fff; }

.presentation-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255,255,255,.08);
}

.presentation-progress-bar {
    height: 100%;
    width: 0;
    background: var(--brand-accent);
    transition: width .2s linear;
}

/* ---------------------------------------------------------------
   Print / PDF (report builder, organization board report)
   --------------------------------------------------------------- */

.print-header,
.print-watermark { display: none; }

@media print {
    @page { size: A4 landscape; margin: 12mm; }

    .report-page .print-header {
        display: block;
        border-bottom: 2px solid #000;
        padding-bottom: 6px;
        margin-bottom: 14px;
    }

    .print-brand { font-size: 10pt; letter-spacing: .2em; text-transform: uppercase; color: #555; }
    .print-title { font-size: 18pt; font-weight: 700; }
    .print-filter, .print-meta { font-size: 9pt; color: #444; }

    .report-page .print-watermark {
        display: block;
        position: fixed;
        top: 45%;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 34pt;
        color: rgba(0,0,0,.06);
        transform: rotate(-24deg);
        z-index: 0;
        pointer-events: none;
    }

    .report-page .page-header,
    .report-page .filter-panel,
    .report-page .report-tabs,
    .report-page .drill-path,
    .report-page .organization-search,
    .report-page #answerFilters,
    .report-page .report-loading,
    .report-page .report-loading-veil,
    .report-page .dataTables_filter,
    .report-page .dataTables_length,
    .report-page .dataTables_paginate {
        display: none !important;
    }

    .report-page .content-card { border: 1px solid #ccc; page-break-inside: avoid; }
    .report-page .kpi-tile { border: 1px solid #ccc; }
    .report-page a { color: #000; text-decoration: none; }
    .report-page .col-xl-7, .report-page .col-xl-5, .report-page .col-xl-6, .report-page .col-lg-7, .report-page .col-lg-5,
    .report-page .col-lg-6, .report-page .col-lg-4, .report-page .col-lg-8 { flex: 0 0 auto; width: 50%; }
}

body.is-printing .report-page .report-chart { width: 100% !important; }

@media (max-width: 767.98px) {
    .report-chart.chart-map { height: 300px; }
    .report-chart.chart-lg { height: 320px; }
    .mini-stats { grid-template-columns: repeat(2, 1fr); }
    .answer-row { flex-wrap: wrap; }
    .answer-scores { flex-direction: row; align-items: center; min-width: 0; width: 100%; padding-left: 3.9rem; }
    .schedule-controls { width: 100%; }
    .benchmark-score { font-size: 2rem; }
    .slide { padding: 2vh 4vw 0; }
    .slide-grid, .risk-board { grid-template-columns: 1fr; }
    .big-figures { grid-template-columns: repeat(2, 1fr); }
    .presentation-select, .presentation-circ, .presentation-dots { display: none; }
}


/* =====================================================================
   Generative AI: label, Markdown output, AI insights, ask your data,
   LLM settings, prompt templates, evidence pre-check, presentation slide
   ===================================================================== */

.ai-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
    background: none;
    border-radius: 0;
    padding: 0;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(142, 78, 198, .14), rgba(0, 120, 214, .14));
    color: var(--text-main);
    font-weight: 600;
    letter-spacing: .02em;
}

.ai-badge i { color: #8e4ec6; }
.ai-location { white-space: nowrap; }

.ai-review {
    font-size: .8rem;
    margin-top: .35rem;
}

.ai-review.is-approved { color: var(--level-4); }
.ai-review.is-rejected { color: var(--level-1); }
.ai-review.is-draft { color: var(--level-2); }

.ai-content {
    font-size: .95rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.ai-content h1, .ai-content h2, .ai-content h3, .ai-content h4 {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.2rem 0 .5rem;
}

.ai-content > :first-child { margin-top: 0; }
.ai-content ul, .ai-content ol { padding-left: 1.3rem; }
.ai-content li { margin-bottom: .25rem; }
.ai-content blockquote { border-left: 3px solid var(--card-border); padding-left: .8rem; color: var(--text-muted); }
.ai-content code { font-size: .85em; }
.ai-table { font-size: .85rem; }
.ai-table th { white-space: nowrap; }

/* AI insights */
.ai-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.ai-type {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .7rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-main);
    font-size: .85rem;
    text-align: left;
    transition: border-color var(--transition), background var(--transition);
}

.ai-type i { color: var(--text-muted); width: 1.1rem; text-align: center; }
.ai-type:hover { border-color: var(--brand-silver-dark); }
.ai-type.active { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.ai-type.active i { color: var(--brand-accent); }

.ai-selected-organization {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    margin-bottom: .5rem;
    border: 1px solid var(--brand-accent);
    border-radius: var(--radius);
    background: var(--brand-accent-soft);
    font-weight: 600;
    font-size: .9rem;
}

/* organizations with results within the filters of the AI report (a warning when there are none) */
.ai-scope-note {
    margin-top: .75rem;
    font-size: .85rem;
    color: var(--text-muted);
}
.ai-scope-note.is-empty { color: var(--level-1); font-weight: 600; }

.ai-report-list {
    max-height: 560px;
    overflow-y: auto;
    margin: 0 -.5rem;
}

.ai-list-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    width: 100%;
    padding: .6rem .5rem;
    border: 0;
    border-bottom: 1px solid var(--divider);
    background: transparent;
    color: var(--text-main);
    text-align: left;
}

.ai-list-item:hover { background: var(--brand-accent-soft); }
.ai-list-item.active { background: var(--brand-accent-soft); box-shadow: inset 3px 0 0 var(--brand-accent); }
.ai-list-type { font-weight: 600; font-size: .85rem; }
.ai-list-scope { font-size: .8rem; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ai-list-meta { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--text-muted); }

.ai-viewer { min-height: 420px; }

.ai-viewer-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--divider);
}

.ai-viewer-title {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    margin: .15rem 0 .4rem;
}

.ai-viewer-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.ai-editor { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; }

.ai-review-panel {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px dashed var(--brand-silver-dark);
    border-radius: var(--radius);
}

.ai-source summary { cursor: pointer; font-size: .85rem; color: var(--text-muted); }

.ai-source-data {
    max-height: 320px;
    overflow: auto;
    font-size: .75rem;
    padding: .75rem;
    background: var(--page-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

.ai-panel .ai-content { font-size: .9rem; }

/* evidence pre-check */
.ai-precheck {
    margin-top: .5rem;
    padding: .6rem .75rem;
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--brand-silver-dark);
    border-radius: var(--radius);
    font-size: .82rem;
    background: var(--card-bg);
}

.ai-precheck.verdict-supports { border-left-color: var(--level-4); }
.ai-precheck.verdict-partiallySupports { border-left-color: var(--level-3); }
.ai-precheck.verdict-doesNotSupport { border-left-color: var(--level-1); }
.ai-precheck-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ai-precheck.verdict-supports .ai-precheck-head i { color: var(--level-4); }
.ai-precheck.verdict-partiallySupports .ai-precheck-head i { color: var(--level-3); }
.ai-precheck.verdict-doesNotSupport .ai-precheck-head i { color: var(--level-1); }
.ai-precheck-confidence { color: var(--text-muted); }
.ai-precheck-summary { margin-top: .3rem; }
.ai-precheck-findings { margin: .3rem 0 0; padding-left: 1.1rem; }
.ai-precheck-warning { margin-top: .35rem; color: var(--level-2); }
.ai-precheck-comment { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--divider); }
.ai-precheck-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem; margin-top: .45rem; }

/* ask your data */
.ask-card { display: flex; flex-direction: column; min-height: 480px; }
.ask-examples { display: flex; flex-wrap: wrap; gap: .4rem; }

.ask-example {
    padding: .35rem .7rem;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-main);
    font-size: .82rem;
    text-align: left;
}

.ask-example:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.ask-thread { flex: 1; padding: 1rem 0; }
.ask-question { display: flex; justify-content: flex-end; margin: 1rem 0 .5rem; }

.ask-bubble {
    max-width: min(80%, 640px);
    padding: .55rem .85rem;
    border-radius: 12px 12px 2px 12px;
    background: var(--brand-accent);
    color: #fff;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ask-answer {
    padding: .9rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: 2px 12px 12px 12px;
    background: var(--page-bg);
}

.ask-thinking { color: var(--text-muted); font-size: .9rem; }
.ask-title { font-weight: 700; margin-bottom: .4rem; }
.ask-text { margin-bottom: .75rem; }
.ask-text > :last-child { margin-bottom: 0; }
.ask-chart { height: 300px; margin-bottom: .75rem; }
.ask-table { max-height: 380px; overflow: auto; }
.ask-table table { font-size: .85rem; }
.ask-details { margin: .25rem 0 .6rem; }
.ask-details summary { cursor: pointer; font-size: .82rem; color: var(--text-muted); }

.ask-form {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--divider);
}

.ask-form textarea { resize: vertical; }
.ask-form .btn { white-space: nowrap; }

/* LLM settings */
.llm-connection-card.is-inactive { opacity: .7; }

.llm-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .2rem .9rem;
    font-size: .85rem;
    margin: 0;
}

.llm-facts dt { color: var(--text-muted); font-weight: 500; }
.llm-facts dd { margin: 0; }
.llm-usage-value { width: auto; min-width: 5.5rem; white-space: nowrap; }
.llm-kpi-value { font-size: 2rem; }

/* prompt templates */
.prompt-key-list { display: flex; flex-direction: column; }

.prompt-key {
    display: flex;
    flex-direction: column;
    padding: .6rem .7rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-main);
    text-align: left;
}

.prompt-key:hover { background: var(--brand-accent-soft); }
.prompt-key.active { background: var(--brand-accent-soft); box-shadow: inset 3px 0 0 var(--brand-accent); }
.prompt-versions { display: flex; flex-wrap: wrap; gap: .4rem; }

.prompt-version {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-main);
}

.prompt-version.active { border-color: var(--brand-accent); background: var(--brand-accent-soft); }

.prompt-view {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .8rem;
    max-height: 420px;
    overflow: auto;
    padding: .75rem;
    background: var(--page-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

.prompt-text { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.prompt-placeholder { white-space: nowrap; }

/* presentation slide */
.slide-ai {
    flex: 1;
    min-height: 0;
    overflow: auto;
    color: #e6e8eb;
}

.slide-ai .ai-label { color: #9aa0a8; font-size: .9rem; }
.slide-ai .ai-badge { color: #fff; }
.slide-ai .ai-content { columns: 2 420px; column-gap: 3vw; font-size: clamp(.9rem, 1.15vw, 1.15rem); margin-top: 1.5vh; }
.slide-ai .ai-content h2, .slide-ai .ai-content h3 { break-after: avoid; color: #fff; }
.slide-ai .ai-content li { break-inside: avoid; }

@media print {
    .ai-page .print-header { display: block; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 14px; }
    .ai-page .print-watermark {
        display: block;
        position: fixed;
        top: 45%;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 34pt;
        color: rgba(0,0,0,.06);
        transform: rotate(-24deg);
        z-index: 0;
        pointer-events: none;
    }
    .ai-page .page-header, .ai-page #aiPolicy, .ai-page .col-xl-4, .ai-page .ai-viewer-actions, .ai-page .ai-review-panel, .ai-page .ai-source { display: none !important; }
    .ai-page .col-xl-8 { width: 100%; }
    .ai-page .content-card { border: 0; padding: 0; }
}

@media (max-width: 575.98px) {
    .ai-type-grid { grid-template-columns: 1fr; }
    .ask-form { flex-direction: column; align-items: stretch; }
    .ask-bubble { max-width: 92%; }
    .llm-facts { grid-template-columns: 1fr; }
}
#llmTabs .filter-tab i { margin-right: .35rem; }

/* =====================================================================
   Phase 9: privacy notices, announcements, CIRC guide, profile, support,
   GDPR administration, audit log, security, content management
   ===================================================================== */

/* privacy notice banner (master page) */
.notice-banner {
    background: var(--brand-graphite);
    border-bottom: 1px solid var(--brand-steel);
    color: #e6e8eb;
    font-size: .82rem;
    padding: .5rem 0;
}

.notice-banner .fa-user-shield {
    color: var(--brand-silver);
}

.notice-summary {
    color: var(--brand-silver-dark);
}

.notice-read {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

.notice-read:hover {
    color: var(--brand-silver-light);
}

/* announcements (master page) */
.announcement-bar {
    border-bottom: 1px solid var(--card-border);
    background: var(--brand-accent-soft);
    color: var(--text-main);
    font-size: .86rem;
    padding: .5rem 0;
}

.announcement-bar.severity-warning {
    background: rgba(226, 163, 0, .14);
}

.announcement-bar.severity-critical {
    background: var(--level-1);
    color: #fff;
}

.announcement-icon {
    margin-top: .2rem;
    color: var(--brand-accent);
}

.announcement-bar.severity-warning .announcement-icon {
    color: #8a6400;
}

.announcement-bar.severity-critical .announcement-icon {
    color: #fff;
}

.announcement-toggle {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-weight: 600;
    text-align: start;
}

.announcement-title {
    font-weight: 600;
}

.announcement-content {
    padding-top: .35rem;
}

.announcement-content p:last-child {
    margin-bottom: 0;
}

.announcement-bar.severity-critical a {
    color: #fff;
    text-decoration: underline;
}

.announcement-bar.severity-critical .btn-close {
    filter: invert(1);
}

[data-bs-theme="dark"] .announcement-bar.severity-warning .announcement-icon {
    color: #f5c94a;
}

/* CIRC guide */
.circ-guide-link {
    color: #f2c9cb;
    text-decoration: underline;
}

.circ-guide-link:hover {
    color: #fff;
}

.circ-modal-header {
    background: linear-gradient(90deg, #1b0d0e, #120b0b 60%, #0d0d0e);
    color: #fff;
}

.circ-contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}

.circ-contact-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(229, 72, 77, .35);
    border-radius: var(--radius);
    background: rgba(229, 72, 77, .06);
    color: var(--text-main);
    text-decoration: none;
}

.circ-contact-card:hover {
    background: rgba(229, 72, 77, .12);
    color: var(--text-main);
}

.circ-contact-card > i {
    font-size: 1.3rem;
    color: var(--level-1);
}

.circ-contact-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.circ-contact-value {
    display: block;
    font-weight: 600;
    word-break: break-all;
}

.circ-support-card {
    border-left: 3px solid var(--level-1);
}

/* profile */
.profile-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.profile-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-black);
    color: #fff;
    font-weight: 600;
    font-size: 1.15rem;
}

[data-bs-theme="dark"] .profile-avatar {
    background: var(--brand-silver-light);
    color: #000;
}

.profile-name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1.2;
}

.profile-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1rem;
    margin: 0;
    font-size: .88rem;
}

.profile-facts dt {
    color: var(--text-muted);
    font-weight: 500;
}

.profile-facts dd {
    margin: 0;
    min-width: 0;
    word-break: break-word;
}

.preference-table .preference-group th {
    background: var(--page-bg);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.notice-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--divider);
}

.notice-row:last-child {
    border-bottom: 0;
}

.notice-link-row {
    padding: .3rem 0;
}

/* support */
.ticket-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .85rem 1.1rem;
    border: 0;
    border-bottom: 1px solid var(--divider);
    background: transparent;
    color: var(--text-main);
}

.ticket-item:last-child {
    border-bottom: 0;
}

.ticket-item:hover {
    background: var(--page-bg);
}

.ticket-number {
    flex-shrink: 0;
    min-width: 3.4rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.ticket-subject {
    display: block;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ticket-message {
    max-width: 85%;
    padding: .7rem .9rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--card-bg);
}

.ticket-message.is-requester {
    align-self: flex-start;
}

.ticket-message.is-agent {
    align-self: flex-end;
    background: var(--brand-accent-soft);
    border-color: rgba(0, 120, 214, .25);
}

.ticket-message.is-internal {
    align-self: flex-end;
    background: rgba(226, 163, 0, .1);
    border-style: dashed;
    border-color: rgba(226, 163, 0, .5);
}

.ticket-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
    font-size: .82rem;
}

.ticket-message-body {
    font-size: .9rem;
    word-break: break-word;
}

.priority-badge.priority-normal { background: var(--page-bg); color: var(--text-muted); border-color: var(--card-border); }

.faq-accordion .accordion-button {
    font-size: .9rem;
    font-weight: 600;
    padding: .8rem 0;
    background: transparent;
    box-shadow: none;
}

.faq-accordion .accordion-body {
    padding: 0 0 .9rem;
    font-size: .88rem;
}

.faq-accordion .accordion-item {
    background: transparent;
}

/* GDPR administration */
.deadline-badge {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.deadline-badge.deadline-ok { background: rgba(62, 155, 79, .14); color: #2c7a3b; }
.deadline-badge.deadline-soon { background: rgba(226, 163, 0, .16); color: #8a6400; }
.deadline-badge.deadline-overdue { background: var(--level-1); color: #fff; }
[data-bs-theme="dark"] .deadline-badge.deadline-ok { color: #7fd18d; }
[data-bs-theme="dark"] .deadline-badge.deadline-soon { color: #f5c94a; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
}

.detail-grid dt {
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.detail-grid dd {
    margin: 0;
    word-break: break-word;
}

.request-details {
    padding: .75rem .9rem;
    border-left: 3px solid var(--brand-accent);
    background: var(--page-bg);
    white-space: pre-wrap;
    word-break: break-word;
}

.clickable-row {
    cursor: pointer;
}

.breach-clock {
    padding: .6rem .9rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--page-bg);
    font-size: .88rem;
}

.dpia-badge {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
}

.dpia-badge.dpia-planned { background: rgba(226, 163, 0, .16); color: #8a6400; }
.dpia-badge.dpia-inProgress { background: var(--brand-accent-soft); color: var(--brand-accent-dark); }
.dpia-badge.dpia-completed { background: rgba(62, 155, 79, .14); color: #2c7a3b; }
[data-bs-theme="dark"] .dpia-badge.dpia-planned { color: #f5c94a; }
[data-bs-theme="dark"] .dpia-badge.dpia-inProgress { color: #6cb6ff; }
[data-bs-theme="dark"] .dpia-badge.dpia-completed { color: #7fd18d; }

.activity-purpose {
    max-width: 420px;
}

.retention-months {
    width: 9.5rem;
}

/* audit log */
.audit-table td {
    vertical-align: top;
}

.audit-action {
    font-size: .78rem;
    color: var(--text-main);
    background: var(--page-bg);
    padding: .05rem .35rem;
    border-radius: var(--radius);
}

.audit-details {
    max-width: 420px;
}

/* announcements administration */
.announcement-severity {
    display: inline-flex;
    width: 1.6rem;
    justify-content: center;
}

.announcement-severity.severity-info { color: var(--brand-accent); }
.announcement-severity.severity-warning { color: var(--level-3); }
.announcement-severity.severity-critical { color: var(--level-1); }

/* content management */
.cms-preview {
    overflow: hidden;
}

.code-textarea {
    font-family: Consolas, 'Courier New', monospace;
    font-size: .8rem;
}

.placeholder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.placeholder-chips .btn {
    font-family: Consolas, 'Courier New', monospace;
    font-size: .74rem;
    padding: .1rem .45rem;
}

.email-preview {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}

.email-preview-subject {
    padding: .5rem .75rem;
    border-bottom: 1px solid #e3e5e8;
    background: #f5f6f7;
    color: #16171a;
    font-weight: 600;
    font-size: .86rem;
}

.email-preview iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: 0;
    background: #fff;
}

@media print {
    .notice-area, .announcement-area {
        display: none !important;
    }
}

/* icons inside filter tabs keep a gap to the label */
.filter-tab > i.fa-solid:first-child {
    margin-right: .35rem;
}

@media (max-width: 575.98px) {
    .ticket-subject {
        white-space: normal;
    }
}

/* =====================================================================
   Commercial model: billing, plans, packages administration, license mode
   ===================================================================== */

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .2rem 0;
    font-size: .86rem;
}

.feature-list li > i {
    width: 1rem;
    margin-top: .2rem;
    text-align: center;
    flex-shrink: 0;
}

.feature-list li.is-included > i {
    color: var(--level-4);
}

.feature-list li.is-missing {
    color: var(--text-muted);
}

.feature-list li.is-missing > i {
    color: var(--brand-silver-dark);
}

.current-plan-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .5rem;
}

.current-plan-name {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
}

.current-plan-period {
    font-size: .86rem;
    margin-bottom: .75rem;
}

.usage-meter {
    margin-bottom: .9rem;
}

.usage-meter .progress {
    height: 6px;
    margin-top: .3rem;
    background: var(--divider);
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.4rem;
    overflow: hidden;
}

.plan-card.is-highlighted {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 1px var(--brand-accent), var(--shadow-soft);
}

.plan-card.is-current {
    border-color: var(--level-4);
}

.plan-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--brand-accent);
    color: #fff;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    padding: .3rem .7rem;
    border-bottom-left-radius: var(--radius);
}

.plan-name {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    padding-right: 5rem;
}

.plan-description {
    font-size: .84rem;
    color: var(--text-muted);
    min-height: 2.4em;
    margin: .35rem 0 .6rem;
}

.plan-price {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
}

.plan-price s {
    font-family: var(--font-sans);
    font-size: 1rem;
}

.plan-price-period {
    font-family: var(--font-sans);
    font-size: .8rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: .35rem;
}

.plan-saving {
    font-size: .76rem;
    font-weight: 600;
    color: var(--level-4);
    margin-bottom: .75rem;
}

.plan-card .feature-list {
    flex-grow: 1;
    border-top: 1px solid var(--divider);
    padding-top: .75rem;
}

.plan-actions {
    margin-top: 1rem;
}

.token-card .plan-name {
    padding-right: 0;
}

.token-amount {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    margin-top: .5rem;
}

.token-card .plan-price {
    font-size: 1.5rem;
    flex-grow: 1;
}

.coupon-input {
    width: 16rem;
    max-width: 100%;
}

.feature-checks .form-check {
    margin-bottom: .5rem;
}

.limit-label {
    min-width: 9rem;
}

.org-search-results {
    border: 1px solid var(--card-border);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 220px;
    overflow-y: auto;
    background: var(--card-bg);
}

.org-search-results:empty {
    display: none;
}

.org-search-result {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--divider);
    padding: .4rem .7rem;
    color: var(--text-main);
}

.org-search-result:hover,
.org-search-result:focus {
    background: var(--brand-accent-soft);
}

.org-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.org-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--brand-accent-soft);
    border-radius: 999px;
    padding: .2rem .4rem .2rem .7rem;
    font-size: .8rem;
}

.org-chip .btn-close {
    font-size: .55rem;
}

@media (max-width: 575.98px) {
    .current-plan-name {
        font-size: 1.5rem;
    }

    .coupon-input {
        width: 100%;
    }
}

/* =========================================================
   Payment receipt (Account/Billing.aspx)
   ========================================================= */
.receipt-brand {
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand-silver-dark);
}

.receipt-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
}

@media print {
    body.print-receipt * {
        visibility: hidden;
    }

    body.print-receipt #receiptBody,
    body.print-receipt #receiptBody * {
        visibility: visible;
    }

    body.print-receipt #receiptBody {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        color: #000;
    }

    body.print-receipt .modal-backdrop {
        display: none;
    }
}

/* =========================================================
   Translation manager (Admin/Translations.aspx)
   ========================================================= */
.translation-source {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .875rem;
    padding: .6rem .75rem;
    border-radius: .5rem;
    background: var(--brand-surface-muted, rgba(127, 127, 127, .08));
    max-height: 14rem;
    overflow-y: auto;
}

.coverage-card {
    cursor: pointer;
}

.coverage-card:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}
/* ---------- Fork G2: landing page with six process steps ---------- */
@media (min-width: 992px) {
    .process-steps.process-steps-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ---------- Companies: choice of the verification mode, company switcher ---------- */
.choice-card {
    display: block;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    height: 100%;
}

.choice-card:has(input:checked) {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .04);
}

.company-switcher-toggle {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-switcher-menu {
    max-height: 70vh;
    overflow-y: auto;
}

.company-switcher-menu .dropdown-item i {
    width: 1.25rem;
    margin-right: .35rem;
}

/* result of a question-weighted scoring profile (imported survey files) */
.survey-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--divider);
}

.survey-result-row:last-child {
    border-bottom: 0;
}