/* ============================================================
   Beone / BeAI Theme - Bootstrap + DataTables (DRY & consolide)
   ============================================================ */
:root {
    /* ========================================================
       1) MASTER TOKENS (sources de vérité)
       ======================================================== */
    --be-color-bg: #ffffff;
    --be-color-surface: #f4f2f2;
    --be-color-text: #141025;
    --be-color-text-muted: #6b657a;
    --be-color-border: #e6e3e3;
    --be-color-head-bg: #fafafa;

    /* Brand */
    --be-color-primary: #e53859;
    --be-color-primary-rgb: 229, 56, 89;

    /* Bootstrap main additions (defaults) */
    --be-color-secondary: #6b657a;
    --be-color-secondary-rgb: 107, 101, 122;

    --be-color-success: #198754;
    --be-color-success-rgb: 25, 135, 84;

    --be-color-info: #0dcaf0;
    --be-color-info-rgb: 13, 202, 240;

    --be-color-warning: #ed8533;
    --be-color-warning-rgb: 237, 133, 51;

    --be-color-danger: #dc3545;
    --be-color-danger-rgb: 220, 53, 69;

    --be-color-light: #f8f9fa;

    --be-color-dark: #1f2630;
    --be-color-dark-rgb: 31, 38, 48;

    /* Effets */
    --be-shadow-color: #141025;
    --be-shadow-color-rgb: 20, 16, 37;
    --be-shadow: 0 10px 30px rgba(var(--be-shadow-color-rgb), .08);

    /* ========================================================
       2) SLAVE TOKENS (aliases internes du thème)
       ======================================================== */
    --be-bg: var(--be-color-bg);
    --be-surface: var(--be-color-surface);
    --be-text: var(--be-color-text);
    --be-text-muted: var(--be-color-text-muted);
    --be-border: var(--be-color-border);
    --be-head-bg: var(--be-color-head-bg);

    --be-primary: var(--be-color-primary);
    --be-primary-rgb: var(--be-color-primary-rgb);

    /* Dérivées (primary) */
    --be-primary-soft-bg: rgba(var(--be-primary-rgb), .12);
    --be-primary-hover: color-mix(in srgb, var(--be-primary) 85%, black);
    --be-primary-hover-border: color-mix(in srgb, var(--be-primary) 82%, black);
    --be-primary-active: color-mix(in srgb, var(--be-primary) 78%, black);
    --be-primary-active-border: color-mix(in srgb, var(--be-primary) 76%, black);
    --be-primary-focus-ring: rgba(var(--be-primary-rgb), .25);
    --be-primary-subtle: color-mix(in srgb, var(--be-primary) 15%, white);

    /* Blanc de référence */
    --be-white: #ffffff;

    /* ========================================================
       3) Rythme & formes (non-couleurs)
       ======================================================== */
    --be-radius: .75rem;
    --be-radius-sm: .5rem;
    --be-sidebar-w: 240px;
    --be-sidebar-mobile-w: 270px;

    /* ========================================================
       4) Aliases Bootstrap
       ======================================================== */
    /* Base */
    --bs-body-bg: var(--be-color-bg);
    --bs-body-color: var(--be-color-text);
    --bs-emphasis-color: var(--be-color-text);
    --bs-secondary-color: var(--be-color-text-muted);
    --bs-secondary-bg: var(--be-color-surface);
    --bs-tertiary-bg: var(--be-color-surface);

    --bs-border-color: var(--be-color-border);
    --bs-border-color-translucent: color-mix(in srgb, var(--be-color-border) 60%, transparent);

    /* Links & focus */
    --bs-link-color: var(--be-color-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--be-color-primary) 85%, black);
    --bs-focus-ring-color: rgba(var(--be-color-primary-rgb), .25);

    /* Brand + status (core) */
    --bs-primary: var(--be-color-primary);
    --bs-primary-rgb: var(--be-color-primary-rgb);

    --bs-secondary: var(--be-color-secondary);
    --bs-secondary-rgb: var(--be-color-secondary-rgb);

    --bs-success: var(--be-color-success);
    --bs-success-rgb: var(--be-color-success-rgb);

    --bs-info: var(--be-color-info);
    --bs-info-rgb: var(--be-color-info-rgb);

    --bs-warning: var(--be-color-warning);
    --bs-warning-rgb: var(--be-color-warning-rgb);

    --bs-danger: var(--be-color-danger);
    --bs-danger-rgb: var(--be-color-danger-rgb);

    --bs-light: var(--be-color-light);

    --bs-dark: var(--be-color-dark);
    --bs-dark-rgb: var(--be-color-dark-rgb);

    /* Text emphasis (approx) */
    --bs-primary-text-emphasis: color-mix(in srgb, var(--be-color-primary) 55%, black);
    --bs-secondary-text-emphasis: color-mix(in srgb, var(--be-color-secondary) 55%, black);
    --bs-success-text-emphasis: color-mix(in srgb, var(--be-color-success) 55%, black);
    --bs-info-text-emphasis: color-mix(in srgb, var(--be-color-info) 55%, black);
    --bs-warning-text-emphasis: color-mix(in srgb, var(--be-color-warning) 55%, black);
    --bs-danger-text-emphasis: color-mix(in srgb, var(--be-color-danger) 55%, black);
    --bs-light-text-emphasis: color-mix(in srgb, var(--be-color-text) 70%, black);
    --bs-dark-text-emphasis: var(--be-color-dark);

    /* Subtle backgrounds */
    --bs-primary-bg-subtle: color-mix(in srgb, var(--be-color-primary) 15%, white);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--be-color-secondary) 15%, white);
    --bs-success-bg-subtle: color-mix(in srgb, var(--be-color-success) 15%, white);
    --bs-info-bg-subtle: color-mix(in srgb, var(--be-color-info) 15%, white);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--be-color-warning) 15%, white);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--be-color-danger) 15%, white);
    --bs-light-bg-subtle: color-mix(in srgb, var(--be-color-light) 75%, white);
    --bs-dark-bg-subtle: color-mix(in srgb, var(--be-color-dark) 15%, white);

    /* Subtle borders */
    --bs-primary-border-subtle: color-mix(in srgb, var(--be-color-primary) 30%, white);
    --bs-secondary-border-subtle: color-mix(in srgb, var(--be-color-secondary) 30%, white);
    --bs-success-border-subtle: color-mix(in srgb, var(--be-color-success) 30%, white);
    --bs-info-border-subtle: color-mix(in srgb, var(--be-color-info) 30%, white);
    --bs-warning-border-subtle: color-mix(in srgb, var(--be-color-warning) 30%, white);
    --bs-danger-border-subtle: color-mix(in srgb, var(--be-color-danger) 30%, white);
    --bs-light-border-subtle: color-mix(in srgb, var(--be-color-border) 35%, white);
    --bs-dark-border-subtle: color-mix(in srgb, var(--be-color-dark) 30%, white);

    /* Alerts (approx) */
    --bs-alert-color: var(--be-color-text);
    --bs-alert-bg: var(--be-color-surface);
    --bs-alert-border-color: var(--be-color-border);

    /* Dropdown active (already in your theme) */
    --bs-dropdown-link-active-bg: rgba(var(--be-color-primary-rgb), .12);
    --bs-dropdown-link-active-color: var(--be-color-text);

    /* Buttons (optional variables many components read) */
    --bs-btn-focus-shadow-rgb: var(--be-color-primary-rgb);

    /* Form validation colors (useful in Bootstrap forms) */
    --bs-form-valid-color: var(--be-color-success);
    --bs-form-valid-border-color: var(--be-color-success);
    --bs-form-invalid-color: var(--be-color-danger);
    --bs-form-invalid-border-color: var(--be-color-danger);

    /* Form validation focus rings */
    --bs-form-valid-box-shadow: 0 0 0 .25rem rgba(var(--be-color-success-rgb), .25);
    --bs-form-invalid-box-shadow: 0 0 0 .25rem rgba(var(--be-color-danger-rgb), .25);

    /* Table variables (Bootstrap 5 uses these for table theming) */
    --bs-table-color: var(--be-color-text);
    --bs-table-bg: var(--be-color-bg);
    --bs-table-border-color: var(--be-color-border);

    --bs-table-striped-bg: color-mix(in srgb, var(--be-color-surface) 60%, white);
    --bs-table-striped-color: var(--be-color-text);

    --bs-table-hover-bg: color-mix(in srgb, var(--be-color-surface) 80%, white);
    --bs-table-hover-color: var(--be-color-text);

    --bs-table-active-bg: rgba(var(--be-color-primary-rgb), .10);
    --bs-table-active-color: var(--be-color-text);

    /* Card / list-group like variables that often exist in themes */
    --bs-card-bg: var(--be-color-bg);
    --bs-card-border-color: var(--be-color-border);

    --bs-list-group-bg: var(--be-color-bg);
    --bs-list-group-border-color: var(--be-color-border);
    --bs-list-group-action-hover-bg: var(--be-color-surface);
    --bs-list-group-action-active-bg: rgba(var(--be-color-primary-rgb), .10);
    --bs-list-group-action-active-color: var(--be-color-text);

    /* ===== Link state (Bootstrap utilise ces variables sur plusieurs composants) ===== */
    --bs-link-color-rgb: var(--be-color-primary-rgb);
    --bs-link-decoration: none;
    --bs-link-hover-decoration: none;

    /* ===== Nav / pills / tabs ===== */
    --bs-nav-link-color: var(--be-color-text);
    --bs-nav-link-hover-color: var(--be-primary-hover);
    --bs-nav-pills-link-active-bg: rgba(var(--be-color-primary-rgb), .14);
    --bs-nav-pills-link-active-color: var(--be-color-text);

    /* ===== Dropdown (tu as déjà active bg, on complète focus/hover) ===== */
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--be-color-surface) 80%, white);
    --bs-dropdown-link-hover-color: var(--be-color-text);
    --bs-dropdown-link-color: var(--be-color-text);

    /* ===== List group / pagination / etc. ===== */
    --bs-list-group-active-bg: rgba(var(--be-color-primary-rgb), .14);
    --bs-list-group-active-color: var(--be-color-text);
    --bs-list-group-active-border-color: rgba(var(--be-color-primary-rgb), .25);

    --bs-pagination-active-bg: rgba(var(--be-color-primary-rgb), .14);
    --bs-pagination-active-border-color: rgba(var(--be-color-primary-rgb), .25);
    --bs-pagination-active-color: var(--be-color-text);

    /* ===== Focus ring global (Bootstrap 5.3) ===== */
    --bs-focus-ring-width: .2rem;
    --bs-focus-ring-opacity: .25;
    /* ===== Selection (quand tu sélectionnes du texte) ===== */
    --bs-highlight-bg: rgba(var(--be-color-primary-rgb), .18);

    --dt-row-selected: var(--be-color-primary-rgb);
    --dt-row-selected-text: 255, 255, 255; /* ou var(--be-color-text) si tu veux sombre */
    --dt-row-selected-link: var(--be-shadow-color-rgb);

    /* Optionnel: hover/stripe/order icons */
    --dt-row-hover: var(--be-shadow-color-rgb); /* utilisé en rgba(..., 0.075) */
    --dt-row-stripe: var(--be-shadow-color-rgb); /* utilisé en rgba(..., 0.05) */
    --dt-column-ordering: var(--be-shadow-color-rgb);

    /* Optionnel: background général DT */
    --dt-html-background: var(--be-color-bg);
}

