/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Colors */
:root {
    --matrix-title-width: 260px; /* Minimum width of the first column (row titles) of every matrix; it grows to fill the room left by the tiles */
    --matrix-cell-size: 44px; /* Side of the square tile of every matrix */
    --matrix-column-width: calc(var(--matrix-cell-size) + 5px); /* Column of a tile: the tile, 2px of padding on each side and the 1px border */
    --btn-large-width: 15.5rem;
    --brand-theme: #000000;
    --brand-dark-theme: #FFFFFF;
    --default-color: #212529;
    --default-dark-theme-color: #DEDAD6;
    --default-chartjs-color: #666666;
    --default-chartjs-dark-theme-color: #999999;
    --disabled: #e9ecef; /* Disabled */
    --highlight: #77bdff; /* Highlight */
    --highlight-darker: #3291ff; /* Highlight darker */
    --highlight-alt: #e9ecef; /* Highlight alt */
    --highlight-alt-darker: #ced4da; /* Highlight alt darker */
    --subtle-bg: #f1f3f5; /* Subtle background (hover/idle surfaces) */
    --muted-text: #868e96; /* Muted secondary text */
    --muted-icon: #adb5bd; /* Muted icon/placeholder */
    --custom-success: #0DC800; /* Green */
    --a: #0366d6; /* Blue */
    --a-hover: #0056B3; /* Blue */
    --primary-outline: #007BFF; /* Bootstrap primary (outline) */
    --primary-outline-rgb: 0, 123, 255;
    --primary: #1b6ec2; /* Bootstrap primary */
    --primary-rgb: 27, 110, 194;
    --secondary: #6c757d; /* Bootstrap secondary */
    --secondary-rgb: 108, 117, 125;
    --warning: #FFC107; /* Bootstrap warning */
    --warning-rgb: 255, 193, 7;
    --danger: #dc3545; /* Bootstrap danger */
    --danger-rgb: 220, 53, 69;
    --success: #28A745; /* Bootstrap success */
    --success-rgb: 40, 167, 69;
    --dark: #343A40; /* Bootstrap dark */
    --dark-rgb: 52, 58, 64;
    --on-light-color: #212529; /* Bootstrap body text - text color on light backgrounds (warning/light badges) */
    --info: #17a2b8; /* Bootstrap info */
    --info-rgb: 23, 162, 184;
    /* Pale variants (light background + matching darker foreground) of each Bootstrap color - reuse these for any
       badge/tag/pill needing a soft color-coded look instead of hardcoding new colors. */
    --primary-pale-bg: #e7f1ff;
    --primary-pale-color: #1b6ec2;
    --secondary-pale-bg: #eef0f1;
    --secondary-pale-color: #565e64;
    --success-pale-bg: #e6f7ec;
    --success-pale-color: #1e7e37;
    --warning-pale-bg: #fff6e0;
    --warning-pale-color: #9c7405;
    --danger-pale-bg: #fbe9eb;
    --danger-pale-color: #b02a37;
    --dark-pale-bg: #e9ecef;
    --dark-pale-color: #343a40;
    --info-pale-bg: #e3f7fa;
    --info-pale-color: #0f7c8c;
    --success-card-bg: #eefbf2;
    --success-card-border: #d3f2de;
    --warning-card-bg: #fff9ec;
    --warning-card-border: #fbeecb;
    --danger-card-bg: #fdf0f0;
    --danger-card-border: #f6d7d7;
    --surface: #fff; /* Page/card/input surface */
    --surface-subtle: #f8f9fa; /* Slightly off-surface (chips, sidebar footer) */
    --on-primary: #fff; /* Text on a saturated (primary) background */
    --text-secondary: #495057; /* Secondary body text */
    --border-color: #dee2e6; /* Standard border */
    --border-light: #e5e5e5; /* Light divider (.border-top/.border-bottom) */
    --border-faint: #edf0f2; /* Faint card border */
    --border-sidebar: #e1e1e1; /* Sidebar edge */
    --primary-border: #1861ac; /* Border of a primary-filled element */
    --blue-pale-bg: #dbeafe;
    --blue-pale-color: #1e40af;
    --purple-pale-bg: #ede9fe;
    --purple-pale-color: #6b21a8;
    --purple: #7e57c2;
    --primary-soft-bg: #e0edff;
    --primary-bright: #0d6efd;
    --warning-strong-color: #a9710a;
    --warning-dark-color: #92720d;
    --warning-amber-color: #92400e;
    --border-muted: #ddd;
    --ink: #000; /* Pure black text on a surface */
    --paper: #fff; /* A sheet of paper (signature area) - stays white in every theme */
    --theme: white;
    --theme-rgb: 255, 255, 255;
    --theme-navbar-text: black;
    --theme-navbar-text-rgb: 0, 0, 0;
    --button-option-bg-color: black;
    --button-option-text-color: white;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    overflow: auto !important;
}

/* Drawing surfaces that represent a sheet of paper stay white in every theme. */
.paper {
    background-color: var(--paper);
}

main {
    flex: 1; /* Makes the main content grow to fill available space */
}
.sidebar-closed + .content-area.is-authenticated,
.content-area.is-authenticated.sidebar-closed {
    margin-left: 72px;
}
.content-area.is-authenticated {
    margin-left: 72px;
}
@media (min-width: 768px) {
    .content-area.is-authenticated {
        margin-left: 250px;
    }
}

.content-area {
    transition: margin-left 0.3s ease;
    height: 100vh; /* ensure it fills viewport height */
    overflow-y: auto; /* only the article scrolls */
}

footer {
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Topbar */
.profile-btn-square {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    margin-top: auto;
    border-left: var(--border-sidebar) 1px solid;
    background: var(--surface-subtle);
}

.profile-square-btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--highlight-alt);
    color: var(--dark) !important;
    font-weight: 500;
    border: 1px solid var(--border-color);
    box-shadow: none;
    transition: background 0.2s, color 0.2s;
    outline: none;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

    .profile-square-btn:hover, .profile-square-btn:focus {
        background: var(--border-color);
        color: var(--default-color) !important;
        text-decoration: none;
    }

    .profile-square-btn:active {
        background: var(--highlight-alt-darker);
        color: var(--default-color) !important;
    }

.topbar-link {
    display: flex;
    color: rgba(var(--theme-navbar-text-rgb), 0.65) !important;
    justify-items: center;
    align-items: center;
    height: 100%;
    border-radius: 0;
}
    .topbar-link:hover {
        text-decoration: none;
        color: var(--theme-navbar-text) !important;
    }

/* Header */
header {
    background-color: rgb(var(--theme-rgb), 0.85);
    transition: background-color 0.3s ease;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    white-space: nowrap;
    text-align: center;
}

.brand-name {
    color: var(--brand-theme);
}
    .brand-name:hover {
        color: var(--brand-theme);
    }

.brand-name.dark-theme {
    color: var(--brand-dark-theme);
}
    .brand-name.dark-theme:hover {
        color: var(--brand-dark-theme);
    }

.logo-brand-container {
    height: 80px;
}

.logo-brand {
    height: 60px;
}

.sticky-top {
    z-index: 999 !important;
}

a {
    color: var(--a);
}
    a.disabled {
        pointer-events: none;
        color: inherit;
    }

.nav-item {
    position: relative;
    list-style-type:none;
    width: fit-content;
}
nav > ul{
    padding: 0;
    margin: 0;
}


.nav-link {
    color: rgba(var(--theme-navbar-text-rgb), 0.65) !important;
}
.nav-link:hover {
    color: var(--theme-navbar-text) !important;
}

.custom-link-container:hover span {
    text-decoration: underline;
}

.btn-primary {
    color: var(--on-primary);
    background-color: var(--primary);
    border-color: var(--primary-border);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--on-primary);
    background-color: var(--primary);
    border-color: var(--primary-border);
}

.border-top {
    border-top: 1px solid var(--border-light);
}

