/* barre de scrool des iframes */
/* Pour Chrome, Safari et Opera */
::-webkit-scrollbar {  
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--bs-dark);
  border-radius: var(--bs-border-radius);
}

/* Pour Firefox */
scrollbar-width: thin;
scrollbar-color: var(--bs-dark) var(--bs-light);

/* Pour Internet Explorer et Edge */
-ms-overflow-style: none;
scrollbar-face-color: var(--bs-light);
scrollbar-base-color: var(--bs-dark);




.ql-toolbar {
    z-index: 1000 !important;
}

.tagify__inline__suggestions {
    z-index: 9999 !important; /* Choisissez un nombre qui convient à votre situation */
}


/* suppresion de l'increment des input de type number */
/* Pour tous les navigateurs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Pour Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.select2-valid .select2-selection {
    border-color: #50CD89 !important; /* Vert pour valide */
}

.select2-invalid .select2-selection {
    border-color: #F1416C !important; /* Orange pour non valide */
}

.select2-warning .select2-selection {
    border-color: #1B1B29 !important; /* Orange pour non valide */
}
    

.min-height-100vh {
    min-height: calc(100vh - 250px); /* Utilise la hauteur de la fenêtre de visualisation pour le minimum de hauteur */
    display: flex;
    flex-direction: column; /* Garde la direction du flux en colonne comme le comportement par défaut */
    justify-content: center; /* Centre verticalement le contenu */
}

.ql-size-10px { font-size: 10px; }
.ql-size-12px { font-size: 12px; }
.ql-size-14px { font-size: 14px; }
.ql-size-18px { font-size: 18px; }
.ql-size-24px { font-size: 24px; }
.ql-size-36px { font-size: 36px; }


/* 
   ============================
   GLOBAL READONLY-MODE
   ============================
   1) Tous les <input>, <select>, <textarea>, <button>, 
      ainsi que les .form-check (checkbox/radio Metronic) 
      et .btn... sont rendus "non-cliquables" et "non sélectionnables".
*/
/* ============================
   Lecture seule globale
============================ */

/* 1) Empêche le clic, etc. */
.readonly-mode input,
.readonly-mode select,
.readonly-mode textarea,
.readonly-mode button,
.readonly-mode .form-check-input,
.readonly-mode .form-check-label,
.readonly-mode .btn {
  pointer-events: none !important;
  user-select: none !important;
  cursor: default !important;
  opacity: 1 !important;
}

/* 2) Désactivation de Select2 (clic bloqué) */
.readonly-mode .select2-container,
.readonly-mode .select2-container * {
  pointer-events: none !important;
  user-select: none !important;
  cursor: default !important;
  opacity: 1 !important;
}

/* 3) Exceptions : éléments qui doivent rester cliquables malgré .readonly-mode */
.readonly-mode .ignore-readonly {
  pointer-events: auto !important;
  user-select: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

/* ============================
   Fond gris en lecture seule
   par défaut (thème clair)
============================ */
.readonly-mode .form-control,
.readonly-mode .form-select,
.readonly-mode .form-check-input {
  background-color: #F2F2F2 !important;
  color: #000 !important; /* texte noir */
}

/* ============================
   FOND ET TEXTE EN THÈME SOMBRE
   On cible TOUT ce qui doit être "foncé"
============================ */
[data-bs-theme="dark"] .readonly-mode .form-control,
[data-bs-theme="dark"] .readonly-mode .form-select,
[data-bs-theme="dark"] .readonly-mode .form-check-input,
[data-bs-theme="dark"] .readonly-mode .select2-container .select2-selection__rendered,
[data-bs-theme="dark"] .readonly-mode .select2-container .select2-selection--single,
[data-bs-theme="dark"] .readonly-mode .select2-container .select2-selection--multiple {
  background-color: #3B3B3B !important; /* gris foncé */
  color: #E0E0E0 !important;           /* texte clair */
}

/* OPTIONNEL : si vous voulez aussi régler la bordure des éléments en sombre */
[data-bs-theme="dark"] .readonly-mode .form-control,
[data-bs-theme="dark"] .readonly-mode .form-select,
[data-bs-theme="dark"] .readonly-mode .form-check-input,
[data-bs-theme="dark"] .readonly-mode .select2-container .select2-selection--single,
[data-bs-theme="dark"] .readonly-mode .select2-container .select2-selection--multiple {
  border-color: #555 !important; /* par exemple un gris un peu plus clair */
}

/* 
   2) Optionnel : si vous ne voulez plus du tout le "hover effect" 
      sur les boutons quand on survole, 
      vous pouvez remettre pointer-events, 
      ou forcer un style neutre sur :hover 
      (ex. background-color: initial) 
      Mais en général pointer-events: none 
      suffit pour désactiver le hover.
*/

/* Quand le bouton est en mode "recording", on le colore en rouge */
.tox-tbtn.recording {
  color: red !important;
  /* Vous pouvez aussi changer le fond, par ex:
  background-color: #ffe0e0 !important;
  border-color: red !important; */
}

.nav-link .small-number {
  font-size: 0.75rem; /* ou ce que tu veux */
  text-transform: none;
}


/* custom-navbar.css : avatar, emoji et espacements mobiles */

/* -------- Avatars et emoji -------- */
@media (max-width: 767.98px) {
	#kt_header_user_menu_toggle .symbol-40px {
		width: 40px !important;
		height: 40px !important;
	}
	#kt_header_user_menu_toggle img,
	#kt_header_user_menu_toggle .symbol-label {
		width: 40px !important;
		height: 40px !important;
		font-size: 1.25rem !important;   /* ≃ fs-2 */
	}
	#kt_header_user_menu_toggle .fs-3x,
	#kt_header_user_menu_toggle .fs-md-3x {
		font-size: 1.6rem !important;    /* ≃ fs-2x */
	}
}