.form-label.required::after,
label.required::after {
    content: " *";
    color: var(--be-primary);
    font-weight: 700;
}

.select2-selection.is-invalid,
.type-current-card.is-invalid {
    border-color: var(--bs-form-invalid-border-color, var(--be-color-danger)) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--be-color-danger-rgb), .12);
}

.nav-tabs .nav-link.tab-has-invalid,
.nav-pills .nav-link.tab-has-invalid {
    color: var(--be-color-danger);
    border-color: var(--be-color-danger);
    background-color: rgba(var(--be-color-danger-rgb), .08);
}

.nav-tabs .nav-link.tab-has-invalid::after,
.nav-pills .nav-link.tab-has-invalid::after {
    content: " *";
    font-weight: 700;
}

html {
    font-size: 0.9rem;
}

/* ===== Base ===== */
body {
    color: var(--be-text);
}

/* Liens génériques */
a {
    color: var(--bs-link-color);
    text-decoration: none;
}

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

a.btn,
a.btn:hover,
a.btn:focus,
.btn,
.btn:hover,
.btn:focus,
.dropdown-item,
.dropdown-item:hover,
.dropdown-item:focus,
.nav-aside .nav-link,
.nav-aside .nav-link:hover,
.nav-aside .nav-link:focus,
#sidebarAdmin .accordion-button,
#sidebarAdmin .accordion-button:hover,
#sidebarAdmin .accordion-button:focus {
    text-decoration: none !important;
}

/* ===== Layout ===== */
.offcanvas-md {
    width: var(--be-sidebar-mobile-w);
}

@media (min-width: 768px) {
    .app-sidebar-col {
        flex: 0 0 var(--be-sidebar-w);
        width: var(--be-sidebar-w);
        max-width: var(--be-sidebar-w);
    }

    .app-main-col {
        flex: 0 0 calc(100% - var(--be-sidebar-w));
        width: calc(100% - var(--be-sidebar-w));
        max-width: calc(100% - var(--be-sidebar-w));
    }

    /* Backdrop inutile en desktop */
    .offcanvas-backdrop {
        display: none !important;
    }

    /* Le wrapper offcanvas devient "sidebar" */
    #appSidebar.offcanvas-md {
        position: sticky !important;
        top: 60px; /* hauteur topbar */
        transform: none !important;
        visibility: visible !important;
        background: transparent;
        width: var(--be-sidebar-w);

        /* IMPORTANT : ne pas fixer une height qui crée un scroll container */
        height: auto !important;
    }

    /*
     * Scroll UNIQUEMENT si nécessaire :
     * on limite la hauteur du body, mais on ne force pas sa hauteur.
     */
    #appSidebar.offcanvas-md .offcanvas-body {
        overflow-y: auto;
        overflow-x: hidden;
        /* Important : pas de height:100% */
        height: auto !important;
    }

    #appSidebar.offcanvas-md {
        scrollbar-gutter: stable;
    }
}

aside {
    position: relative;
    z-index: 1;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    color: var(--be-text);
}

.sidebar-logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--be-primary);
    color: var(--be-white);
    box-shadow: var(--be-shadow);
    font-weight: 800;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    backdrop-filter: saturate(140%) blur(6px);
    background: color-mix(in srgb, var(--be-bg) 85%, transparent); /* remplace rgba(255,255,255,.85) */
    border-bottom: 1px solid var(--be-border);
}

.page-toolbar {
    position: sticky;
    top: 57px;
    z-index: 1020;
    min-height: 3rem;
    padding: .55rem 0;
    background: color-mix(in srgb, var(--be-bg) 92%, transparent);
    backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid color-mix(in srgb, var(--be-border) 78%, transparent);
}

.page-toolbar .breadcrumb {
    min-width: 0;
    flex-wrap: wrap;
}

.page-toolbar > .d-flex:last-child {
    flex-shrink: 0;
}

/* ===== Components ===== */
.card-surface {
    background: var(--be-surface);
    border: 1px solid var(--be-border);
    box-shadow: var(--be-shadow);
    border-radius: var(--be-radius);
}

.bg-surface {
    background: var(--be-surface) !important;
}

.badge-soft {
    background: var(--be-primary-soft-bg);
    color: var(--be-primary);
    font-weight: 600;
}

.badge-tag {
    background: var(--be-tag-bg, #64748B);
    color: var(--be-white);
    font-weight: 600;
}

.topbar-credit-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.1rem;
    padding: .32rem .65rem;
    border-radius: .6rem;
    color: var(--be-primary);
    background: var(--be-primary-soft-bg);
    border: 1px solid rgba(var(--be-primary-rgb), .18);
    font-weight: 700;
}

.topbar-credit-badge:hover {
    color: var(--be-primary);
    border-color: rgba(var(--be-primary-rgb), .3);
}

.topbar-credit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: rgba(var(--be-primary-rgb), .12);
}

.topbar-credit-total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.topbar-credit-split {
    display: inline-flex;
    align-items: center;
    gap: .18rem;
    color: var(--be-text-muted);
    font-size: .72rem;
}

.credit-balance {
    display: inline-flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    vertical-align: middle;
}

.credit-balance-main {
    display: inline-flex;
    align-items: baseline;
    justify-content: inherit;
    gap: .35rem;
    white-space: nowrap;
}

.credit-balance-total {
    font-weight: 700;
    line-height: 1.1;
}

.credit-balance:not(.credit-balance-compact) .credit-balance-total {
    font-size: 1.4rem;
}

.credit-balance-split {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: nowrap;
}

.credit-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: 999px;
    padding: .12rem .45rem;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
}

.credit-chip-subscription {
    color: var(--be-primary);
    background: rgba(var(--be-primary-rgb), .10);
    border: 1px solid rgba(var(--be-primary-rgb), .18);
}

.credit-chip-extra {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), .10);
    border: 1px solid rgba(var(--bs-success-rgb), .18);
}

.credit-balance-compact {
    align-items: flex-start;
}

.text-end .credit-balance-compact {
    align-items: flex-end;
}

.credit-balance-compact .credit-balance-total {
    font-variant-numeric: tabular-nums;
}

.credit-balance-compact .credit-balance-split {
    gap: .25rem;
}

.credit-balance-compact .credit-chip {
    padding: .08rem .32rem;
    font-size: .72rem;
}

.credit-balance-simple.credit-balance-compact {
    display: inline-block;
    font-weight: 650;
}

/* Helpers */
.text-muted-2 {
    color: var(--be-text-muted) !important;
}

.shadow-soft {
    box-shadow: var(--be-shadow);
}

/* ===== Tables ===== */
.table-clean {
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius);
    overflow: hidden;
}

.table-clean thead th {
    background: var(--be-head-bg);
    color: var(--be-text);
    border-bottom: 1px solid var(--be-border);
    font-weight: 600;
}

/* Zébrage optionnel */
.table.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: var(--be-head-bg);
}

/* ===== DataTables (skin) ===== */
table.dataTable.table-clean {
    background: var(--be-bg);
}

table.dataTable.table-clean tbody tr:hover > * {
    background-color: var(--be-bg) !important;
}

/* Contrôles (search & length) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--be-surface);
    border: 1px solid var(--be-border);
    color: var(--be-text);
    border-radius: var(--be-radius-sm);
    padding: .45rem .6rem;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
    color: var(--be-text-muted);
    font-weight: 500;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
}

.dataTables_wrapper .dt-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.dataTables_wrapper .dataTables_filter {
    margin: 0;
}

.dataTables_wrapper .dataTables_filter label {
    margin: 0;
}

.dataTables_wrapper.datatable-toolbar-mounted .datatable-native-controls {
    display: none !important;
}

.datatable-integrated-card > .datatable-filter-source {
    display: none !important;
}

.datatable-integrated-responsive {
    padding-top: .75rem !important;
}

.datatable-page-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    flex-wrap: wrap;
    min-width: 0;
}

.datatable-toolbar-button.active {
    background: rgba(var(--be-primary-rgb), .1);
    border-color: rgba(var(--be-primary-rgb), .32);
    color: var(--be-text);
}

.datatable-toolbar-search {
    width: clamp(12rem, 18vw, 17rem);
}

.datatable-toolbar-search .input-group-text,
.datatable-toolbar-search .form-control,
.datatable-toolbar-length .form-select,
.datatable-toolbar-pages .form-control {
    min-height: 2.375rem;
}

.datatable-page-toolbar .btn,
.datatable-page-toolbar .form-control,
.datatable-page-toolbar .form-select,
.datatable-page-toolbar .input-group-text {
    min-height: 2.375rem;
}

.datatable-toolbar-search .input-group-text {
    padding-inline: .75rem;
}

.datatable-toolbar-length {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    color: var(--be-text-muted);
    font-size: .86rem;
    white-space: nowrap;
}

.datatable-toolbar-length .form-select {
    width: 4.6rem;
}

.datatable-toolbar-columns {
    display: inline-flex;
    align-items: center;
}

.datatable-columns-toggle .datatable-columns-caret {
    font-size: .72rem;
}

.datatable-columns-menu {
    position: fixed;
    z-index: 1085;
    max-width: calc(100vw - 1rem);
    max-height: min(70vh, 30rem);
    overflow: auto;
    padding: .35rem;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-sm);
    background: var(--be-bg);
    color: var(--be-text);
    box-shadow: var(--be-shadow);
}

.datatable-columns-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: var(--be-text);
    padding: .48rem .58rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.datatable-columns-item:hover,
.datatable-columns-item:focus {
    background: rgba(var(--be-primary-rgb), .08);
    outline: 0;
}

.datatable-columns-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.datatable-columns-check {
    flex: 0 0 auto;
    color: var(--be-primary);
}

.datatable-columns-item[aria-checked="false"] .datatable-columns-check {
    opacity: 0;
}

.datatable-toolbar-pages {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding-inline: .45rem;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-sm);
    background: color-mix(in srgb, var(--be-bg) 74%, var(--be-surface));
}

.datatable-toolbar-pages .btn {
    width: 2.15rem;
    min-height: 2.15rem;
    padding-inline: 0;
    border-color: transparent;
    background: transparent;
}

.datatable-toolbar-pages .form-control {
    width: auto;
    min-width: 3.75rem;
    max-width: 7rem;
    field-sizing: content;
    min-height: 2.15rem;
    text-align: center;
    padding-inline: .55rem;
    border-color: transparent;
    background: transparent;
}

.datatable-toolbar-pages .form-control::-webkit-outer-spin-button,
.datatable-toolbar-pages .form-control::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.datatable-toolbar-pages .form-control[type="number"] {
    -moz-appearance: textfield;
}

.datatable-toolbar-page-total,
.datatable-toolbar-info,
.datatable-toolbar-page-label {
    color: var(--be-text-muted);
    font-size: .86rem;
    white-space: nowrap;
}

.datatable-toolbar-info {
    display: inline-flex;
    align-items: center;
    min-height: 2.375rem;
    padding-inline: .75rem;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-sm);
    background: color-mix(in srgb, var(--be-bg) 74%, var(--be-surface));
}

.datatable-toolbar-page-label {
    font-weight: 600;
}

.datatable-filter-panel {
    position: fixed;
    z-index: 1060;
    max-height: min(70vh, 42rem);
    overflow: auto;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius);
    background: var(--be-bg);
    color: var(--be-text);
    box-shadow: var(--be-shadow);
}

.datatable-filter-panel.datatable-filter-panel-dropdown-open {
    overflow: visible;
}

.datatable-filter-panel-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    background: var(--be-head-bg);
    border-bottom: 1px solid var(--be-border);
}

.datatable-filter-panel-body {
    padding: 1rem;
}

.datatable-filter-panel-body .row {
    margin-inline: 0;
}

.datatable-filter-panel-body .conversation-filter-grid {
    row-gap: .75rem !important;
}

.datatable-filter-panel-body .conversation-filter-grid > [class*="col-"] {
    padding-left: .25rem;
    padding-right: .25rem;
}

.datatable-filter-reset-button {
    width: 2.375rem;
    min-width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.datatable-filter-reset-button i {
    margin: 0 !important;
}

@media (min-width: 1200px) {
    .datatable-filter-panel-body .conversation-filter-grid {
        flex-wrap: nowrap;
    }

    .datatable-filter-panel-body .datatable-filter-field-date {
        flex: 0 0 10rem;
        max-width: 10rem;
    }

    .datatable-filter-panel-body .datatable-filter-field-xs {
        flex: 0 0 7.25rem;
        max-width: 7.25rem;
    }

    .datatable-filter-panel-body .datatable-filter-field-sm {
        flex: 0 0 9rem;
        max-width: 9rem;
    }

    .datatable-filter-panel-body .datatable-filter-field-md {
        flex: 0 0 10.75rem;
        max-width: 10.75rem;
    }

    .datatable-filter-panel-body .datatable-filter-field-bot,
    .datatable-filter-panel-body .datatable-filter-field-organisation {
        flex: 2 1 19rem;
        min-width: 16rem;
        max-width: 24rem;
    }

    .datatable-filter-panel-body .datatable-filter-field-language {
        flex: 1 1 12rem;
        min-width: 10rem;
        max-width: 15rem;
    }

    .datatable-filter-panel-body .datatable-filter-field-lg {
        flex: 1 1 13rem;
        min-width: 11.5rem;
    }

    .datatable-filter-panel-body .datatable-filter-field-reset {
        flex: 0 0 2.375rem;
        max-width: 2.375rem;
    }
}

@media (max-width: 991.98px) {
    .datatable-page-toolbar {
        width: 100%;
        justify-content: flex-start;
    }

    .datatable-toolbar-search {
        flex: 1 1 14rem;
        width: auto;
    }
}

/* Pagination */
.page-item .page-link {
    border-color: var(--be-border);
    color: var(--be-text);
}