.border-bottom {
    border-bottom: 1px solid var(--border-light);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Bootstrap overrides */
.fa-stack {
    min-width: 2.5rem;
}

.gap-1 {
    gap: 0.25rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-3 {
    gap: 1rem;
}
.gap-4 {
    gap: 1.5rem;
}
.gap-5 {
    gap: 3rem;
}
@media (min-width: 576px) {
    .gap-sm-1 {
        gap: 0.25rem;
    }
    .gap-sm-2 {
        gap: 0.5rem;
    }
    .gap-sm-3 {
        gap: 1rem;
    }
    .gap-sm-4 {
        gap: 1.5rem;
    }
    .gap-sm-5 {
        gap: 3rem;
    }
}
@media (min-width: 768px) {
    .gap-md-1 {
        gap: 0.25rem;
    }
    .gap-md-2 {
        gap: 0.5rem;
    }
    .gap-md-3 {
        gap: 1rem;
    }
    .gap-md-4 {
        gap: 1.5rem;
    }
    .gap-md-5 {
        gap: 3rem;
    }
}
@media (min-width: 992px) {
    .gap-lg-1 {
        gap: 0.25rem;
    }
    .gap-lg-2 {
        gap: 0.5rem;
    }
    .gap-lg-3 {
        gap: 1rem;
    }
    .gap-lg-4 {
        gap: 1.5rem;
    }
    .gap-lg-5 {
        gap: 3rem;
    }
}
@media (min-width: 1200px) {
    .gap-xl-1 {
        gap: 0.25rem;
    }
    .gap-xl-2 {
        gap: 0.5rem;
    }
    .gap-xl-3 {
        gap: 1rem;
    }
    .gap-xl-4 {
        gap: 1.5rem;
    }
    .gap-xl-5 {
        gap: 3rem;
    }
}

.btn:not(.btn-sm) {
    width: 10rem;
}

.btn-sm {
    min-width: 34px;
}

.btn-large {
    width: var(--btn-large-width) !important;
}

/* The preview of a Markdown file: the text as a page, in a box that scrolls like the one of a PDF. */
.markdown-preview-target {
    max-height: 600px;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background-color: var(--surface);
    color: inherit;
    overflow-wrap: anywhere;
}

    /* The same text inline in a page (the passages of the knowledge base shown under a question): a short box, in the page's own colors. */
    .markdown-preview-target.is-inline {
        background-color: transparent;
        font-size: 0.875rem;
        max-height: 10rem;
        padding: 0.25rem 0 0;
    }

        .markdown-preview-target.is-inline h1,
        .markdown-preview-target.is-inline h2,
        .markdown-preview-target.is-inline h3 {
            font-size: 0.95rem;
            font-weight: 600;
            margin: 0.5rem 0 0.25rem;
        }

        .markdown-preview-target.is-inline p {
            margin-bottom: 0.4rem;
        }

    .markdown-preview-target h1 {
        font-size: 1.5rem;
    }

    .markdown-preview-target h2 {
        font-size: 1.25rem;
        margin-top: 1.25rem;
    }

    .markdown-preview-target h3 {
        font-size: 1.05rem;
        margin-top: 1rem;
    }

    .markdown-preview-target > :last-child {
        margin-bottom: 0;
    }

    .markdown-preview-target pre,
    .markdown-preview-target code {
        background-color: var(--subtle-bg);
        border-radius: 0.25rem;
    }

    .markdown-preview-target pre {
        padding: 0.5rem 0.75rem;
    }

    .markdown-preview-target table {
        border-collapse: collapse;
    }

    .markdown-preview-target th,
    .markdown-preview-target td {
        border: 1px solid var(--border-color);
        padding: 0.25rem 0.5rem;
    }

.btn-x-large {
    width: 19.5rem !important;
}

.app-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 4px 10px;
    border-radius: 0.25rem;
    color: var(--on-primary);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}
    .app-badge-pill { border-radius: 12px; }
    .app-badge-lg { font-size: 0.9rem; padding: 0.5em 0.9em; }
    .app-badge-primary { background-color: var(--primary-outline); }
    .app-badge-secondary { background-color: var(--secondary); }
    .app-badge-success { background-color: var(--success); }
    .app-badge-danger { background-color: var(--danger); }
    .app-badge-info { background-color: var(--info); }
    .app-badge-dark { background-color: var(--dark); }
    .app-badge-warning { background-color: var(--warning); color: var(--on-light-color); }
    .app-badge-light { background-color: var(--light); color: var(--on-light-color); }

/* Retour/Aperçu/Télécharger (_ModalGuide.cshtml) : même largeur malgré des libellés de longueur différente d'une langue à l'autre. */
.guide-action-btn {
    min-width: 7.5rem;
}

.legend-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
}

.legend-item {
    display: inline-flex;
    align-items: baseline;
}

.legend-swatch {
    flex-shrink: 0;
    width: 0.7em;
    height: 0.7em;
    margin-right: 0.4em;
    border-radius: 2px;
}
    .legend-swatch-primary { background-color: var(--primary); }
    .legend-swatch-secondary { background-color: var(--secondary); }
    .legend-swatch-success { background-color: var(--success); }
    .legend-swatch-danger { background-color: var(--danger); }
    .legend-swatch-warning { background-color: var(--warning); }
    .legend-swatch-info { background-color: var(--info); }

.badge-large {
    width: 2.5rem;
}

button.disabled {
    pointer-events: none;
}

[data-toggle="tooltip"] {
    cursor: pointer;
}

.info-icon {
    cursor: pointer;
    color: var(--a);
}

/* Forms */
.form-control {
    height: 38px;
}

textarea:not([type="search"]) {
    min-height: 76px;
    height: auto;
    overflow: hidden;
    resize: none;
}

.checkbox-icon,
.radio-button-icon {
    transition: opacity 0.4s ease;
}

.checkbox-icon {
    font-size: 1.5rem;
}

/* Select2 overrides */
.select2-container.select2-container--disabled .select2-selection--single {
    color: var(--text-secondary) !important;
    background-color: var(--disabled) !important;
}

.select2-sm + .select2-container .select2-selection__rendered {
    font-size: 0.875rem;
}

.select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
}
.select2-sm + .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 29px !important;
}

.select2-selection--multiple .select2-selection__rendered {
    line-height: 24px !important;
}
.select2-sm + .select2-container .select2-selection--multiple .select2-selection__rendered {
    line-height: 19px !important;
}


.select2-selection {
    min-height: 38px !important;
    border-color: var(--highlight-alt-darker) !important;
}
.select2-sm + .select2-container .select2-selection {
    min-height: 31px !important;
}

.select2-selection__arrow {
    height: 37px !important;
}
.select2-sm + .select2-container .select2-selection__arrow {
    height: 30px !important;
}

/* Select2 inside a Bootstrap input-group: select2 replaces the <select> with a sibling .select2-container element,
   which Bootstrap's own input-group CSS (.input-group > .form-control:not(:first-child), etc.) doesn't target
   since it isn't a .form-control. Re-applies the same flush corner-joining + border-collapse behavior. */
.input-group > .select2-container:not(:first-child) .select2-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}
.input-group > .select2-container:not(:last-child) .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Readonly */
.select2-readonly + .select2-container .select2-selection--single, select[readonly] + .select2-container .select2-selection--single {
    background-color: var(--disabled) !important;
    cursor: default;
}

.select2-readonly + .select2-container .select2-selection__arrow, select[readonly] + .select2-container .select2-selection__arrow {
    display: none;
}

/* Addon */
/* Select2 styled like a Bootstrap .input-group-text addon (ex. sélecteur d'unité kg/lb) plutôt qu'un input actif,
   tout en restant pleinement interactif — contrairement à .select2-readonly, la flèche reste visible. */
.select2-addon + .select2-container .select2-selection--single {
    background-color: var(--disabled) !important;
}

/* Datetime picker */
.datepicker, .input-group-append {
    cursor: pointer;
}
.flatpickr-input[readonly] {
    pointer-events: none;
}

/* Animations */
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-in-animation {
    animation: fade-in 2s linear forwards;
}

@keyframes pop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.pop-animation {
    animation: pop 1.5s ease forwards;
}

