@media (min-width: 576px) { .navbar-vertical.navbar-expand-sm .navbar-nav { flex-grow: 0; } } /* ── Utilitaires partagés (ex-styles inline) ──────────────────────────────── */ /* État masqué togglé par JS — !important pour résister à un style.display='' ; rag.js / playground.js ajoutent/retirent cette classe (plus de style.display). */ .is-hidden { display: none !important; } /* Autorise le text-truncate d'un enfant dans un conteneur flex. */ .min-w-0 { min-width: 0; } .tnum { font-variant-numeric: tabular-nums; } .pre-wrap { white-space: pre-wrap; } /* ── Réglages ponctuels par page (trop courts pour un fichier dédié) ──────── */ .dash-chart { min-height: 260px; } /* dashboard : conteneur ApexCharts */ .dash-qbar { height: 4px; } /* dashboard : barre « Top questions » */ .dash-donut { min-height: 300px; } /* dashboard : répartition par contexte (ApexCharts donut) */ .user-checkbox-list { max-height: 320px; } /* access_rag/edit : liste scrollable */ /* Aperçu widget : accent par défaut (surchargé dynamiquement par widget-preview.js). */ .s4wpv { --s4-accent: #3b82f6; } /* ── SweetAlert2 : popup aligne sur le theme Tabler (clair/sombre) ────────── */ .swal2-popup.swal-tabler { background: var(--tblr-bg-surface); color: var(--tblr-body-color); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius, 0.5rem); } .swal2-popup.swal-tabler .swal2-title, .swal2-popup.swal-tabler .swal2-html-container { color: var(--tblr-body-color); } .swal2-popup.swal-tabler .swal2-actions { gap: 0.5rem; } /* ── Tom Select : aligne sur le theme Tabler (clair/sombre) ───────────────── */ /* Le theme bootstrap5 lit des variables --bs-* absentes de Tabler (qui n'expose que --tblr-*) ET code en dur la couleur du texte (color:#343a40), illisible en mode sombre. style.css est chargee APRES le theme : a specificite egale, ces regles l'emportent. On alias les --bs-* utiles (fond/bordure/rayon) et on force les couleurs sur les variables Tabler, qui basculent seules sous [data-bs-theme=dark] et collent au rendu des natif Tabler. */ .ts-wrapper .ts-control { background-color: var(--tblr-bg-forms, #fff); border-color: var(--tblr-border-color); } /* Couleur du texte (surcharge le color:#343a40 code en dur du theme). */ .ts-control, .ts-control input, .ts-control .item, .ts-dropdown, .ts-dropdown .option { color: var(--tblr-body-color); } .ts-control input::placeholder { color: var(--tblr-secondary, #6c757d); } /* Menu : fond surface Tabler. */ .ts-dropdown { background-color: var(--tblr-bg-surface); border-color: var(--tblr-border-color); z-index: 1100; } /* Option survolee / active : surbrillance primaire, texte lisible. */ .ts-dropdown .option.active, .ts-dropdown .option:hover, .ts-dropdown .active { background-color: var(--tblr-primary); color: #fff; } /* Petite taille : suit form-select-sm (la classe est recopiee sur .ts-wrapper). */ .ts-wrapper.form-select-sm .ts-control { min-height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; } .card-header .card-subtitle { margin-left: 15px; } .card { --tblr-card-spacer-y: 0.5rem; --tblr-card-spacer-x: 0.75rem; --tblr-card-cap-padding-y: 0.5rem; --tblr-card-cap-padding-x: 0.75rem; } [data-bs-theme="dark"] { /* color-scheme: dark; --tblr-body-color: var(--tblr-gray-200); --tblr-secondary: var(--tblr-gray-400); */ --tblr-body-bg: #0b0e15; --tblr-bg-surface: #11151e; /* --tblr-emphasis-color: #ffffff; --tblr-emphasis-color-rgb: 255, 255, 255; --tblr-bg-forms: var(--tblr-gray-900); --tblr-bg-surface: var(--tblr-gray-800); --tblr-bg-surface-inverted: var(--tblr-gray-100); --tblr-bg-surface-secondary: var(--tblr-gray-900); --tblr-bg-surface-tertiary: var(--tblr-gray-800); --tblr-text-inverted: var(--tblr-gray-800); --tblr-link-color: var(--tblr-primary); --tblr-link-hover-color: color-mix(in srgb, var(--tblr-primary), black 20%); --tblr-active-bg: rgb(34.676744186, 45.8627906977, 61.523255814); --tblr-disabled-color: color-mix(in srgb, var(--tblr-body-color) 40%, transparent); --tblr-border-color: var(--tblr-gray-700); --tblr-border-color-translucent: var(--tblr-dark-mode-border-color-translucent); --tblr-border-dark-color: var(--tblr-dark-mode-border-dark-color); --tblr-border-active-color: var(--tblr-dark-mode-border-active-color); --tblr-btn-color: rgb(27.323255814, 36.1372093023, 48.476744186); */ } @media (min-width: 1700px) { .container-xxl { max-width: 1620px; } } /* Indicateurs cliquables : chacun pilote la courbe centrale (cf. dashboard.js). L'indicateur sélectionné porte .active (Conversations par défaut). */ .indicator-row { cursor: pointer; border-left: 3px solid transparent; transition: background-color .12s ease, border-color .12s ease; } .indicator-row:hover { background-color: rgba(255, 255, 255, .03); } .indicator-row.active { border-left-color: var(--tblr-primary, #066fd1); background-color: rgba(255, 255, 255, .05); } .indicator-row:focus-visible { outline: 2px solid var(--tblr-primary, #066fd1); outline-offset: -2px; } /* Impression (export PDF du tableau de bord via le navigateur) : on retire le chrome applicatif (sidebar/pied/boutons déjà en .d-print-none) et on bascule le thème sombre en clair pour un rendu lisible sur papier. */ @media print { html, body { background: #fff !important; color: #1a1d22 !important; } .navbar-vertical, .footer, .navbar-toggler { display: none !important; } .page-wrapper { margin: 0 !important; } .page-body { margin-top: 0 !important; } .card { background: #fff !important; color: #1a1d22 !important; border: 1px solid #d0d5dd !important; box-shadow: none !important; break-inside: avoid; } .card-header, .card-body { background: #fff !important; } h1, h2, h3, .card-title, .h1 { color: #1a1d22 !important; } .text-secondary, .text-muted, .small { color: #5a6472 !important; } a { color: inherit !important; text-decoration: none !important; } /* Graphiques ApexCharts : libellés/grille forcés en sombre (sinon blancs sur blanc). */ .apexcharts-text, .apexcharts-text tspan { fill: #4a5568 !important; } .apexcharts-gridline, .apexcharts-grid line { stroke: rgba(0,0,0,.12) !important; } @page { margin: 14mm; } }