.page-item .page-link:hover {
    color: var(--be-primary);
    border-color: var(--be-primary);
    background: rgba(var(--be-primary-rgb), .06);
}

.page-item.active .page-link {
    background: var(--be-primary);
    border-color: var(--be-primary);
    color: var(--be-white);
    box-shadow: 0 0 0 .15rem var(--be-primary-focus-ring);
}

/* Processing */
div.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .6rem .9rem;
    border: 1px solid var(--be-border);
    background: var(--be-bg);
    border-radius: var(--be-radius);
    box-shadow: var(--be-shadow);
    color: var(--be-text);
}

/* Icônes de tri (Font Awesome) */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    position: relative;
    padding-right: 1.5rem !important;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: .55;
    color: var(--be-text);
    content: "\f0dc"; /* fa-sort */
}

table.dataTable thead th.sorting_asc::after {
    content: "\f0de";
    opacity: 1;
    color: var(--be-primary);
}

table.dataTable thead th.sorting_desc::after {
    content: "\f0dd";
    opacity: 1;
    color: var(--be-primary);
}

/* Col action compact */
.dt-action a.btn {
    padding: .25rem .5rem;
    border-radius: var(--be-radius-sm);
}

/* Responsive control dot */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--be-primary);
    box-shadow: 0 0 0 2px var(--be-white) inset;
}

/* ===== Bootstrap overrides ===== */
/* Buttons (primary) */
.btn-primary {
    --bs-btn-color: var(--be-white);
    --bs-btn-bg: var(--be-primary);
    --bs-btn-border-color: var(--be-primary);

    --bs-btn-hover-bg: var(--be-primary-hover);
    --bs-btn-hover-border-color: var(--be-primary-hover-border);

    --bs-btn-active-bg: var(--be-primary-active);
    --bs-btn-active-border-color: var(--be-primary-active-border);

    --bs-btn-disabled-bg: var(--be-primary);
    --bs-btn-disabled-border-color: var(--be-primary);

    --bs-btn-focus-shadow-rgb: var(--be-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--be-primary);
    --bs-btn-border-color: var(--be-primary);
    --bs-btn-hover-bg: var(--be-primary);
    --bs-btn-hover-border-color: var(--be-primary);

    --bs-btn-active-bg: var(--be-primary-active);
    --bs-btn-active-border-color: var(--be-primary-active-border);

    --bs-btn-focus-shadow-rgb: var(--be-primary-rgb);
}

/* Etat actif explicite (themes tiers) */
.btn-check:checked + .btn-primary,
.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

/* Nav-pills (hors sidebar déjà stylée) */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--be-primary);
}

/* Form focus / checks */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: rgba(var(--be-primary-rgb), .55);
    box-shadow: 0 0 0 .25rem var(--be-primary-focus-ring);
}

.form-check-input:checked,
.form-switch .form-check-input:checked {
    background-color: var(--be-primary);
    border-color: var(--be-primary);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--be-primary);
    border-color: var(--be-primary);
}

.form-switch .form-check-input,
.form-switch .form-check-label {
    cursor: pointer;
}

.form-switch .form-check-input:disabled,
.form-switch .form-check-input:disabled + .form-check-label {
    cursor: not-allowed;
}

/* Range slider */
.form-range::-webkit-slider-thumb {
    background: var(--be-primary);
}

.form-range::-moz-range-thumb {
    background: var(--be-primary);
}

/* Progress + Alerts + List-group */
.progress-bar {
    background-color: var(--be-primary);
}

.alert-primary {
    --bs-alert-bg: rgba(var(--be-primary-rgb), .10);
    --bs-alert-border-color: rgba(var(--be-primary-rgb), .25);
    --bs-alert-color: color-mix(in srgb, var(--be-primary) 55%, black); /* remplace #7b1a2d */
}

.list-group-item.active {
    background-color: var(--be-primary);
    border-color: var(--be-primary);
}

/* Boutons-lien */
.btn-link {
    color: var(--be-primary);
    text-decoration: none;
}

.btn-link:hover, .btn-link:focus {
    color: var(--bs-link-hover-color);
    text-decoration: none;
}

/* Sélection de texte */
::selection {
    background: rgba(var(--be-primary-rgb), .25);
    color: var(--be-text);
}

/* ===== Sidebar (nav + sous-menu Admin) - consolide ===== */
.nav-aside .nav-link,
#sidebarAdmin .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .6rem;
    min-height: 40px;

    background: transparent;
    color: var(--be-text);
    border: 1px solid transparent;
    box-shadow: none;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.nav-aside,
#sidebarAdmin,
#sidebarAdmin .accordion-item,
#sidebarAdmin .accordion-header,
#sidebarAdmin .accordion-collapse,
#sidebarAdmin .accordion-body {
    min-width: 0;
    max-width: 100%;
}

.nav-aside .nav-link:hover,
#sidebarAdmin .accordion-button:hover {
    background: color-mix(in srgb, var(--be-primary-soft-bg) 34%, var(--be-surface));
    border-color: rgba(var(--be-primary-rgb), .12);
    color: var(--be-text);
}

.nav-aside .nav-link.active,
#sidebarAdmin .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--be-primary-soft-bg) 72%, var(--be-color-bg));
    border-color: rgba(var(--be-primary-rgb), .28);
    color: var(--be-text);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--be-primary), 0 8px 20px rgba(var(--be-primary-rgb), .10);
}

.nav-aside .nav-icon,
#sidebarAdmin .accordion-button .nav-icon {
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: inherit;
    border-radius: .5rem;
    transition: background-color .16s ease, color .16s ease;
}

.nav-aside .nav-icon > i,
#sidebarAdmin .accordion-button .nav-icon > i {
    font-size: 1.05rem;
}

.nav-aside .nav-link.active .nav-icon,
#sidebarAdmin .accordion-button:not(.collapsed) .nav-icon {
    background: var(--be-primary);
    color: var(--be-white);
}

.nav-aside .nav-text,
#sidebarAdmin .accordion-button .nav-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebarAdmin .accordion-button::after {
    margin-left: auto;
}

.accordion.accordion-flush .accordion-item {
    border: 0;
}

#sidebarAdmin .accordion-body {
    border-left: 1px solid color-mix(in srgb, var(--be-border) 70%, transparent);
    margin-left: .75rem;
    width: calc(100% - .75rem);
    box-sizing: border-box;
    overflow-x: hidden;
}

#sidebarAdmin .accordion-body .nav-link {
    min-height: 36px;
    padding: .42rem .55rem;
    font-size: .94rem;
    width: 100%;
    max-width: 100%;
}

/* Colonne "Bot" : largeur raisonnable + retour à la ligne */
.col-bot {
    max-width: 220px;
    white-space: normal !important;
}

/* Colonne Source : largeur raisonnable + retour à la ligne */
.col-source {
    max-width: 260px;
    white-space: normal !important;
}

/* ============================================================
   Select2 - Theme override (BeAI tokens)
   Charge après le CSS Select2 officiel.
   ============================================================ */

/* Container */
.select2-container {
    font-size: inherit;
}

/* ========== Selection (single + multiple) ========== */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--be-color-bg);
    border: 1px solid var(--be-color-border);
    border-radius: var(--be-radius-sm);
    min-height: 38px; /* align Bootstrap input */
    box-shadow: none;
}

/* Texte / placeholder */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--be-color-text);
    line-height: 36px; /* align visuel */
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--be-color-text-muted);
}

/* Arrow (triangle) */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--be-color-text-muted) transparent transparent transparent;
}

/* Clear (x) */
.select2-container--default .select2-selection__clear {
    color: var(--be-color-text-muted);
}

.select2-container--default .select2-selection__clear:hover {
    color: var(--be-color-text);
}

/* ========== Focus / Open state ========== */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: color-mix(in srgb, var(--be-color-primary) 55%, white);
    box-shadow: 0 0 0 .25rem rgba(var(--be-color-primary-rgb), .25);
}

/* Quand c'est open, on inverse la flèche */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--be-color-text-muted) transparent;
}

/* ========== Dropdown ========== */
.select2-dropdown {
    background-color: var(--be-color-bg);
    border: 1px solid var(--be-color-border);
    border-radius: var(--be-radius-sm);
    box-shadow: var(--be-shadow);
}

.modal .select2-container,
.select2-container--open,
.select2-container--open .select2-dropdown {
    z-index: 20000 !important;
}

/* Champ search dans dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--be-color-bg);
    color: var(--be-color-text);
    border: 1px solid var(--be-color-border);
    border-radius: var(--be-radius-sm);
    padding: .45rem .6rem;
    outline: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: color-mix(in srgb, var(--be-color-primary) 55%, white);
    box-shadow: 0 0 0 .25rem rgba(var(--be-color-primary-rgb), .25);
}

/* ========== Options ========== */
.select2-results__option {
    color: var(--be-color-text);
}