/* A message reached through a link (#comment-123): its box (avatar and bubbles, as wide as the message) is what is scrolled to, kept clear of the two sticky headers (the second selector beats
   the generic scroll margin of a highlighted element), and highlighted: the padding is the margin the highlight keeps around the avatar and the bubbles. */
.thread-row-content,
.thread-row-content.highlight-animation {
    scroll-margin-top: calc(var(--app-header-height, 4rem) + 7rem);
}

.thread-row-content.highlight-animation::before {
    border-radius: 0.75rem;
    bottom: -0.5rem;
    top: -0.25rem;
}

@keyframes highlighting {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 0;
    }
}

.highlight-animation,
.highlight-animation-danger,
.ticket-panel,
#js-alert {
    scroll-margin-top: 4rem;
}

.highlight-animation {
    background-color: transparent;
    position: relative;
}

    .highlight-animation::before {
        pointer-events: none;
        z-index: 5;
        opacity: 0;
        content: '';
        background-color: var(--ink);
        position: absolute;
        top: -0.75rem;
        left: 0;
        right: 0;
        bottom: -0.75rem;
        border-radius: 0.25rem;
        animation: highlighting 4s ease;
    }

/* The highlight reaches 0.75rem beyond the element on the sides too (by default only above and below), for a field that should be framed all around,
   with the corner radius of the element (--highlight-radius) plus that distance, so that the gap to the element is the same everywhere. */
.highlight-animation.highlight-wide::before {
    border-radius: calc(var(--highlight-radius, 0.25rem) + 0.75rem);
    left: -0.75rem;
    right: -0.75rem;
}

.highlight-animation-danger {
    background-color: transparent;
    position: relative;
}

    .highlight-animation-danger::before {
        pointer-events: none;
        z-index: 5;
        opacity: 0;
        content: '';
        background-color: red;
        position: absolute;
        top: -0.75rem;
        left: 0;
        right: 0;
        bottom: -0.75rem;
        border-radius: 0.25rem;
        animation: highlighting 4s ease;
    }

.animation-left-to-right {
    animation: moveLeftToRight 1s ease-in-out infinite;
}