/* -------- Icônes génériques -------- */
@media (max-width: 767.98px) {
	/* marge horizontale plus serrée entre les icônes de la barre */
	.app-navbar-item {
		margin-left: .5rem !important;
		margin-right: .5rem !important;
	}

	/* petits boutons icône (notifications, chat, etc.) */
	.app-navbar .btn-icon.w-35px,
	.app-navbar .btn-icon.w-md-40px {
		width : 32px !important;
		height: 32px !important;
	}

	/* police un peu plus petite pour ki-icons super‑larges */
	.app-navbar .fs-2hx { font-size: 1.6rem !important; }
}


/* 1) Wrapper positionné */
.voice-wrapper {
  position: relative;
  width: 100%;
}

/* 2) On décale le texte du textarea */
.voice-textarea {
  padding-left: 3rem; /* laisse assez de place au micro */
}

/* 3) Bouton micro discret et centré */
.voice-btn-floating {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.25rem;
  display: flex;               /* <<< passe en flex */
  align-items: center;         /* <<< centre verticalement */
  justify-content: center;     /* <<< centre horizontalement */
  font-size: 1rem;             /* taille de l’icône */
  z-index: 10;
  transition: background-color .2s, border-color .2s;
}

/* 4) État enregistrement */
.voice-btn-floating.recording {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

.voice-btn-floating i {
  margin-left: 0.15rem;
}

.tox-toolbar .tox-tbtn.recording {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

#selectChecklist {
  min-width: 200px;   /* Largeur minimale souhaitée */
  max-width: 100%;    /* Ne pas dépasser la largeur du conteneur parent */
  box-sizing: border-box;
}

.ql-snow .ql-toolbar button svg {
  fill: currentColor;
}

.shadow-glow {
    box-shadow: 0 0 8px 4px var(--bs-primary);
    transition: box-shadow 0.2s ease-in-out;
}

#ticker_brief {
    height: 28px;
    max-width: 1000px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
}

/* Dégradé doux sur 60px avec couleur texte #A1A5B7 */
#ticker_brief::before,
#ticker_brief::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 15;
    pointer-events: none;
}

/* Dégradé gauche */
#ticker_brief::before {
    left: 0;
    background: linear-gradient(to right, rgba(161, 165, 183, 1), transparent);
}

/* Dégradé droite */
#ticker_brief::after {
    right: 0;
    background: linear-gradient(to left, rgba(161, 165, 183, 1), transparent);
}

#ticker_content {
    position: absolute;
    white-space: nowrap;
    left: 100%;
    color: #A1A5B7; /* Metronic gray-500 */
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: max-content;
}

/* FAB : Floating Action Button PDF */
.sig-pdf-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1060;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0d6efd;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: background-color 0.3s ease;
  cursor: pointer;
  padding: 0;
}

.sig-pdf-fab:hover {
  background-color: #0b5ed7;
}

.sig-pdf-fab i {
  font-size: 1.25rem;
  line-height: 1;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sur le body : évite scroll et garde le FAB au-dessus */
body.overflow-hidden .sig-pdf-fab {
  z-index: 2000;
}

/* Wrapper PDF par défaut */
.sig-pdf-container {
  position: relative;
  width: 100%;
  height: 75vh;
  border: 1px solid #ddd;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: #f9f9f9;
  transition: height 0.3s ease;
}

/* Plein écran */
.sig-pdf-container.sig-pdf-fullscreen {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100dvh !important; /* meilleure compatibilité mobile */
  z-index: 1055;
  background-color: #fff;
  border: none;
  border-radius: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
}

/* Iframe PDF */
.sig-pdf-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
}

/* Ajustement responsive mobile */
@media (max-width: 576px) {
  .sig-pdf-container {
    height: 60vh;
  }

  .sig-pdf-container.sig-pdf-fullscreen {
    position: absolute !important; /* évite bug iOS */
    height: 100dvh !important;
  }
}

/* Bouton de téléchargement adapté */
.sig-download-btn {
  font-size: 0.875rem;
  padding: 0.4rem 0.75rem;
  height: auto;
  line-height: 1.5;
}

/* Agrandir les champs dans le modal XL */
#modal_initializer_workflow .workflow-step {
  background-color: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed #ccc;
}

#modal_initializer_workflow .workflow-step:not(:last-child) {
  margin-bottom: 12px;
}

#modal_initializer_workflow select.form-select-sm,
#modal_initializer_workflow input.form-control-sm {
  min-width: 180px;
}

/* Mieux séparer les colonnes */
#modal_initializer_workflow .workflow-step > div {
  min-width: 120px;
}

/* Centrer l'icône de suppression */
#modal_initializer_workflow .remove-step {
  margin-top: 4px;
}

/* Styliser les radios pour 'à voir' et 'à signer' */
#modal_initializer_workflow .form-check-inline {
  margin-right: 10px;
}

/* Multiselect dépendances plus clair */
#modal_initializer_workflow .depends-select {
  max-height: 90px;
  overflow-y: auto;
}