/* Hover / highlighted */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(var(--be-color-primary-rgb), .12);
    color: var(--be-color-text);
}

/* Selected */
.select2-container--default .select2-results__option--selected {
    background-color: rgba(var(--be-color-primary-rgb), .18);
    color: var(--be-color-text);
}

/* Disabled option */
.select2-container--default .select2-results__option--disabled {
    color: var(--be-color-text-muted);
}

/* Group label */
.select2-container--default .select2-results__group {
    color: var(--be-color-text-muted);
    font-weight: 600;
}

/* ========== Multiple (tags) ========== */
.select2-container--default .select2-selection--multiple {
    padding: .25rem .25rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(var(--be-color-primary-rgb), .12);
    border: 1px solid color-mix(in srgb, var(--be-color-primary) 30%, white);
    border-radius: var(--be-radius-sm);
    color: var(--be-color-text);
    padding: 0 .25rem 0 1.4rem;
    margin-top: .25rem;
}

.conversation-bot-filter-field {
    position: relative;
}

.conversation-bot-filter-toggle {
    background-color: var(--be-bg);
    color: var(--be-color-text);
    cursor: pointer;
    min-height: 2.25rem;
    overflow: hidden;
    padding-right: 2.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-bot-filter-toggle:focus,
.conversation-bot-filter-toggle.show {
    border-color: var(--be-color-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--be-color-primary-rgb), .15);
}

.conversation-bot-filter-menu {
    border: 1px solid var(--be-border-color, rgba(0, 0, 0, .125));
    border-radius: var(--be-radius-md);
    box-shadow: var(--be-shadow-lg);
    max-height: 22rem;
    overflow: hidden;
    padding: 0;
}

.conversation-bot-filter-tools {
    display: grid;
    gap: .4rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.conversation-bot-filter-clear {
    align-items: center;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    min-width: 2rem;
    padding: 0;
    width: 2rem;
    white-space: nowrap;
}

.conversation-bot-filter-clear i {
    margin: 0 !important;
}

.conversation-bot-filter-options {
    max-height: 17rem;
    overflow-y: auto;
    padding: .35rem;
}

.conversation-bot-filter-option {
    align-items: center;
    border-radius: var(--be-radius-sm);
    color: var(--be-color-text);
    cursor: pointer;
    display: flex;
    gap: .55rem;
    margin: 0;
    min-height: 2rem;
    padding: .35rem .45rem;
}

.conversation-bot-filter-option:hover {
    background-color: rgba(var(--be-color-primary-rgb), .08);
}

.conversation-bot-filter-option.is-selected {
    background-color: rgba(var(--be-color-primary-rgb), .10);
    font-weight: 600;
}

.conversation-bot-filter-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* remove button on tag */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--be-color-text-muted);
    border-right: 1px solid color-mix(in srgb, var(--be-color-primary) 30%, white);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: rgba(var(--be-color-primary-rgb), .10);
    color: var(--be-color-text);
}

/* Inline search field (multiple) */
.select2-container .select2-search--inline .select2-search__field {
    color: var(--be-color-text);
}

.select2-container .select2-search--inline .select2-search__field::placeholder {
    color: var(--be-color-text-muted);
}

/* ========== Disabled state ========== */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--be-color-surface);
    color: var(--be-color-text-muted);
    cursor: not-allowed;
}

/* Force les variables du dropdown au niveau du composant */
.dropdown-menu {
    --bs-dropdown-link-active-bg: rgba(var(--be-color-primary-rgb), .12);
    --bs-dropdown-link-active-color: var(--be-color-text);

    /* souvent utile aussi */
    --bs-dropdown-link-hover-bg: rgba(var(--be-color-primary-rgb), .08);
    --bs-dropdown-link-hover-color: var(--be-color-text);
}

.card.shadow-soft {
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .06);
    border: 1px solid var(--bs-border-color);
}

.badge-soft {
    background: rgba(var(--bs-primary-rgb), .10);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), .15);
}

.flag-icon {
    width: 1.35rem;
    height: .95rem;
    border-radius: .15rem;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    background: var(--be-white);
    flex: 0 0 auto;
}

.language-flag-option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.language-select-field {
    position: relative;
}

.language-select-field .select2-container {
    display: block;
    width: 100% !important;
}

.language-select-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 3rem;
}