@keyframes moveLeftToRight {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

.animation-right-to-left {
    animation: moveRightToLeft 1s ease-in-out infinite;
}

@keyframes moveRightToLeft {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

.animation-up-to-down {
    animation: moveUpToDown 1s ease-in-out infinite;
}

@keyframes moveUpToDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

.animation-down-to-up {
    animation: moveDownToUp 1s ease-in-out infinite;
}

@keyframes moveDownToUp {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Navbar */
.nav-link.active {
    color: var(--theme-navbar-text) !important;
    font-weight: bold;
}

.nav-link-locked {
    display: block;
    opacity: 0.5;
    cursor: not-allowed;
}
.nav-link-locked.access-requirement-trigger {
    cursor: pointer;
}
/* A menu item the user lacks the role for: it looks disabled (as .dropdown-item.disabled would) but stays clickable, since it opens the access requirements modal. */
.dropdown-item.access-requirement-trigger {
    color: var(--muted-text);
    opacity: 0.6;
    cursor: pointer;
    background-color: transparent;
}
/* The pill of a page sits on the top left corner of the page, over the space above its content, so it adds no margin or padding of its own. */
.page-access-requirement {
    position: absolute;
    top: 0.85rem; /* the top border of the card of a page (container-fluid mt-4, 1.5rem down) runs through the middle of the pills */
    left: 0.5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* The access pill comes in a span: as a flex container it has no text line below the pill, so both pills of the page sit on the same line. */
.page-access-requirement > span {
    display: flex;
}
/* The locked entries that open the access requirements modal (menu items, navbar links) look disabled but are clickable: on hover they come back to nearly full strength with the tint of a regular entry, and the ring of a click is kept for the keyboard only. */
.dropdown-item.access-requirement-trigger:hover,
.nav-link-locked.access-requirement-trigger:hover {
    opacity: 0.9;
    background-color: rgba(var(--theme-navbar-text-rgb), 0.05);
}

.nav-link-locked.access-requirement-trigger:hover {
    box-shadow: inset 4px 0 0 rgba(var(--theme-navbar-text-rgb), 0.3);
}

.dropdown-item.access-requirement-trigger:focus:not(:focus-visible),
.nav-link-locked.access-requirement-trigger:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* On hover, the lock (or the shield of the pill) turns into a question mark: the same cue everywhere that clicking explains what gives access. */
.access-requirement-trigger:hover .fa-lock::before,
.access-requirement-trigger:hover .fa-user-shield::before {
    content: "\f059";
}

/* On hover, the closed book of the guide pill opens: the same kind of cue as the access pill above. */
.guide-trigger:hover .fa-book::before {
    content: "\f518";
}

/* The access pill and the guide pill are buttons: a pointer and a small lift on hover say they can be clicked, and the ring Bootstrap draws after a click is kept for the keyboard only. */
.app-badge.access-requirement-trigger,
.app-badge.guide-trigger,
.app-badge.guide-add-trigger {
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.app-badge.access-requirement-trigger:hover,
.app-badge.guide-trigger:hover,
.app-badge.guide-add-trigger:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(var(--theme-navbar-text-rgb), 0.25);
}

.app-badge.access-requirement-trigger:focus:not(:focus-visible),
.app-badge.guide-trigger:focus:not(:focus-visible),
.app-badge.guide-add-trigger:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.access-requirement-corner {
    position: absolute;
    top: -16px;
    right: -6px;
    z-index: 2;
}
.nav-link-locked:hover {
    color: rgba(var(--theme-navbar-text-rgb), 0.65) !important;
}
.nav-link-locked .nav-link-lock-icon {
    width: auto;
    margin-left: 0.25rem;
    font-size: 0.75em;
}

@media (min-width: 992px) { /* Bootstrap lg breakpoint is 992px */
    .ml-nav-link-negative {
        margin-left: 0;
    }
}

.navbar-alert-banner {
    border-radius: 0;
}

.sticky-header-section {
    transition: background-color 0.3s ease;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: transparent;
}

.custom-success {
    color: var(--custom-success);
}

/* Cards */
.card-title {
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: bold;
    justify-content: center;
}

.card-container > img {
    height: 72px;
}

.card-container > i {
    font-size: 50px;
}

.card-container {
    background-color: var(--surface);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
    color: var(--ink);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

    .card-container:hover {
        text-decoration: none;
    }

/* DataTable */
table:not(.table-sm) > thead, #data-table_wrapper .dt-scroll-head {
    z-index: 3;
    position: sticky !important;
    top: 0px;
    transition: top 0.3s ease;
    background: var(--surface);
}

#data-table_processing {
    left: calc(50% - 100px) !important;
    position: sticky !important;
    color: var(--ink);
    z-index: 5;
}

#data-table_processing {
    background-color: var(--theme);
}
    #data-table_processing > div > div {
        background-color: var(--theme-navbar-text);
    }

td > p {
    margin: 0;
}

td, th {
    vertical-align: middle !important;
}

tr {
    transition: background-color 0.3s ease;
}
    tbody tr:not(.disabled-row):hover {
        background-color: var(--highlight) !important
    }

/* The previous and the next ticket on each side of the place of the ticket in its list. Wide: the two blocks have the same width around the position. A large phone: one line per block (number,
   title, status). A phone: number only, the rest in the tooltip (the title, the status and the date do not fit); the blocks stay in one row and keep a height a finger can hit. */
.ticket-navigator {
    align-items: stretch;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.ticket-navigator-item {
    align-items: center;
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: inherit;
    display: flex;
    gap: 0.75rem;
    min-height: 2.75rem;
    min-width: 0;
    padding: 0.4rem 0.75rem;
}

    a.ticket-navigator-item:hover {
        background-color: var(--highlight-alt);
        color: inherit;
        text-decoration: none;
    }

    .ticket-navigator-item.is-next {
        justify-content: flex-end;
        text-align: right;
    }

    .ticket-navigator-item.is-empty {
        border-style: dashed;
        color: var(--muted-text);
    }

.ticket-navigator-text {
    min-width: 0;
}

.ticket-navigator-position {
    align-self: center;
    min-width: 5rem;
    text-align: center;
    white-space: nowrap;
}

.ticket-list .list-group-item.active {
    background-color: var(--highlight);
    border-color: var(--highlight);
    color: var(--dark);
}

@media (max-width: 575.98px) {
    .ticket-navigator {
        gap: 0.4rem;
    }

    .ticket-navigator-item {
        gap: 0.4rem;
        justify-content: center;
        padding: 0.4rem 0.5rem;
    }

    .ticket-navigator-position {
        min-width: 3.5rem;
    }
}

.dt-paging {
    margin-top: 1rem!important;
    display: flex;
    justify-content: end;
}

.tr-select:hover {
    cursor: pointer;
}

table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before {
    content: "" !important;
    font-family: FontAwesome;
    opacity: 1 !important;
    line-height: 4px !important;
}

table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after {
    content: "\e4af" !important; /* unsorted */
    opacity: 0.125 !important;
}

table.dataTable thead > tr > th.dt-orderable-desc.dt-ordering-asc span.dt-column-order:after {
    content: "\f160" !important; /* sorted ascending */
    opacity: 1 !important;
}

table.dataTable thead > tr > th.dt-orderable-desc.dt-ordering-desc span.dt-column-order:after {
    content: "\f161" !important; /* sorted descending */
    opacity: 1 !important;
}

.dt-scroll-body {
    min-height: 200px;
}

/* Accordion */
.accordion-list {
    list-style: none;
}

.accordion-list, .accordion-container {
    padding: 0;
}

.custom-list {
    padding: 0;
    padding-left: 1rem;
}

.accordion-element, .accordion-button {
    padding: 1rem;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.accordion-button {
    background: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease-out;
}

    .accordion-button:hover {
        background-color: var(--highlight-alt);
        cursor: pointer;
    }

/* Compact variant of the accordion: a list of items (questions, ...) that open inline, instead of big section headers. Same markup and same initAccordionList()
   as the default one, with .accordion-compact on the button:
     <div class="accordion-compact-list">
       <div class="accordion-compact-item">
         <button class="accordion-button accordion-compact" data-toggle="collapse" data-target="#x" data-parent="#list"><span class="accordion-compact-title">...</span><i class="fa-solid fa-chevron-down rotate"></i></button>
         <div id="x" class="collapse accordion-container accordion-compact-body" data-parent="#list"><div class="accordion-element">...</div></div>
       </div>
     </div>
   (data-parent is optional: with it, one item is open at a time.) */
.accordion-compact-item {
    border-bottom: 1px solid var(--border-color);
    scroll-margin-top: 4rem;
}

    .accordion-compact-item:last-child {
        border-bottom: 0;
    }

.accordion-button.accordion-compact {
    border-bottom: 0;
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
    gap: 0.75rem;
    padding: 0.85rem 0.5rem;
    text-align: left;
}

    .accordion-button.accordion-compact:focus {
        box-shadow: inset 0 0 0 0.15rem rgba(var(--primary-rgb), 0.2);
    }

    .accordion-compact .rotate {
        color: var(--text-secondary);
        flex-shrink: 0;
        font-size: 0.8rem;
    }

.accordion-compact-title {
    flex: 1 1 auto;
    min-width: 0;
}

    .accordion-compact-title p {
        display: inline;
        margin: 0;
    }

.accordion-compact-body .accordion-element {
    border: 0;
    border-left: 3px solid var(--primary-outline);
    margin: 0 0.5rem 1rem;
    padding: 0.25rem 0.5rem 0.25rem 1rem;
}

/* A clickable badge/pill acting as a selectable option (e.g. a category or type picker). Hover reuses the same
   subtle highlight as .accordion-button:hover above; .selected uses the next shade down instead, so a plain
   mouseover on a different option never looks identical to the actual selection. */
.selectable-badge {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .selectable-badge:hover {
        background-color: var(--highlight-alt);
    }

    .selectable-badge.selected {
        background-color: var(--highlight-alt-darker);
    }

    /* .selected and :hover are both two-class-equivalent selectors -- without this, whichever one happens to be
       declared last in the stylesheet always wins the specificity tie, silencing the other entirely rather than
       genuinely overriding it. This three-part selector settles it deterministically: hovering an already-selected
       badge still shows hover feedback instead of looking inert. */
    .selectable-badge.selected:hover {
        background-color: var(--highlight-alt);
    }

    .accordion-button:focus {
        outline: none;
    }

/* Comments */
.comment-container {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    color: var(--on-light-color);
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    font-weight: normal;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: left;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: normal;
    width: fit-content;
    max-width: 80%;
    margin-bottom: 1rem;
}

    .comment-container p:last-child,
    .comment-container p:last-of-type {
        margin-bottom: 0;
    }

    .comment-container pre {
        overflow: visible;
        word-break: break-word;
    }

    .comment-container.is-customer {
        background-color: var(--primary-pale-bg);
        border-color: rgba(var(--primary-rgb), 0.35);
    }

    .comment-container.is-agent {
        background-color: var(--secondary-pale-bg);
        border-color: rgba(var(--secondary-rgb), 0.35);
    }

    .comment-container.is-internal {
        background-color: var(--warning-pale-bg);
        border-color: rgba(var(--warning-rgb), 0.5);
    }

/* Conversation thread (chat-like view of a ticket, admin and customer) */
.thread {
    display: flex;
    flex-direction: column;
}

.thread-scroll {
    max-height: calc(100vh - 24rem);
    min-height: 14rem;
    overflow-y: auto;
    padding: 0.25rem 1rem;
}

.thread-date-separator,
.thread-new-divider {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 0.75rem;
    letter-spacing: 0.03em;
    margin: 1.25rem 0 0.5rem;
    text-transform: uppercase;
}

    .thread-date-separator::before,
    .thread-date-separator::after,
    .thread-new-divider::before,
    .thread-new-divider::after {
        border-top: 1px solid var(--border-color);
        content: '';
        flex: 1 1 auto;
    }

.thread-new-divider {
    color: var(--danger);
}

    .thread-new-divider::before,
    .thread-new-divider::after {
        border-top-color: var(--danger);
    }

.thread-event {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0.75rem 0;
    text-align: center;
}

.thread-row {
    align-items: flex-end;
    display: flex;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

    .thread-row.is-group-start {
        margin-top: 0.85rem;
    }

    .thread-row.is-own {
        flex-direction: row-reverse;
    }

/* The avatar and the bubbles in a box as wide as the message (not the whole row), so the highlight of a message covers it and nothing more. Its padding is the margin the highlight keeps:
   a little around the avatar (0.5rem) and more on the side of the bubbles (1rem), the other way round for the messages of the other side; the negative margin cancels the padding. */
.thread-row-content {
    align-items: flex-end;
    display: flex;
    gap: 0.5rem;
    margin: 0 -1rem 0 -0.5rem;
    max-width: 100%;
    min-width: 0;
    padding: 0 1rem 0 0.5rem;
}

.thread-row.is-own .thread-row-content {
    flex-direction: row-reverse;
    margin: 0 -0.5rem 0 -1rem;
    max-width: 95%;
    padding: 0 0.5rem 0 1rem;
}

.thread-bubble-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.thread-row.is-own .thread-bubble-column {
    align-items: flex-end;
}

.thread-sender {
    font-size: 0.75rem;
    margin: 0 0.5rem 0.2rem;
}

.thread .comment-container {
    margin-bottom: 0;
    max-width: 100%;
}

.thread-time {
    font-size: 0.7rem;
    text-align: right;
}

.thread-avatar,
.thread-avatar-spacer {
    flex: 0 0 2rem;
    height: 2rem;
    width: 2rem;
}

.thread-avatar {
    align-items: center;
    border-radius: 50%;
    color: var(--on-primary);
    display: flex;
    font-size: 0.72rem;
    font-weight: 600;
    justify-content: center;
    user-select: none;
}

.avatar-color-0 { background-color: var(--primary); }
.avatar-color-1 { background-color: var(--info); }
.avatar-color-2 { background-color: var(--success); }
.avatar-color-3 { background-color: var(--secondary); }
.avatar-color-4 { background-color: var(--danger); }
.avatar-color-5 { background-color: var(--dark); }

.ticket-stepper {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.ticket-step {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: 0.85rem;
    gap: 0.4rem;
    white-space: nowrap;
}

.ticket-step-dot {
    align-items: center;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    font-size: 0.6rem;
    height: 1.25rem;
    justify-content: center;
    width: 1.25rem;
}

    .ticket-step.is-done .ticket-step-dot {
        background-color: var(--success);
        border-color: var(--success);
        color: var(--on-primary);
    }

    .ticket-step.is-current {
        color: var(--on-light-color);
        font-weight: 600;
    }

    .ticket-step.is-current .ticket-step-dot {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--on-primary);
    }

.ticket-step-line {
    background-color: var(--border-color);
    flex: 1 1 1rem;
    height: 2px;
    min-width: 1rem;
}

    .ticket-step-line.is-done {
        background-color: var(--success);
    }

@media (max-width: 575.98px) {
    .ticket-step:not(.is-label-shown) .ticket-step-label {
        display: none;
    }

    .ticket-step-line {
        min-width: 0.5rem;
    }
}

.chat-composer {
    --highlight-radius: 1.5rem;
    align-items: flex-end;
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    display: flex;
    gap: 0.25rem;
    padding: 0.3rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .chat-composer:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 0.15rem rgba(var(--primary-rgb), 0.2);
    }

    /* A file dragged over the box: the same dashed frame as the composer of the agents (.ticket-composer.highlight). */
    .chat-composer.highlight {
        border-color: var(--primary);
        outline: 2px dashed var(--primary-outline);
        outline-offset: 2px;
    }

    .chat-composer textarea.form-control {
        background: none;
        border: 0;
        box-shadow: none;
        flex: 1 1 auto;
        line-height: 1.5rem;
        max-height: 9rem;
        min-height: 2.2rem;
        overflow-y: auto;
        padding: 0.35rem 0.4rem;
        resize: none;
    }

.chat-composer-btn {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex: 0 0 2.2rem;
    height: 2.2rem;
    justify-content: center;
    padding: 0;
    width: 2.2rem !important;
}

    .chat-composer-btn:hover {
        background-color: var(--highlight);
    }

    .chat-composer .select-file-btn {
    align-self: flex-start;
}

    .chat-composer-btn.is-send {
        background-color: var(--primary);
        color: var(--on-primary);
    }

        .chat-composer-btn.is-send:hover {
            background-color: var(--primary-outline);
        }

.chat-composer-sticky {
    background-color: var(--surface);
    bottom: 0;
    padding: 0.75rem 0 0.25rem;
    position: sticky;
    z-index: 4;
}

.history-scroll {
    max-height: 28rem;
    overflow-y: auto;
}

.thread-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.thread-row.is-own .thread-feedback {
    justify-content: flex-end;
}

.btn-rate-comment {
    color: var(--muted-text);
    background: transparent;
    padding: 0 0.4rem;
}

/* The ring Bootstrap draws on a button that was just clicked is for the keyboard only: the selected state already shows the vote. */
.btn-rate-comment:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.btn-rate-comment:hover {
    color: var(--primary);
}

.btn-rate-comment.is-selected[data-is-positive="true"] {
    color: var(--success);
}

.btn-rate-comment.is-selected[data-is-positive="false"] {
    color: var(--danger);
}

.thread-feedback.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.history-timeline {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0 0;
}

.history-entry {
    position: relative;
    padding: 0 0 1.25rem 1.5rem;
    border-left: 2px solid var(--highlight-alt-darker);
    margin-left: 6px;
}

.history-entry:last-child {
    padding-bottom: 0.5rem;
}

.history-entry::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--secondary);
}

.history-now {
    padding-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--secondary);
}

.history-now::before {
    background-color: var(--surface);
    border: 2px solid var(--secondary);
}

.history-change-list {
    margin-top: 0.35rem;
}

.history-change {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.history-old-value .app-badge,
.history-old-value .font-weight-bold {
    opacity: 0.65;
    font-weight: normal !important;
}

#form > #validation-summary > ul {
    margin-bottom: 0;
}

#form > #validation-summary li:not([style*="display:none"]):not([style*="display: none"]):last-child {
    margin-bottom: 1rem;
}

.ticket-conversation-header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: var(--app-header-height, 4rem);
    z-index: 5;
}

.ticket-composer {
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    padding-top: 0.75rem;
}

    .ticket-composer.is-note {
        background-color: var(--warning-pale-bg);
        border-radius: 0.5rem;
        border-top-color: transparent;
        padding: 0.75rem;
    }

    .ticket-composer.highlight {
        outline: 2px dashed var(--primary-outline);
        outline-offset: 2px;
    }

.waiting-since {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Coloris */
.clr-field {
    display: block!important;
}

/* Others */
.red {
    color: var(--danger) !important;
}

.bold-red {
    color: var(--danger) !important;
    font-weight: bold !important;
}

.no-resize {
    resize: none;
}

.shadow {
    box-shadow: 0 0 12px 0 black !important;
}

.shadow-hover {
    transition: all 0.3s ease-out;
}

    .shadow-hover:hover {
        position: relative;
        z-index: 10;
        box-shadow: 0 0 12px 0 black;
    }

.scale-hover {
    transition: all 0.3s ease;
}

.scale-hover:hover {
    position: relative;
    z-index: 10;
    transform: scale(1.05);
}

.clearable-badge {
    cursor: pointer;
    background-color: var(--button-option-bg-color);
    color: var(--button-option-text-color);
    padding: 8px 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--button-option-bg-color);
    border-radius: 9999px;
    transition: all 0.3s ease;
}

    .clearable-badge:hover {
        color: var(--button-option-bg-color);
        background-color: var(--surface);
    }

.info-pill {
    cursor: default;
    font-weight: bold;
    border-radius: 9999px;
    background-color: var(--button-option-bg-color);
    color: var(--button-option-text-color);
    padding: 8px 10px;
    text-wrap: nowrap;
}

.flip {
    transition: transform 0.3s ease;
}

.flipped {
    transform: scaleX(-1) scaleY(-1);
}

.rotate {
    transition: transform 0.3s ease;
}

.rotated {
    transform: rotate(-180deg);
}

.lock-timeout-overlay {
    background-color: transparent;
    position: relative;
}

    .lock-timeout-overlay::before {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        font-family: 'Rubik', sans-serif;
        font-weight: bolder;
        color: var(--button-option-text-color);
        z-index: 5;
        cursor: not-allowed;
        opacity: var(--opacity);
        content: var(--timeout);
        background-color: var(--button-option-bg-color);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0.25rem;
        transition: opacity 1s ease-out;
    }

#loading-spinner {
    font-size: 80px;
    color: white;
}

.highlight {
    background-color: var(--highlight) !important;
}

.dropdown-item > i, .dropdown-item > img,
.nav-link > i,
.topbar-link > i {
    display: inline-block;
    text-align: center;
    width: 2rem;
}
.nav-item-centered {
    padding:0;
    align-self: center;
}

[role="button"] {
    cursor: pointer;
}

.button-list-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    transition: opacity 1s ease;
}

#multi-action-container {
    opacity: 0;
}

.btn-indicator {
    display: inline-flex;
    min-width: 20px;
    padding: 4px;
    border-radius: 100%;
    font-weight: bold;
    background-color: var(--danger);
    color: var(--on-primary);
    font-size: 12px;
    line-height: 1;
    position: absolute;
    top: -8px;
    right: -8px;
    justify-content: center;
    align-items: center;
}

/* The count badge of the menus: the look of .app-badge.app-badge-pill.app-badge-danger (same size, weight and colors), placed by the menu. */
.navbar-indicator {
    display: flex;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    background-color: var(--danger);
    color: var(--on-primary);
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
    position: absolute;
    top: 0;
    right: -7px;
    justify-content: center;
    align-items: center;
}

/* Quick-filter pill button with a count badge (e.g. a row of "X to validate"/"Y expired" buttons above a
   DataTables list) - shared across modules, not tied to any one feature. Pair with a plain rounded-pill btn-sm
   btn-outline-* Bootstrap button; see PreEmployment/Index.cshtml or Simdut/Index.cshtml for markup. */