.language-flag-prefix {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    z-index: 2;
    width: 2.75rem;
    min-height: calc(1.5em + .75rem + 2px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.btn-locale {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-locale::after {
    display: none;
}

.locale-switcher-menu {
    min-width: 10rem;
}

.locale-switcher-item {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.locale-choice-group {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.locale-choice {
    margin: 0;
}

.locale-choice .btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.locale-choice-label {
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .7rem;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-sm);
    background: var(--be-bg);
    color: var(--be-text);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.locale-choice .btn-check:checked + .locale-choice-label {
    border-color: rgba(var(--be-primary-rgb), .45);
    background: rgba(var(--be-primary-rgb), .1);
    box-shadow: 0 0 0 .2rem rgba(var(--be-primary-rgb), .12);
}

.locale-choice .btn-check:focus-visible + .locale-choice-label {
    border-color: rgba(var(--be-primary-rgb), .55);
    box-shadow: 0 0 0 .25rem var(--be-primary-focus-ring);
}

/* ============================================================
   Table actions
   ============================================================ */

.table-actions-cell {
    width: 1%;
    white-space: nowrap !important;
    min-width: max-content;
}

.table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: max-content;
}

.table-actions form {
    display: inline-flex;
    margin: 0;
}

.table-actions .btn-action {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    flex: 0 0 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--be-radius-sm);
}

.table-actions .btn-action:disabled {
    pointer-events: auto;
}

.table-action-indicators {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding-inline-end: .2rem;
    color: var(--be-color-text-muted);
}

.entity-avatar {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--be-white);
    font-weight: 700;
    font-size: .78rem;
    line-height: 1;
    background: var(--be-avatar-bg, #64748B);
    border: 1px solid rgba(0, 0, 0, .08);
}

.entity-avatar-sm {
    width: 1.65rem;
    height: 1.65rem;
    min-width: 1.65rem;
    font-size: .68rem;
}

.entity-avatar-lg {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    font-size: 1rem;
}

.entity-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.entity-avatar-image {
    background: transparent;
    color: inherit;
}

.entity-avatar-color-0 { --be-avatar-bg: #2563EB; }
.entity-avatar-color-1 { --be-avatar-bg: #059669; }
.entity-avatar-color-2 { --be-avatar-bg: #D97706; }
.entity-avatar-color-3 { --be-avatar-bg: #7C3AED; }
.entity-avatar-color-4 { --be-avatar-bg: #DB2777; }
.entity-avatar-color-5 { --be-avatar-bg: #0891B2; }
.entity-avatar-color-6 { --be-avatar-bg: #4F46E5; }
.entity-avatar-color-7 { --be-avatar-bg: #64748B; }

.entity-with-avatar {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.payment-method-icon {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    border-radius: var(--be-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--be-border);
    background: var(--be-bg);
    color: var(--be-text-muted);
    font-size: 1.2rem;
}

.payment-method-summary {
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-sm);
    background: var(--be-bg);
    padding: 1rem;
}

.payment-method-summary-valid {
    border-color: rgba(var(--be-color-success-rgb), .28);
    background: color-mix(in srgb, rgba(var(--be-color-success-rgb), .12) 70%, var(--be-bg));
}

.payment-method-summary-pending {
    border-color: rgba(var(--be-color-warning-rgb), .35);
    background: color-mix(in srgb, rgba(var(--be-color-warning-rgb), .12) 70%, var(--be-bg));
}

.payment-method-icon-valid {
    border-color: rgba(var(--be-color-success-rgb), .28);
    background: rgba(var(--be-color-success-rgb), .1);
    color: var(--be-color-success);
}

.payment-method-icon-pending {
    border-color: rgba(var(--be-color-warning-rgb), .35);
    background: rgba(var(--be-color-warning-rgb), .12);
    color: var(--be-color-warning);
}

.sidebar-organisation-context .entity-with-avatar {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 4.75rem);
    overflow: hidden;
}

.sidebar-organisation-context .entity-with-avatar > .min-w-0 {
    min-width: 0;
    overflow: hidden;
}

.sidebar-organisation-context .text-truncate {
    display: block;
    max-width: 100%;
}

.sidebar-organisation-context .btn {
    flex: 0 0 auto;
}

.sidebar-organisation-context {
    overflow: hidden;
}

.organisation-switch-list {
    max-height: 18rem;
    overflow: auto;
    border: 1px solid var(--be-color-border);
    border-radius: var(--be-radius-sm);
    background: var(--be-color-bg);
}

.organisation-filter-picker {
    position: relative;
}

.organisation-filter-picker-list {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 1045;
    box-shadow: var(--be-shadow-soft);
}

.organisation-switch-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--be-color-text);
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .7rem .48rem calc(.7rem + (var(--org-depth) * 1.25rem));
    text-align: left;
}

.organisation-switch-depth-0 {
    --org-depth: 0;
}

.organisation-switch-depth-1 {
    --org-depth: 1;
}

.organisation-switch-depth-2 {
    --org-depth: 2;
}

.organisation-switch-depth-3 {
    --org-depth: 3;
}

.organisation-switch-depth-4 {
    --org-depth: 4;
}

.organisation-switch-depth-5 {
    --org-depth: 5;
}

.organisation-switch-depth-6 {
    --org-depth: 6;
}

.organisation-switch-depth-7 {
    --org-depth: 7;
}

.organisation-switch-depth-8 {
    --org-depth: 8;
}

.tree-depth-spacer {
    display: inline-block;
    width: calc(var(--tree-depth, 0) * 1.25rem);
}

.tree-depth-0 { --tree-depth: 0; }
.tree-depth-1 { --tree-depth: 1; }
.tree-depth-2 { --tree-depth: 2; }
.tree-depth-3 { --tree-depth: 3; }
.tree-depth-4 { --tree-depth: 4; }
.tree-depth-5 { --tree-depth: 5; }
.tree-depth-6 { --tree-depth: 6; }
.tree-depth-7 { --tree-depth: 7; }
.tree-depth-8 { --tree-depth: 8; }

.organisation-switch-option.organisation-switch-heading {
    background: rgba(var(--be-color-primary-rgb), .04);
}

.organisation-switch-option:hover:not(.organisation-switch-context),
.organisation-switch-option.active:not(.organisation-switch-context) {
    background: rgba(var(--be-color-primary-rgb), .1);
}

.organisation-switch-option.organisation-switch-context {
    color: var(--be-color-text-muted);
    background: rgba(var(--be-color-primary-rgb), .025);
}

.organisation-switch-branch {
    width: .75rem;
    height: 1px;
    background: var(--be-color-border);
    flex: 0 0 .75rem;
}

.organisation-switch-depth-0 .organisation-switch-branch {
    visibility: hidden;
}

.audio-preview {
    max-width: 14rem;
}

.pre-wrap {
    white-space: pre-wrap;
}

.document-content-preview {
    white-space: pre-wrap;
    max-height: 50vh;
    overflow: auto;
}

.table-col-id {
    width: 80px;
}

.table-col-status {
    width: 1%;
}

.table-col-description {
    max-width: 520px;
}

.table-col-description-sm {
    max-width: 420px;
}

.tiny-icon {
    font-size: .75rem;
}

.tiny-icon-sm {
    font-size: .6rem;
    opacity: .7;
}

.bot-inline-icon {
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.small-meta {
    font-size: .65rem;
    line-height: 1.1;
}

.avatar-stack-md {
    width: 40px;
    height: 40px;
}

.branding-file-preview {
    width: 2.5rem;
    height: 2.5rem;
}

.branding-file-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.branding-list-logo {
    max-height: 2rem;
    max-width: 7.5rem;
    width: auto;
    object-fit: contain;
    display: block;
}

.branding-logo-preview {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.branding-logo-group {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.6rem;
    padding: .25rem .45rem;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-sm);
    background: color-mix(in srgb, var(--be-surface) 86%, var(--be-color-bg));
}

.branding-logo-group-dark {
    color: var(--be-dark-color-text, #f5f7fb);
    border-color: var(--be-dark-color-border, #2a3040);
    background: var(--be-dark-color-surface, #171b24);
}

.branding-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--be-border);
    border-radius: 999px;
    background: var(--be-swatch-color, transparent);
}

.branding-color-swatch-empty {
    background:
        linear-gradient(45deg, transparent 45%, var(--be-border) 45%, var(--be-border) 55%, transparent 55%),
        var(--be-surface);
}

.branding-palette-preview {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: nowrap;
}

.branding-palette-group {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .18rem .38rem;
    border: 1px solid var(--be-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--be-surface) 86%, var(--be-color-bg));
    white-space: nowrap;
}

.branding-palette-group-dark {
    color: var(--be-dark-color-text, #f5f7fb);
    border-color: var(--be-dark-color-border, #2a3040);
    background: var(--be-dark-color-surface, #171b24);
}

.branding-palette-label {
    font-size: .67rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.branding-ssl-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    white-space: nowrap;
}

.branding-ssl-status-card {
    justify-content: space-between;
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-md);
    background: color-mix(in srgb, var(--be-surface) 88%, var(--be-color-bg));
}

.branding-color-picker {
    width: 3.25rem;
}

.branding-color-pair-list {
    display: grid;
    gap: .75rem;
}

.branding-color-pair-row {
    display: grid;
    grid-template-columns: minmax(160px, .7fr) minmax(260px, 1fr) minmax(260px, 1fr);
    gap: 1rem;
    align-items: stretch;
    padding: .85rem;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-md);
    background: color-mix(in srgb, var(--be-surface) 90%, var(--be-color-bg));
}

.branding-color-pair-label {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--be-text);
}

.branding-color-pair-field,
.branding-color-pair-field-dark {
    padding: .75rem;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-sm);
    background: var(--be-color-bg);
}

.branding-color-pair-field-dark {
    color: var(--be-dark-color-text, #f5f7fb);
    border-color: var(--be-dark-color-border, #2a3040);
    background: var(--be-dark-color-surface, #171b24);
}

.branding-color-pair-field-dark .form-control {
    color: var(--be-dark-color-text, #f5f7fb);
    border-color: var(--be-dark-color-border, #2a3040);
    background-color: var(--be-dark-color-bg, #0f1117);
}

.branding-color-pair-field-dark .form-control-color {
    background-color: var(--be-dark-color-bg, #0f1117);
}

.branding-dark-logo-preview,
.branding-dark-logo-group .form-control {
    color: var(--be-dark-color-text, #f5f7fb);
    border-color: var(--be-dark-color-border, #2a3040);
    background-color: var(--be-dark-color-surface, #171b24);
}

.branding-dark-logo-group .form-control::file-selector-button {
    color: var(--be-dark-color-text, #f5f7fb);
    background-color: var(--be-dark-color-bg, #0f1117);
    border-color: var(--be-dark-color-border, #2a3040);
}

@media (max-width: 991.98px) {
    .branding-color-pair-row {
        grid-template-columns: 1fr;
    }
}

.credit-order-select-col {
    width: 42px;
}

.dashboard-bot-filter {
    min-width: 260px;
}

.dashboard-date-input {
    max-width: 160px;
}

.dashboard-sparkline {
    height: 42px;
}

.dashboard-chart {
    height: 300px;
}

.dashboard-chart-lg {
    height: 340px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

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

@media (max-width: 767px) {
    .kpi-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@keyframes liveBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
}

.badge-live {
    animation: liveBlink 1.7s infinite;
}

@keyframes liveBorderBlink {
    0%, 100% {
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35);
    }
    50% {
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .08);
    }
}

.card-live {
    animation: liveBorderBlink 1.7s infinite;
}

.bot-show-capability-code {
    min-width: 50px;
}

.type-option-image-box {
    width: 42px;
    height: 42px;
}

.type-option-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.speech-speed-tick-0 { --pos: 0%; }
.speech-speed-tick-12 { --pos: 20%; }
.speech-speed-tick-15 { --pos: 50%; }
.speech-speed-tick-17 { --pos: 70%; }
.speech-speed-tick-20 { --pos: 100%; }

.enreach-logo-icon {
    height: 1em;
    width: auto;
    vertical-align: middle;
    fill: currentColor;
}

.accordion-item {
    background-color: transparent !important;
}

/* ============================================================
   Tagify - Beone theme (champ + dropdown + tags colores)
   ============================================================ */

/* Champ (wrapper Tagify) : look Bootstrap */
.tagify {
    --tags-border-color: var(--be-border);
    --tags-hover-border-color: color-mix(in srgb, var(--be-primary) 35%, var(--be-border));
    --tags-focus-border-color: rgba(var(--be-primary-rgb), .55);

    --tagify-dd-bg-color: var(--be-bg);
    --tagify-dd-color-primary: var(--be-text);

    background: var(--be-bg);
    border-radius: var(--be-radius-sm);
    min-height: 38px;
}

.tagify:focus-within {
    border-color: rgba(var(--be-primary-rgb), .55);
    box-shadow: 0 0 0 .25rem var(--be-primary-focus-ring);
}

/* Dropdown */
.tagify__dropdown {
    background: var(--be-bg);
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-sm);
    box-shadow: var(--be-shadow);
    overflow: hidden;
}

.tagify__dropdown__item {
    color: var(--be-text);
}

.tagify__dropdown__item--active {
    background: rgba(var(--be-primary-rgb), .12);
}

/* ============================================================
   Tags : background = couleur du tag
   IMPORTANT : avec Tagify, le background est sur ".tagify__tag > div"
   (pas sur ".tagify__tag"), donc on applique la couleur là.
   On passe la couleur via: style="--be-tag-bg:#xxxxxx" sur <tag>.
   ============================================================ */

.tagify__tag {
    border: 0 !important;
}

/* Chip visuel */
.tagify__tag > div {
    background: var(--be-tag-bg, #64748B) !important;
    border: 1px solid rgba(0, 0, 0, .10) !important;
    border-radius: 999px !important;
    padding: .2rem .55rem !important;
}

/* Texte */
.tagify__tag-text {
    color: var(--be-white) !important;
    font-weight: 600;
}

/* Optionnel: si un dot est conserve dans les templates */
.tagify__tag__avatar-wrap {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    margin-right: .35rem;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

.document-card {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.document-card:hover {
    border-color: rgba(var(--be-primary-rgb), .35) !important;
    box-shadow: var(--be-shadow-sm);
    transform: translateY(-1px);
}

.document-card-icon,
.empty-state-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--be-primary);
    background: rgba(var(--be-primary-rgb), .10);
    flex: 0 0 auto;
}

.empty-state-icon {
    width: 54px;
    height: 54px;
    font-size: 1.35rem;
}

.login-card {
    max-width: 100%;
}

.login-oauth-button {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    font-weight: 600;
}

.login-oauth-button i {
    width: 1.15rem;
    text-align: center;
}

.topbar-logo-link,
.navbar-logo-link {
    line-height: 1;
}

.theme-logo {
    width: auto;
    object-fit: contain;
    display: block;
}

.theme-logo-topbar {
    height: 2rem;
}

.theme-logo-login {
    height: 4rem;
}

.theme-logo-footer {
    height: 1rem;
}

.login-brand-title {
    line-height: 1.1;
}

/* ============================================================
   Dark mode
   ============================================================ */
html[data-bs-theme="dark"] {
    color-scheme: dark;
}

html[data-bs-theme="dark"] body {
    background: var(--be-bg);
    color: var(--be-text);
}

html[data-bs-theme="dark"] .topbar,
html[data-bs-theme="dark"] .page-toolbar {
    background: color-mix(in srgb, var(--be-bg) 88%, transparent);
    border-color: var(--be-border);
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card-surface,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .table-clean,
html[data-bs-theme="dark"] .payment-method-summary,
html[data-bs-theme="dark"] .calendar-provider-card,
html[data-bs-theme="dark"] .calendar-connection-card,
html[data-bs-theme="dark"] .calendar-item-card,
html[data-bs-theme="dark"] .database-connection-card,
html[data-bs-theme="dark"] .database-table-card,
html[data-bs-theme="dark"] .document-card,
html[data-bs-theme="dark"] .login-card,
html[data-bs-theme="dark"] .datatable-filter-panel {
    background: var(--be-surface) !important;
    border-color: var(--be-border) !important;
    color: var(--be-text);
}

html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-body,
html[data-bs-theme="dark"] .bg-body-tertiary,
html[data-bs-theme="dark"] .table-light,
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .datatable-filter-panel-header {
    background-color: var(--be-head-bg) !important;
    color: var(--be-text) !important;
    border-color: var(--be-border) !important;
}

html[data-bs-theme="dark"] .text-dark {
    color: var(--be-text) !important;
}

html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-muted-2,
html[data-bs-theme="dark"] .form-text {
    color: var(--be-text-muted) !important;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .tagify,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--be-bg) !important;
    border-color: var(--be-border) !important;
    color: var(--be-text) !important;
}

html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--be-text-muted) !important;
}

html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-control[readonly],
html[data-bs-theme="dark"] .form-select:disabled {
    background-color: color-mix(in srgb, var(--be-surface) 82%, var(--be-bg)) !important;
    color: var(--be-text-muted) !important;
}

html[data-bs-theme="dark"] .input-group-text {
    background: var(--be-head-bg);
    border-color: var(--be-border);
    color: var(--be-text-muted);
}

html[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--be-text);
    --bs-btn-border-color: var(--be-border);
    --bs-btn-hover-bg: var(--be-head-bg);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--be-primary) 35%, var(--be-border));
    --bs-btn-hover-color: var(--be-text);
    background: var(--be-bg);
}

html[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--be-text);
    --bs-btn-bg: var(--be-head-bg);
    --bs-btn-border-color: var(--be-border);
    --bs-btn-hover-color: var(--be-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--be-head-bg) 82%, var(--be-primary-soft-bg));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--be-primary) 30%, var(--be-border));
}

html[data-bs-theme="dark"] .nav-aside .nav-link:hover,
html[data-bs-theme="dark"] #sidebarAdmin .accordion-button:hover {
    background: color-mix(in srgb, var(--be-primary) 18%, var(--be-head-bg));
    border-color: rgba(var(--be-primary-rgb), .28);
}

html[data-bs-theme="dark"] .nav-aside .nav-link.active,
html[data-bs-theme="dark"] #sidebarAdmin .accordion-button:not(.collapsed),
html[data-bs-theme="dark"] .badge-soft {
    background: rgba(var(--be-primary-rgb), .20);
    color: var(--be-text);
}

html[data-bs-theme="dark"] .nav-aside .nav-link.active,
html[data-bs-theme="dark"] #sidebarAdmin .accordion-button:not(.collapsed) {
    border-color: rgba(var(--be-primary-rgb), .38);
    box-shadow: inset 3px 0 0 var(--be-primary), 0 10px 24px rgba(0, 0, 0, .18);
}

html[data-bs-theme="dark"] #sidebarAdmin .accordion-body {
    border-left-color: color-mix(in srgb, var(--be-border) 78%, transparent);
}

html[data-bs-theme="dark"] .table-clean thead th,
html[data-bs-theme="dark"] table.dataTable thead th {
    background: var(--be-head-bg) !important;
    color: var(--be-text);
}

html[data-bs-theme="dark"] .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: color-mix(in srgb, var(--be-surface) 70%, var(--be-bg)) !important;
}

html[data-bs-theme="dark"] .table tbody tr:hover > * {
    background-color: rgba(var(--be-primary-rgb), .12) !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-bs-theme="dark"] .page-link {
    background: var(--be-bg) !important;
    border-color: var(--be-border) !important;
    color: var(--be-text) !important;
}

html[data-bs-theme="dark"] .select2-dropdown,
html[data-bs-theme="dark"] .tagify__dropdown {
    background: var(--be-bg) !important;
    border-color: var(--be-border) !important;
    color: var(--be-text) !important;
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
    background: rgba(var(--be-primary-rgb), .18);
    color: var(--be-text);
}

html[data-bs-theme="dark"] .dropdown-item,
html[data-bs-theme="dark"] .select2-results__option,
html[data-bs-theme="dark"] .tagify__dropdown__item {
    color: var(--be-text);
}

html[data-bs-theme="dark"] .markdown-editor-shell,
html[data-bs-theme="dark"] .markdown-editor-input {
    background: var(--be-bg) !important;
    color: var(--be-text);
}

html[data-bs-theme="dark"] .markdown-editor-toolbar,
html[data-bs-theme="dark"] .markdown-editor-preview {
    background: var(--be-head-bg) !important;
}

.btn-appearance {
    min-width: 2.35rem;
    padding-inline: .65rem;
}

.appearance-switcher-menu {
    min-width: 11rem;
}

.appearance-switcher-item i {
    width: 1.15rem;
    text-align: center;
}

.appearance-switcher-item.active {
    background: var(--be-primary-soft-bg);
    color: var(--be-primary);
}

html[data-bs-theme="dark"] .appearance-switcher-item.active {
    background: rgba(var(--be-primary-rgb), .22);
    color: var(--be-text);
}

.branding-dark-logo-preview {
    background: #0f1117 !important;
}

/* ============================================================
   Bot form / skill configuration
   ============================================================ */
/* Onglets collÒ©s Ò  la card */
    #botTabs {
        margin-bottom: 0 !important;
    }

    /* Harmonise les couleurs/bordures des onglets avec la card */
    .nav-tabs .nav-link {
        border: 1px solid var(--be-border);
        border-bottom: none;
        background: var(--be-bg); /* inactif */
        border-top-left-radius: var(--be-radius);
        border-top-right-radius: var(--be-radius);
        margin-bottom: -1px; /* chevauche la bordure de la card */
    }

    .nav-tabs .nav-link.active {
        background: var(--be-surface, #f8f9fb); /* mÒªme fond que la card */
        color: var(--be-text, inherit);
        border-color: var(--be-border);
    }

    /* La card du contenu d'onglet vient se clipser sous les tabs */
    .tab-content .tab-pane > .card {
        border: 1px solid var(--be-border);
        border-top: 1px solid var(--be-border);
        border-top-left-radius: 0; /* enleve l'arrondi du haut pour s'aligner aux tabs */
        border-top-right-radius: 0;
        background: var(--be-surface, #f8f9fb);
        box-shadow: none; /* Ò©vite une ligne sombre entre les deux */
        margin-top: 0;
    }

    /* Optionnel: leger re-style pour card-surface */
    .card-surface {
        background: var(--be-surface, #f8f9fb);
    }

    .skill-tab-remove {
        width: 1.15rem;
        height: 1.15rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--be-text-muted);
        font-size: .75rem;
    }

    .skill-tab-remove:hover {
        background: rgba(var(--be-primary-rgb), .12);
        color: var(--be-primary);
    }

    [data-skill-tab] {
        cursor: grab;
    }

    [data-skill-tab].skill-tab-dragging {
        opacity: .55;
        cursor: grabbing;
    }

    [data-skill-tab].skill-tab-drop-before {
        box-shadow: inset 3px 0 0 rgba(var(--be-primary-rgb), .65);
    }

    .skill-add-menu {
        min-width: 13rem;
    }

    .skill-add-tab {
        background: var(--be-primary) !important;
        border-color: var(--be-primary) !important;
        color: var(--be-white) !important;
    }

    .skill-add-tab:hover,
    .skill-add-tab:focus {
        background: var(--be-primary-hover, var(--be-primary)) !important;
        border-color: var(--be-primary-hover, var(--be-primary)) !important;
        color: var(--be-white) !important;
    }

    .skill-beta-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.45rem;
        height: 1.25rem;
        padding-inline: .35rem;
        font-size: .68rem;
    }

    .bot-form-section {
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: 1px solid var(--be-border);
    }

    .bot-form-section:first-of-type {
        padding-top: 0;
        margin-top: 0;
        border-top: 0;
    }

    .calendar-provider-card {
        border: 1px solid var(--be-border);
        border-radius: var(--be-radius);
        background: var(--be-bg);
        padding: 1rem;
        height: 100%;
    }

    .calendar-connection-card,
    .calendar-item-card,
    .database-connection-card,
    .database-table-card {
        border: 1px solid var(--be-border);
        border-radius: var(--be-radius);
        background: var(--be-bg);
    }

    .calendar-provider-icon,
    .calendar-item-icon,
    .database-provider-icon,
    .database-table-icon {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(var(--be-primary-rgb), .1);
        color: var(--be-primary);
        flex: 0 0 auto;
    }

    .calendar-provider-icon.google {
        background: rgba(234, 67, 53, .1);
        color: #ea4335;
    }

    .calendar-permissions,
    .database-permissions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
        gap: .5rem 1rem;
    }

    .calendar-item-card,
    .database-table-card {
        height: 100%;
    }

    .calendar-item-card .form-label,
    .database-table-card .form-label {
        font-size: .8rem;
        font-weight: 700;
        color: var(--be-muted);
        margin-bottom: .35rem;
    }

    .calendar-add-control .select2-container--default .select2-selection--single,
    .database-add-control .select2-container--default .select2-selection--single {
        min-height: 38px;
        display: flex;
        align-items: center;
    }

    .bot-form-section-title {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-bottom: .85rem;
        color: var(--be-text);
        font-size: .88rem;
        font-weight: 700;
    }

    .bot-form-section-title i {
        color: var(--be-primary);
        width: 1rem;
        text-align: center;
    }

    .bot-identity-grid {
        display: grid;
        grid-template-columns: minmax(18rem, .9fr) minmax(0, 1.6fr);
        gap: 1rem;
        align-items: start;
    }

    .bot-avatar-field {
        min-width: 0;
    }

    .speech-speed-field {
        --speech-speed-position: 0%;
        position: relative;
        padding-top: 1.35rem;
    }

    .speech-speed-value {
        position: absolute;
        top: 0;
        left: var(--speech-speed-position);
        transform: translateX(-50%);
        z-index: 1;
    }

    .speech-speed-field .form-range {
        height: 1.6rem;
        cursor: pointer;
    }

    .speech-speed-field .form-range::-webkit-slider-runnable-track {
        height: .42rem;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(var(--be-primary-rgb), .22), rgba(var(--be-primary-rgb), .55));
    }

    .speech-speed-field .form-range::-moz-range-track {
        height: .42rem;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(var(--be-primary-rgb), .22), rgba(var(--be-primary-rgb), .55));
    }

    .speech-speed-field .form-range::-webkit-slider-thumb {
        width: 1.05rem;
        height: 1.05rem;
        margin-top: -.32rem;
        background: var(--be-primary);
        border: 3px solid var(--be-bg);
        box-shadow: 0 0 0 .18rem rgba(var(--be-primary-rgb), .2);
    }

    .speech-speed-field .form-range::-moz-range-thumb {
        width: 1.05rem;
        height: 1.05rem;
        background: var(--be-primary);
        border: 3px solid var(--be-bg);
        box-shadow: 0 0 0 .18rem rgba(var(--be-primary-rgb), .2);
    }

    .speech-speed-scale {
        position: relative;
        height: 1.2rem;
        margin-top: .2rem;
        color: var(--be-text-muted);
        font-size: .75rem;
    }

    .speech-speed-scale span {
        position: absolute;
        top: 0;
        left: var(--pos);
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .speech-speed-scale span:first-child {
        transform: none;
    }

    .speech-speed-scale span:last-child {
        transform: translateX(-100%);
    }

    .type-current-card,
    .type-option-card {
        border: 1px solid var(--be-border);
        border-radius: var(--be-radius);
        background: var(--be-bg);
        transition: .08s border-color, .08s box-shadow, .08s transform;
    }

    .type-current-card {
        width: 100%;
        padding: .85rem 1rem;
    }

    .type-current-card:hover,
    .type-current-card:focus,
    .type-option-card:hover,
    .type-option-card:focus {
        border-color: var(--be-primary);
        box-shadow: var(--be-shadow);
    }

    .type-option-card:hover,
    .type-option-card:focus {
        transform: translateY(-1px);
    }

    .type-option-card.active {
        border-color: var(--be-primary);
        background: rgba(var(--be-primary-rgb), .04);
        box-shadow: 0 0 0 .12rem rgba(var(--be-primary-rgb), .14);
    }

    .type-option-card .checkmark {
        color: var(--be-primary);
        opacity: 0;
    }

    .type-option-card.active .checkmark {
        opacity: 1;
    }

    .type-option-card.is-filtered {
        display: none;
    }

    @media (max-width: 991.98px) {
        .bot-identity-grid {
            grid-template-columns: 1fr;
        }
    }

    .bot-editor-shell {
        display: grid;
        grid-template-columns: minmax(13.5rem, 15rem) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }

    .bot-editor-nav {
        position: sticky;
        top: 1rem;
        z-index: 2;
    }

    .bot-editor-nav .card {
        border: 1px solid var(--be-border);
        background: var(--be-surface, #f8f9fb);
        border-radius: var(--be-radius);
    }

    #botTabs.bot-editor-menu {
        display: flex;
        flex-direction: column;
        gap: .35rem;
    }

    #botTabs.bot-editor-menu .nav-item,
    #botTabs.bot-editor-menu .dropdown {
        width: 100%;
    }

    #botTabs.bot-editor-menu .nav-link {
        width: 100%;
        border: 1px solid transparent;
        border-radius: .45rem;
        background: transparent;
        color: var(--be-text);
        justify-content: flex-start;
        min-height: 2.55rem;
        padding: .55rem .65rem;
        text-align: left;
    }

    #botTabs.bot-editor-menu .nav-link:hover,
    #botTabs.bot-editor-menu .nav-link:focus {
        border-color: rgba(var(--be-primary-rgb), .25);
        background: rgba(var(--be-primary-rgb), .06);
    }

    #botTabs.bot-editor-menu .nav-link.active {
        border-color: rgba(var(--be-primary-rgb), .35);
        background: rgba(var(--be-primary-rgb), .12);
        color: var(--be-primary);
        font-weight: 700;
    }

    #botTabs.bot-editor-menu .nav-link.has-invalid-fields,
    #botTabs.bot-editor-menu .nav-link.tab-has-invalid {
        border-color: rgba(220, 53, 69, .55);
        background: rgba(220, 53, 69, .08);
    }

    #botTabs.bot-editor-menu .skill-add-tab {
        justify-content: center;
        margin-top: .35rem;
    }

    .bot-editor-main .tab-content .tab-pane > .card {
        border-radius: var(--be-radius);
        border-top-left-radius: var(--be-radius);
        border-top-right-radius: var(--be-radius);
        box-shadow: var(--be-shadow);
    }

    @media (max-width: 1199.98px) {
        .bot-editor-shell {
            grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
        }
    }

    @media (max-width: 767.98px) {
        .bot-editor-shell {
            grid-template-columns: 1fr;
        }

        .bot-editor-nav {
            position: static;
        }
    }