.indicator-pill {
    font-weight: 600;
    min-width: 14rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.indicator-pill .app-badge {
    font-size: 0.75rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .indicator-pill .app-badge {
        transition: none;
    }
}

/* Reverse-contrast the count badge on hover and while the pill is .active (the filter it drives is applied; animated with the same 0.15s ease-in-out as Bootstrap's .btn, so it
   changes in step with the button's own background): once the outline button's own hover state swaps its background to
   the theme color, a same-color badge would otherwise blend straight into it - so the badge flips the other way
   instead, using whichever text color Bootstrap's own .btn-outline-*:hover already picks for that color (dark
   text on the light warning background, white text on every other, darker one used here). Add a rule pair per
   btn-outline-badge-* color actually used by an .indicator-pill; specificity alone overrides badge-* without
   needing !important. */
.indicator-pill.btn-outline-warning:hover .app-badge,
.indicator-pill.btn-outline-warning.active .app-badge {
    background-color: var(--on-light-color);
    color: var(--warning);
}

.indicator-pill.btn-outline-dark:hover .app-badge,
.indicator-pill.btn-outline-dark.active .app-badge {
    background-color: var(--surface);
    color: var(--dark);
}

.indicator-pill.btn-outline-success:hover .app-badge,
.indicator-pill.btn-outline-success.active .app-badge {
    background-color: var(--surface);
    color: var(--success);
}

.indicator-pill.btn-outline-danger:hover .app-badge,
.indicator-pill.btn-outline-danger.active .app-badge {
    background-color: var(--surface);
    color: var(--danger);
}

.indicator-pill.btn-outline-secondary:hover .app-badge,
.indicator-pill.btn-outline-secondary.active .app-badge {
    background-color: var(--surface);
    color: var(--secondary);
}

.indicator-pill.btn-outline-info:hover .app-badge,
.indicator-pill.btn-outline-info.active .app-badge {
    background-color: var(--surface);
    color: var(--info);
}

.indicator-pill.btn-outline-primary:hover .app-badge,
.indicator-pill.btn-outline-primary.active .app-badge {
    background-color: var(--surface);
    color: var(--primary);
}

/* While the count is still loading (spinner inside the badge) the badge has no background of its own: only the number is
   badged. The box keeps its padding so the pill does not change size when the count arrives, and the spinner takes the
   button's own text color (kept after the hover/.active flips above, same specificity, so it wins on both). The spinner is
   1rem, the size of the one next to a document's status in the Documents list, in a box as tall as the loaded
   badge (.indicator-pill .app-badge font-size and line-height plus its 4px padding; the vertical padding makes up the
   difference) so the pill keeps its height. */
.indicator-pill.btn .app-badge:has(> .fa-spinner) {
    background-color: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding-top: calc((0.75rem * 1.2 + 8px - 1rem) / 2);
    padding-bottom: calc((0.75rem * 1.2 + 8px - 1rem) / 2);
}

/* Caret for a dropdown toggle (currently only the chip dropdown): @await Html.PartialAsync("~/Views/Shared/_DropdownCaret.cshtml", "fa-xs") as a direct
   child of the element carrying data-toggle="dropdown" (the model is the FontAwesome size class, never em/rem). The
   down and up carets are stacked in one grid cell and swap instantly while the menu is open (Bootstrap's dropdown JS keeps
   aria-expanded in sync on the toggle) - deliberately NOT a rotation: spinning an asymmetric font glyph drifts by a
   sub-pixel amount that changes with font size/zoom/screen density. The FA size classes shrink line-height to a
   sliver; it's put back to 1. The up caret sits ~0.125em higher inside its box than the down one (FA draws them
   mirrored, not recentered), hence the translateY that keeps both in the same vertical band. */
.dropdown-caret {
    display: inline-grid;
    place-items: center;
}

.dropdown-caret > i {
    grid-area: 1 / 1;
    line-height: 1;
    vertical-align: baseline;
}

.dropdown-caret > .fa-caret-up {
    opacity: 0;
    transform: translateY(0.125em);
}

[aria-expanded="true"] > .dropdown-caret > .fa-caret-down {
    opacity: 0;
}

[aria-expanded="true"] > .dropdown-caret > .fa-caret-up {
    opacity: 1;
}

/* Toggleable pill for a boolean filter (checkbox + label pair, checkbox stretched invisibly over the label so the
   whole pill is clickable). Markup: <div class="filter-chip"><input type="checkbox" id="x"><label for="x">...</label></div> */
.filter-chip {
    position: relative;
    display: inline-flex;
}

.filter-chip input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.filter-chip label,
.pill-tab,
.chip-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background-color: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filter-chip label {
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.filter-chip input[type="checkbox"]:checked ~ label {
    background-color: var(--primary-pale-bg);
    border-color: var(--primary-pale-color);
    color: var(--primary-pale-color);
}

.filter-chip input[type="checkbox"]:focus-visible ~ label {
    outline: 2px solid var(--primary-pale-color);
    outline-offset: 2px;
}

/* Same pill visual as .filter-chip label above, applied directly to a plain <a> instead of a checkbox+label pair
   -- these are mutually-exclusive tab links (Document/Validate's sidebar), not togglable filters, so there's no
   checkbox to key the selected state off; .active plays that role instead of :checked. */
.pill-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill-tab {
    text-decoration: none;
}

.pill-tab:hover {
    text-decoration: none;
    color: var(--text-secondary);
}

.pill-tab.active {
    background-color: var(--primary-pale-bg);
    border-color: var(--primary-pale-color);
    color: var(--primary-pale-color);
}

/* Dropdown (single choice) whose toggle reads as a .filter-chip pill instead of a select2 box. Markup in
   Views/Shared/_ChipDropdown.cshtml; the hidden input inside .chip-dropdown holds the value (see initChipDropdown
   in form-utils.js). Always shows the selected look since a choice is always made. */
.chip-dropdown-toggle {
    cursor: pointer;
    user-select: none;
    gap: 0.4rem;
    white-space: nowrap;
    background-color: var(--primary-pale-bg);
    border-color: var(--primary-pale-color);
    color: var(--primary-pale-color);
}

.chip-dropdown-toggle:focus {
    outline: 0;
}

.chip-dropdown-toggle:focus-visible {
    outline: 2px solid var(--primary-pale-color);
    outline-offset: 2px;
}

.chip-dropdown-toggle i {
    line-height: 1;
    position: relative;
    top: 1px;
}

.chip-dropdown-label {
    font-weight: 700;
}

.chip-dropdown {
    display: inline-block;
}

.chip-dropdown .dropdown-menu {
    min-width: 100%;
}

.chip-dropdown .dropdown-item.active {
    background-color: var(--primary-pale-bg);
    color: var(--primary-pale-color);
}

.toggle-show-password-btn {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0.75rem;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: gray;
}
.toggle-show-password-btn:hover {
    color: inherit;
}
.toggle-show-password-btn:focus {
    outline: none;
}

pre {
    white-space: pre-wrap;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.select-tab-container {
    display: flex;
}
    .select-tab-container > a,
    .select-tab-container > button {
        min-width: 192px;
    }

    .select-tab-container > a:first-child,
    .select-tab-container > button:first-child {
        border-radius: 0.2rem 0 0 0.2rem;
        border-right-width: 0.5px;
    }

    .select-tab-container > a:last-child,
    .select-tab-container > button:last-child {
        border-radius: 0 0.2rem 0.2rem 0;
        border-left-width: 0.5px;
    }

    .select-tab-container > a:nth-child(n+2):nth-last-child(n+2),
    .select-tab-container > button:nth-child(n+2):nth-last-child(n+2) {
        border-radius: 0;
        border-left-width: 0.5px;
        border-right-width: 0.5px;
    }

@media (max-width: 992px) {
    .select-tab-container {
        flex-direction: column;
    }

    .select-tab-container > a,
    .select-tab-container > button {
        min-width: 100%;
        border-width: 1px !important;
    }

    .select-tab-container > a:first-child,
    .select-tab-container > button:first-child {
        border-radius: 0.2rem 0.2rem 0 0;
        border-bottom-width: 0.5px!important;
    }

    .select-tab-container > a:last-child,
    .select-tab-container > button:last-child {
        border-radius: 0 0 0.2rem 0.2rem;
        border-top-width: 0.5px!important;
    }

    .select-tab-container > a:nth-child(n+2):nth-last-child(n+2),
    .select-tab-container > button:nth-child(n+2):nth-last-child(n+2) {
        border-radius: 0;
        border-top-width: 0.5px!important;
        border-bottom-width: 0.5px!important;
    }
}


.cursor-pointer {
    cursor: pointer;
}
.cursor-not-allowed {
    cursor: not-allowed;
}

.disabled-checkbox-group .checkbox-button-icon-container {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.x-small {
    font-size: x-small;
}

.xx-small {
    font-size: xx-small;
}

.icon-btn {
    border: none;
    background: none;
    transition: transform 0.3s ease;
    z-index: 2;
}

    .icon-btn:hover {
        transform: scale(1.2);
    }

    .icon-btn:focus {
        outline: none;
    }

.rotate-90 {
    transform: rotate(90deg);
}
.rotate-270 {
    transform: rotate(270deg);
}

.text-inherit {
    color: inherit;
}

/* remove underline & default link color from any <a class="card"> */
a.card,
a.card:link,
a.card:visited,
a.card-body,
a.card-body:link,
a.card-body:visited {
    text-decoration: none;
    color: inherit;
}

/* keep it that way on hover/focus */
a.card:hover,
a.card:focus {
    text-decoration: none;
    color: inherit;
}

.training-card a.text-inherit {
    color: inherit;
    text-decoration: none;
}

.training-card a.text-inherit:hover {
    color: inherit;
    text-decoration: none;
}

/* Target search inputs within a form-group with position relative (that have an icon inside the input) */
.form-group.position-relative input[type="search"].form-control {
    padding-left: 1.75rem;
    transition: padding-left 0.2s ease;
}
    /* Reduce padding when typing (placeholder not shown) */
    .form-group.position-relative input[type="search"].form-control:not(:placeholder-shown) {
        padding-left: 0.75rem;
    }
/* Style the search icon */
.form-group.position-relative .search-placeholder-icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
}
/* Hide icon when typing */
.form-group.position-relative input[type="search"].form-control:not(:placeholder-shown) + .search-placeholder-icon {
    opacity: 0;
    visibility: hidden;
}

.copy-btn {
    position: absolute;
    top: 5px;
    right: 5px;
}

.regenerate-auth-code-btn {
    position: absolute;
    top: 5px;
    right: 44px;
}

.input-group-append > button:focus,
.input-group-prepend > button:focus {
    outline: none;
}

/* A list being reloaded stays on screen, dimmed (with a spinner above it, see TrainingPlan, Travel/Arrival, Training, Procedure). */
.list-loading {
    opacity: 0.5;
    pointer-events: none;
}

.circle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
    .circle-badge:not(:first-child) {
        margin-left: -12px;
    }

.diagonal-banner, .diagonal-banner-large, .diagonal-banner-x-large {
    position: absolute;
    display: flex;
    z-index: 10;
    left: -50%;
    top: 45%;
    width: 200%;
    font-weight: bold;
    height: 48px;
    transform: rotate(-30deg);
    overflow: hidden;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.9;
}

.diagonal-banner-large {
    height: 72px;
    font-size: large;
}

.diagonal-banner-x-large {
    height: 96px;
    font-size: x-large;
}

.result-container {
    min-height: 7rem;
}

.data-result-message {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

:has(> .custom-cell) {
    width: var(--matrix-column-width);
    min-width: var(--matrix-column-width);
    padding: 2px !important;
    margin: 0 !important;
}

/* A matrix is a grid of square tiles of fixed size whatever its state (few or many columns, rows folded or not): the columns of tiles never
   change width, and the first column (the titles) takes the space left on the row, with a minimum width, so the table always fills its container. */
.matrix-table {
    width: 100% !important;
}

.matrix-table th.training-header {
    width: 100%;
    min-width: var(--matrix-title-width);
}

.matrix-table td.matrix-row-title {
    min-width: var(--matrix-title-width);
}

.matrix-table th.job-header,
.matrix-table th.matrix-day-header {
    width: var(--matrix-column-width);
    min-width: var(--matrix-column-width);
    max-width: var(--matrix-column-width);
    padding: 0;
}

.dt-scroll-head .matrix-table th.training-header {
    vertical-align: bottom !important;
}

.dt-scroll-head .matrix-table th.job-header {
    position: relative;
    height: 260px !important;
}

.dt-scroll-head .matrix-table th.job-header .job-header-title {
    font-size: 10px;
    position: absolute;
    transform: rotate(-90deg);
    width: 260px;
    top: 109px;
    left: -105px;
}

#context-menu {
    max-width: 360px;
}

.matrix-row-title {
    cursor: pointer;
}

.matrix-selection-bar {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--dark);
    color: var(--white);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
}

/* Close button pinned to the top right corner of the matrix menu, whatever sits above it in the markup. */
#context-menu .close {
    position: absolute;
    top: 0.4rem;
    right: 0.75rem;
}

#context-menu #total-selected-cell {
    padding-right: 1.5rem;
}

.matrix-group-row {
    cursor: pointer;
    user-select: none;
}

.matrix-group-row td {
    padding: 0.4rem 0.75rem;
}

#data-table tbody tr[data-group]:not(.dtrg-group) {
    transition: opacity 0.15s ease;
}

#data-table tbody tr.matrix-row-fading {
    opacity: 0;
}

.matrix-group-chevron {
    transition: transform 0.15s ease;
}

.matrix-group-chevron.is-collapsed {
    transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    #data-table tbody tr[data-group]:not(.dtrg-group),
    .matrix-group-chevron {
        transition: none;
    }
}

/* The label stays in view while the table scrolls sideways (the band is one wide cell). */
.matrix-group-label {
    position: sticky;
    left: 0.75rem;
    display: inline-block;
}

.selected-record-names {
    max-width: 320px;
    max-height: 7rem;
    overflow-y: auto;
    padding-left: 1.1rem;
    padding-right: 1.5rem;
    font-weight: 600;
}

.custom-cell {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;
    position: relative;
    width: var(--matrix-cell-size);
    height: var(--matrix-cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

    .custom-cell:hover {
        cursor: pointer;
        background-color: var(--highlight-darker) !important;
    }

    .custom-cell.highlight {
        background-color: var(--highlight-darker) !important;
    }

.thumbnail-file-name {
    align-self: center;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-focus:focus {
    outline: none;
    box-shadow: none;
}

td pre:has(~ button) {
    min-height: 42px;
}

[v-cloak] {
    display: none !important;
}

.sticky-action-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 800;
}
    .sticky-action-bar.is-stuck {
        border-bottom: 2px solid var(--border-color);
        background-color: var(--surface);
    }

#multi-action-container {
    padding: 1rem 0 1rem 0;
    border-bottom: 2px solid var(--border-color);
    background-color: var(--surface);
}

table .disabled-cell {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
table.matrix-read-only {
    opacity: 0.65;
    filter: grayscale(1);
    cursor: not-allowed;
    user-select: none;
}
table.matrix-read-only th,
table.matrix-read-only td {
    background-color: var(--surface-subtle);
}
table td:has(.disabled-cell) {
    cursor: not-allowed;
}

.pdf-page-wrapper {
    margin-bottom: 1.5rem;
    text-align: center;
}

.pdf-page-canvas {
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    display: inline-block;
}

.pointer-events-none {
    pointer-events: none !important;
}

/* Files */
.file-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.file-upload-preview-container {
    max-width: calc(50% - 0.5rem);
}

.file-preview-container {
    min-width: 150px;
    background-color: var(--surface);
    padding: 1rem;
    display: flex;
    flex-grow: 1;
    gap: 0.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease;
}
    .file-preview-container:hover {
        background-color: var(--highlight-alt);
    }

    .file-preview-container > div > img,
    .file-preview-container > div > embed {
        padding: 0.25rem;
        border: 1px dashed var(--primary-outline);
        min-width: 100%;
        min-height: 100%;
    }

/* A fixed display frame, the same size regardless of the source file's own dimensions -- an oversized/very tall
   photo (or a multi-page PDF's rendered canvases) used to stretch the whole preview area to match. object-fit:
   contain scales an image down to fit inside without cropping, letterboxed with the frame's own dark background
   filling whatever space the image's aspect ratio doesn't use, rather than distorting it to fill the frame. A
   PDF's own pages (see .pdf-page-canvas) scale down the same way via max-width/height:auto, and the renderer's own
   scroll wrapper (renderPdfPreview, site.js) keeps a multi-page result within this same fixed frame. */
.file-thumbnail-container {
    min-width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* .file-thumbnail-container's own align-items: center sizes a plain child div to its own content instead of
       stretching it to the container's fixed height -- without an explicit height here, renderPdfPreview's inner
       scroll wrapper (site.js, max-height: 100%) resolves that percentage against an auto/undefined parent height,
       which is a no-op, so a multi-page result just grows past the frame and gets clipped by overflow: hidden
       instead of scrolling. */
    .file-thumbnail-container .pdf-preview-target {
        width: 100%;
        height: 100%;
    }

    /* Same as the PDF: the frame is a fixed height with its content centered, so a text taller than the frame would be cut equally at the top and the bottom
       (its first lines lost). It fills the frame instead and scrolls inside it, from the top. */
    /* A card whose preview can be enlarged (it has the enlarge button) shows it: the preview itself is what is clicked. */
    .file-preview-container:has(.btn-maximize-file-view) .file-thumbnail-container {
        cursor: zoom-in;
    }

    .file-thumbnail-container .markdown-preview-target {
        width: 100%;
        height: 100%;
        max-height: none;
    }

    .file-thumbnail-container img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.file-name-container {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
}

.drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed var(--primary-outline);
    transition: background-color 0.3s ease;
}
    .drop-zone:hover {
        cursor: pointer;
        background-color: var(--highlight);
    }

    /* The same zone, in a row of buttons (the composer of a ticket): one line instead of a block. */
    .drop-zone.is-compact {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

.message-queue-panel {
    position: fixed;
    right: 1rem;
    z-index: 900;
}

.time-progress-panel {
    position: fixed;
    right: 1rem;
    z-index: 900;
    min-width: 12rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.time-progress-item > div:first-child {
    gap: 1rem;
    white-space: nowrap;
}

.time-progress-item + .time-progress-item {
    margin-top: 0.85rem;
}

.time-progress-item .progress {
    height: 0.5rem;
    margin-top: 0.3rem;
}

.message-queue-toggle-btn {
    position: relative;
}

#message-queue-count-badge {
    top: -7px;
    left: -7px;
    right: auto;
}

.message-queue-panel-body {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 24rem;
    max-width: calc(100vw - 2rem);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

#message-queue-list {
    max-height: 15rem;
    overflow-y: auto;
}

.message-queue-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--primary-outline);
    opacity: 1;
    max-height: 6rem;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s ease, padding 0.4s ease;
}
    .message-queue-item:last-child {
        border-bottom: none;
    }
    .message-queue-item-enter {
        opacity: 0;
    }
    .message-queue-item-leave {
        opacity: 0;
        max-height: 0;
        padding: 0;
    }

/* The live queue panel of the validations, in the Documents list (same look as the message queue panel above). */
.document-queue-panel {
    position: fixed;
    right: 1rem;
    z-index: 900;
}

.document-queue-toggle-btn {
    position: relative;
}

#document-queue-count-badge {
    top: -7px;
    left: -7px;
    right: auto;
}