/* ============================================================
   Extracted page styles: templates/conversation/index.html.twig
   ============================================================ */
#convTable.table-striped > tbody > tr.conversation-unread:nth-of-type(odd) > *,
            #convTable tbody tr.conversation-unread:nth-of-type(odd) > td {

                background: rgba(var(--be-primary-rgb), .055) !important;

                font-weight: 600;

            }



            #convTable.table-striped > tbody > tr.conversation-unread:nth-of-type(even) > *,
            #convTable tbody tr.conversation-unread:nth-of-type(even) > td {

                background: color-mix(in srgb, rgba(var(--be-primary-rgb), .055), var(--be-bg) 42%) !important;

                font-weight: 600;

            }

            .conversation-read-badge {

                width: 2rem;

                height: 2rem;

                padding: 0;

                justify-content: center;

                display: inline-flex;

                align-items: center;

            }



            #convTable th.conversation-unread-marker-col,
            #convTable td.conversation-unread-marker-col {

                width: 6px !important;

                min-width: 6px !important;

                max-width: 6px !important;

                padding-left: 0 !important;

                padding-right: 0 !important;

                overflow: hidden;

                position: relative;

                text-align: left;

            }



            #convTable .conversation-unread-marker {

                display: block;

                position: absolute;

                top: 0;

                bottom: 0;

                left: 0;

                width: 4px;

                background: transparent;

            }



            #convTable tbody tr.conversation-unread .conversation-unread-marker {

                background: var(--be-primary) !important;

            }



            #convTable th.conversation-status-col,

            #convTable td.conversation-status-col {

                width: 3rem !important;

                min-width: 3rem !important;

                max-width: 3rem !important;

            }



            #convTable th.conversation-select-col,

            #convTable td.conversation-select-col {

                width: 2.75rem !important;

                min-width: 2.75rem !important;

                max-width: 2.75rem !important;

            }
            #convTable tbody tr {

                cursor: pointer;

            }



            #convTable tbody tr a,
            #convTable tbody tr button,
            #convTable tbody tr input[type="checkbox"],
            #convTable tbody tr label {

                cursor: pointer;

            }



            #convTable tbody tr input:not([type="checkbox"]),
            #convTable tbody tr select,
            #convTable tbody tr textarea {

                cursor: auto;

            }



            #convTable tbody tr > td.conversation-select-col {

                cursor: pointer;

            }



            #convTable tbody tr.conversation-row-selected > td {

                background-color: rgba(var(--be-primary-rgb), .09) !important;

            }



            .conversation-filter-grid .form-label {

                margin-bottom: .35rem;

                font-size: .82rem;

                font-weight: 700;

            }



            .conversation-filter-grid .form-control,

            .conversation-filter-grid .form-select,

            .conversation-filter-grid .select2-selection {

                min-height: 2.25rem;

            }

            .conversation-filter-grid [data-conversation-filter] {

                min-height: 2.25rem;

            }

            .conversation-top-info {

                color: var(--be-text-muted);

                display: inline-flex;

                align-items: center;

                min-height: 2.25rem;

                white-space: nowrap;

            }

            #convTable_wrapper .dataTables_length {

                display: inline-flex;

                align-items: center;

                gap: .75rem;

                flex-wrap: wrap;

            }


/* ============================================================
   Extracted page styles: templates/conversation/show.html.twig
   ============================================================ */
.ws-container {
            background: var(--be-bg);
        }

        .ws-wave {
            width: 100%;
            height: 96px;
        }

        .ws-container .btn i {
            width: 14px;
            text-align: center;
        }

        .chat-thread {
            background: var(--be-bg);
            max-height: 70vh;
            overflow: auto;
        }

        .conversation-history-shell {
            border-color: var(--be-border);
        }

        .avatar-circle {
            display: inline-grid;
            place-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--be-surface);
            color: var(--be-text);
            border: 1px solid var(--be-border);
        }

        .avatar-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid var(--be-border);
            object-fit: cover;
            background: var(--be-bg);
        }

        .chat-bubble {
            max-width: min(720px, 85%);
            border-radius: 1rem;
            padding: .65rem .9rem;
            box-shadow: var(--be-shadow);
            border: 1px solid var(--be-border);
        }

        /* Utilisateur (gauche) maintenant en rouge */
        .bubble-user {
            background: var(--be-primary);
            color: var(--be-white);
            border-color: var(--be-primary);
        }

        .bubble-user a {
            color: var(--be-white);
            text-decoration: underline;
        }

        /* Bot (droite) maintenant gris clair */
        .bubble-bot {
            background: var(--be-surface);
            color: var(--be-text);
            border-color: var(--be-border);
        }

        .chat-system-line {
            background: var(--be-head-bg);
            border: 1px dashed var(--be-border);
            border-radius: .5rem;
        }

        /* Petites flÒ¨ches faÒ§on messagerie (optionnel) */
        .chat-bubble-wrap {
            position: relative;
        }

        .bubble-user:after,
        .bubble-bot:after {
            content: "";
            position: absolute;
            top: 10px;
            width: 0;
            height: 0;
            border: 8px solid transparent;
        }

        /* FlÒ¨che gauche (user, rouge) */
        .bubble-user:after {
            left: -14px;
            border-right-color: var(--be-primary);
        }

        /* FlÒ¨che droite (bot, gris clair) */
        .bubble-bot:after {
            right: -14px;
            border-left-color: var(--be-border);
        }

        /* Effet actif : anneau dÒ©gradÒ© + pulsation douce, sans dÒ©placer la bulle */
        .chat-row.active .chat-bubble {
            position: relative;
            z-index: 0; /* crÒ©e un contexte propre */
        }

        .chat-row.active .chat-bubble::before {
            content: "";
            position: absolute;
            inset: -6px; /* largeur du halo */
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(60deg, #ED8533, #F8B066);
            -webkit-mask: linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            padding: 6px; /* epaisseur de l'anneau */
            opacity: 0; /* demarre invisible pour eviter le flash */
            filter: blur(6px);
            transform: scale(0.98);
            will-change: opacity, filter, transform;
            animation: haloSoft 4.1s cubic-bezier(.22, .61, .36, 1) 1 forwards; /* fin solide */
        }

        /* Animation douce : apparait, pulse, puis se stabilise */
        @keyframes haloSoft {
            0% {
                opacity: 0;
                filter: blur(8px);
                transform: scale(0.98);
            }
            25% {
                opacity: 0.45;
                filter: blur(6px);
                transform: scale(1.00);
            }
            /* montÒ©e douce */
            40% {
                opacity: 0.20;
                filter: blur(7px);
                transform: scale(0.995);
            }
            /* 1er relÒ¢chement lÒ©ger */
            60% {
                opacity: 0.65;
                filter: blur(5px);
                transform: scale(1.005);
            }
            /* 2e montÒ©e douce */
            80% {
                opacity: 0.40;
                filter: blur(6px);
                transform: scale(1.000);
            }
            /* relÒ¢chement */
            100% {
                opacity: 1;
                filter: blur(4px);
                transform: scale(1.000);
            }
            /* termine solide */
        }

        /* Accessibilite : reduit l'animation si l'utilisateur prefere moins de mouvement */
        @media (prefers-reduced-motion: reduce) {
            .chat-row.active .chat-bubble::before {
                animation: haloSoft 0.6s linear 1 forwards;
                filter: blur(4px);
            }
        }


        /* Etat post-clignotement plus calme */
        .chat-row .chat-bubble {
            transition: box-shadow .3s ease;
        }


/* ============================================================
   Extracted page styles: templates/dashboard/live_calls.html.twig
   ============================================================ */
@keyframes liveBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: .3; }
        }
        .badge-live { animation: liveBlink 1.7s infinite; }


/* ============================================================
   Extracted page styles: templates/bot/_form.html.twig
   ============================================================ */
.badge-soft {
        background: rgba(var(--be-primary-rgb), .12);
        color: var(--be-primary);
    }

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

    .tag-pill {
        border: 1px solid var(--be-border);
        background: var(--be-bg);
        color: var(--be-text);
        border-radius: 999px;
        padding: .3rem .65rem;
        font-size: .9rem;
        transition: .08s background-color, .08s border-color, .08s color;
    }

    .tag-pill:hover {
        border-color: var(--be-primary);
    }

    .tag-pill.active {
        background: rgba(var(--be-primary-rgb), .12);
        border-color: var(--be-primary);
        color: var(--be-primary);
        box-shadow: 0 0 0 .12rem rgba(var(--be-primary-rgb), .15);
    }


/* ============================================================
   Extracted component styles: templates/_markdown_editor.html.twig
   ============================================================ */
.markdown-editor-shell {
        border: 1px solid var(--be-v2-border-soft, var(--be-border));
        border-radius: var(--be-radius);
        background: var(--be-v2-panel, var(--be-bg));
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(var(--be-shadow-color-rgb), .03);
    }

    .markdown-editor-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
        padding: .35rem;
        border-bottom: 1px solid var(--be-v2-border-soft, var(--be-border));
        background: color-mix(in srgb, var(--be-v2-panel, var(--be-bg)) 86%, var(--be-color-surface));
    }

    .markdown-editor-toolbar .btn {
        min-width: 2rem;
    }

    .markdown-editor-input {
        min-height: 9rem;
        max-height: 28rem;
        overflow: auto;
        padding: .8rem .9rem;
        color: var(--be-text);
        background: var(--be-v2-panel, var(--be-bg));
        outline: 0;
    }

    .markdown-editor-raw {
        min-height: 9rem;
        max-height: 28rem;
        padding: .8rem .9rem;
        border: 0;
        border-radius: 0;
        resize: vertical;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: .92rem;
        line-height: 1.55;
    }

    .markdown-editor-mode-toggle {
        flex: 0 0 auto;
    }

    .markdown-editor-raw-mode [data-markdown-action] {
        opacity: .45;
        pointer-events: none;
    }

    .markdown-editor-input:focus {
        box-shadow: inset 0 0 0 .2rem rgba(var(--be-primary-rgb), .12);
    }

    .markdown-editor-input:empty::before {
        content: attr(data-placeholder);
        color: var(--be-text-muted);
        pointer-events: none;
    }

    .markdown-editor-input > *:last-child {
        margin-bottom: 0;
    }

    .markdown-editor-input h3,
    .markdown-editor-input h4 {
        margin: .35rem 0 .55rem;
        font-weight: 750;
    }

    .markdown-editor-input p,
    .markdown-editor-input ul,
    .markdown-editor-input blockquote {
        margin-bottom: .65rem;
    }

    .markdown-editor-input blockquote {
        border-left: 3px solid rgba(var(--be-primary-rgb), .35);
        padding-left: .8rem;
        color: var(--be-v2-text-soft, var(--be-text-muted));
    }

    .markdown-editor-input code {
        padding: .08rem .25rem;
        border-radius: .3rem;
        background: rgba(var(--be-shadow-color-rgb), .07);
        color: var(--be-text);
    }