.document-queue-panel-body {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 24rem;
    max-width: calc(100vw - 2rem);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

#document-queue-list {
    max-height: 20rem;
    overflow-y: auto;
}

.document-queue-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--primary-outline);
    opacity: 1;
    max-height: 6rem;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s ease, padding 0.4s ease;
}
    .document-queue-item:last-child {
        border-bottom: none;
    }
    .document-queue-item-enter {
        opacity: 0;
    }
    .document-queue-item-leave {
        opacity: 0;
        max-height: 0;
        padding: 0;
    }

.app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 16px;
    border-radius: 14px;
    background-color: var(--surface);
    border: 1px solid var(--border-faint);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.app-card:hover,
.comment-container:hover,
.document-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.app-card:has(.dropdown-menu.show) {
    z-index: 10;
    transform: none;
}

.app-card-bg-success { background-color: var(--success-card-bg); border-color: var(--success-card-border); }
.app-card-bg-warning { background-color: var(--warning-card-bg); border-color: var(--warning-card-border); }
.app-card-bg-danger { background-color: var(--danger-card-bg); border-color: var(--danger-card-border); }
.app-card-bg-secondary { background-color: var(--secondary-pale-bg); border-color: var(--secondary-pale-bg); }

/* Indicateurs de catégorie de publication (Procedure/Library.cshtml, Procedure/Index.cshtml) : tuiles de même
   taille, fond neutre peu importe l'état (seule la case à cocher + la bordure prennent la couleur active, l'icône
   garde toujours la couleur de sa propre catégorie). */
.type-indicator-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.type-indicator-tile {
    flex: 1 1 0;
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border-light, #dee2e6);
    border-radius: 0.6rem;
    background-color: var(--subtle-bg, #f1f3f5);
    cursor: pointer;
    user-select: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.type-indicator-tile:hover {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}
.type-indicator-tile.active {
    border-color: var(--primary);
}
.type-indicator-checkbox {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.3rem;
    border: 2px solid var(--muted-icon, #adb5bd);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.type-indicator-checkbox i {
    font-size: 0.7rem;
    color: #fff;
    opacity: 0;
    transition: opacity 0.1s ease;
}
.type-indicator-tile.active .type-indicator-checkbox {
    background-color: var(--primary);
    border-color: var(--primary);
}
.type-indicator-tile.active .type-indicator-checkbox i {
    opacity: 1;
}
.type-indicator-icon {
    flex: 0 0 auto;
    font-size: 1.4rem;
}
.type-indicator-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.type-indicator-label {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
}
.type-indicator-count {
    font-size: 0.78rem;
    color: var(--muted-text, #868e96);
}
.type-indicator-select-all .type-indicator-icon {
    color: var(--muted-text, #868e96);
}

/* En-tête de section groupée par catégorie (Procedure/Index.cshtml) */
.publication-category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-light, #dee2e6);
}
.publication-category-header .publication-category-icon {
    font-size: 1.3rem;
}

@media (min-width: 1200px) {
    .modal-dialog {
        max-width: 600px;
    }

    .modal-dialog.modal-lg {
        max-width: 1000px;
    }
}

/* A modal that shows a PDF or an image to read it bigger (file preview, PDF reader, guides) takes nearly all the width at every screen size. */
.modal-dialog.modal-preview {
    max-width: 96%;
}

/* Steps of a flow that can be stopped and resumed at any step (publication: details, content and publishing, audience). */
.stepper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.stepper-item {
    display: flex;
    align-items: center;
}

.stepper-item + .stepper-item::before {
    content: "";
    width: 2.5rem;
    height: 2px;
    margin: 0 0.75rem;
    background: var(--border-color);
}

.stepper-link {
    display: inline-flex;
    align-items: center;
    color: var(--muted-text);
    text-decoration: none;
}

a.stepper-link:hover {
    color: var(--primary);
    text-decoration: none;
}

.stepper-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--surface);
    color: var(--muted-text);
}

.stepper-item.is-done .stepper-marker {
    border-color: var(--success);
    background: var(--success-pale-bg);
    color: var(--success-pale-color);
}

.stepper-item.is-current .stepper-link {
    color: var(--default-color);
    font-weight: 600;
}

.stepper-item.is-current .stepper-marker {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}

.stepper-item.is-disabled:not(.is-current) .stepper-link {
    opacity: 0.6;
}