/* ============================================================
   Extracted component styles: templates/type/_form.html.twig
   ============================================================ */
.icon-picker { max-height: 260px; overflow-y: auto; }
    .icon-option {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.5rem; height: 2.5rem; border-radius: .5rem;
        transition: transform .05s ease-in-out;
    }
    .icon-option:active { transform: scale(0.98); }
    .icon-option.active {
        color: var(--be-white);
        background-color: var(--be-primary, #e53859);
        border-color: var(--be-primary, #e53859);
        box-shadow: 0 0 0 .15rem rgba(var(--be-primary-rgb,229,56,89), .25);
    }

/* ============================================================
   Final theme harmonization
   ============================================================ */
html[data-bs-theme="dark"] .nav-tabs .nav-link {
    background: var(--be-bg);
    border-color: var(--be-border);
    color: var(--be-text-muted);
}

html[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--be-surface);
    color: var(--be-text);
    border-color: var(--be-border);
}

html[data-bs-theme="dark"] .calendar-provider-card,
html[data-bs-theme="dark"] .calendar-connection-card,
html[data-bs-theme="dark"] .calendar-item-card,
html[data-bs-theme="dark"] .database-connection-card,
html[data-bs-theme="dark"] .database-table-card,
html[data-bs-theme="dark"] .type-current-card,
html[data-bs-theme="dark"] .type-option-card,
html[data-bs-theme="dark"] .tag-pill,
html[data-bs-theme="dark"] .ws-container,
html[data-bs-theme="dark"] .markdown-editor-shell,
html[data-bs-theme="dark"] .markdown-editor-input {
    background: var(--be-surface) !important;
    border-color: var(--be-border) !important;
    color: var(--be-text) !important;
}

html[data-bs-theme="dark"] .conversation-history-shell {
    background: color-mix(in srgb, var(--be-bg) 88%, var(--be-surface)) !important;
    border-color: var(--be-border) !important;
}

html[data-bs-theme="dark"] .chat-thread {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--be-bg) 88%, var(--be-surface)) 0%,
            var(--be-bg) 100%) !important;
    color: var(--be-text);
}

html[data-bs-theme="dark"] .chat-system-line {
    background: color-mix(in srgb, var(--be-head-bg) 78%, var(--be-bg)) !important;
    border-color: color-mix(in srgb, var(--be-border) 70%, var(--be-primary)) !important;
    color: var(--be-text-muted);
}

html[data-bs-theme="dark"] .chat-system-line .text-muted,
html[data-bs-theme="dark"] .chat-system-line .text-muted-2 {
    color: color-mix(in srgb, var(--be-text-muted) 86%, var(--be-text)) !important;
}

html[data-bs-theme="dark"] .markdown-editor-toolbar,
html[data-bs-theme="dark"] .markdown-editor-preview {
    background: var(--be-head-bg) !important;
    border-color: var(--be-border) !important;
}

html[data-bs-theme="dark"] .bubble-bot {
    background: color-mix(in srgb, var(--be-head-bg) 78%, var(--be-bg));
    color: var(--be-text);
    border-color: color-mix(in srgb, var(--be-border) 72%, var(--be-text-muted));
}

html[data-bs-theme="dark"] .bubble-user {
    background: var(--be-primary);
    color: var(--be-white);
    border-color: var(--be-primary);
}

html[data-bs-theme="dark"] .bubble-bot:after {
    border-left-color: color-mix(in srgb, var(--be-head-bg) 78%, var(--be-bg));
}

html[data-bs-theme="dark"] .bubble-user:after {
    border-right-color: var(--be-primary);
}

html[data-bs-theme="dark"] .chat-meta {
    color: color-mix(in srgb, var(--be-text-muted) 82%, var(--be-text)) !important;
}

html[data-bs-theme="dark"] .chat-avatar .avatar-circle {
    background: color-mix(in srgb, var(--be-head-bg) 72%, var(--be-bg));
    color: var(--be-text);
    border-color: var(--be-border);
}

html[data-bs-theme="dark"] .badge-tag {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

html[data-bs-theme="dark"] .type-current-card,
html[data-bs-theme="dark"] .type-option-card {
    background: color-mix(in srgb, var(--be-bg) 82%, var(--be-surface)) !important;
    border-color: color-mix(in srgb, var(--be-border) 86%, transparent) !important;
    color: var(--be-text) !important;
    box-shadow: none;
}

html[data-bs-theme="dark"] .type-current-card:hover,
html[data-bs-theme="dark"] .type-current-card:focus,
html[data-bs-theme="dark"] .type-option-card:hover,
html[data-bs-theme="dark"] .type-option-card:focus {
    background: color-mix(in srgb, var(--be-head-bg) 86%, var(--be-bg)) !important;
    border-color: var(--be-primary) !important;
    box-shadow: 0 0 0 .12rem rgba(var(--be-primary-rgb), .2);
}

html[data-bs-theme="dark"] .type-option-card.active {
    background: color-mix(in srgb, var(--be-primary) 14%, var(--be-bg)) !important;
    border-color: var(--be-primary) !important;
    box-shadow: 0 0 0 .12rem rgba(var(--be-primary-rgb), .24);
}

html[data-bs-theme="dark"] .type-current-card .badge-soft,
html[data-bs-theme="dark"] .type-option-card .badge-soft {
    background: color-mix(in srgb, var(--be-primary) 18%, var(--be-bg)) !important;
    color: color-mix(in srgb, var(--be-primary) 72%, var(--be-white)) !important;
    border: 1px solid rgba(var(--be-primary-rgb), .24);
}

html[data-bs-theme="dark"] .type-current-card .text-muted-2,
html[data-bs-theme="dark"] .type-option-card .text-muted-2 {
    color: color-mix(in srgb, var(--be-text-muted) 88%, var(--be-text)) !important;
}

html[data-bs-theme="dark"] .tag-pill {
    background: color-mix(in srgb, var(--be-bg) 86%, var(--be-surface)) !important;
    border-color: color-mix(in srgb, var(--be-border) 86%, transparent) !important;
    color: var(--be-text) !important;
    box-shadow: none;
}

html[data-bs-theme="dark"] .tag-pill:hover {
    background: color-mix(in srgb, var(--be-primary) 8%, var(--be-bg)) !important;
    border-color: color-mix(in srgb, var(--be-primary) 65%, var(--be-border)) !important;
    color: var(--be-text) !important;
}

html[data-bs-theme="dark"] .tag-pill.active {
    background: color-mix(in srgb, var(--be-primary) 20%, var(--be-bg)) !important;
    border-color: var(--be-primary) !important;
    color: color-mix(in srgb, var(--be-primary) 72%, var(--be-white)) !important;
    box-shadow: 0 0 0 .12rem rgba(var(--be-primary-rgb), .2);
}

html[data-bs-theme="dark"] #codec-tags .tag-pill:not(.active) {
    background: color-mix(in srgb, var(--be-bg) 90%, var(--be-surface)) !important;
    border-color: color-mix(in srgb, var(--be-border) 82%, var(--be-bg)) !important;
    color: var(--be-text) !important;
}

html[data-bs-theme="dark"] #codec-tags .tag-pill.active {
    background: color-mix(in srgb, var(--be-primary) 18%, var(--be-bg)) !important;
    border-color: var(--be-primary) !important;
    color: color-mix(in srgb, var(--be-primary) 74%, var(--be-white)) !important;
}

.json-code-editor {
    position: relative;
    min-height: 15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    overflow: hidden;
}

.json-code-editor:focus-within {
    border-color: var(--brand-primary, var(--bs-primary));
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12);
}

.json-code-highlight,
.json-code-textarea {
    margin: 0;
    min-height: 15rem;
    padding: .875rem 1rem;
    font: 0.875rem/1.55 var(--bs-font-monospace);
    tab-size: 2;
    white-space: pre;
    overflow: auto;
}

.json-code-highlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: var(--bs-body-color);
    background: transparent;
}

.json-code-textarea {
    position: relative;
    z-index: 1;
    width: 100%;
    resize: vertical;
    border: 0;
    background: transparent !important;
    color: transparent !important;
    caret-color: var(--bs-body-color);
    -webkit-text-fill-color: transparent !important;
}

.json-code-textarea:focus {
    outline: 0;
    box-shadow: none;
    background: transparent !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.json-code-textarea::selection {
    background: rgba(var(--bs-primary-rgb), .25);
    color: transparent;
}

.json-code-highlight .json-key,
.json-example-modal-code .json-key { color: #b42361; }
.json-code-highlight .json-string,
.json-example-modal-code .json-string { color: #0f766e; }
.json-code-highlight .json-number,
.json-example-modal-code .json-number { color: #7c3aed; }
.json-code-highlight .json-literal,
.json-example-modal-code .json-literal { color: #c2410c; font-weight: 600; }
.json-code-highlight .json-comment,
.json-example-modal-code .json-comment { color: #64748b; font-style: italic; }

.json-example-modal-code {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--be-border, var(--bs-border-color));
    border-radius: var(--bs-border-radius);
    background: var(--be-surface-subtle, var(--bs-tertiary-bg));
    color: var(--be-text, var(--bs-body-color));
    font: 0.875rem/1.55 var(--bs-font-monospace);
    white-space: pre-wrap;
}

.btn-icon-xs {
    --bs-btn-padding-x: .35rem;
    --bs-btn-padding-y: .15rem;
    --bs-btn-font-size: .72rem;
    line-height: 1;
}

html[data-bs-theme="dark"] .json-code-highlight .json-key,
html[data-bs-theme="dark"] .json-example-modal-code .json-key { color: #fb7185; }
html[data-bs-theme="dark"] .json-code-highlight .json-string,
html[data-bs-theme="dark"] .json-example-modal-code .json-string { color: #5eead4; }
html[data-bs-theme="dark"] .json-code-highlight .json-number,
html[data-bs-theme="dark"] .json-example-modal-code .json-number { color: #c4b5fd; }
html[data-bs-theme="dark"] .json-code-highlight .json-literal,
html[data-bs-theme="dark"] .json-example-modal-code .json-literal { color: #fdba74; }
html[data-bs-theme="dark"] .json-code-highlight .json-comment,
html[data-bs-theme="dark"] .json-example-modal-code .json-comment { color: #94a3b8; }