@charset "utf-8";
/* CSS Document */
body {font-family: 'cera_round_proregular';}

::-webkit-scrollbar {width: 8px; height: 8px;}
::-webkit-scrollbar-track {background-color: #F3F3F3;}
html[data-bs-theme="dark"] ::-webkit-scrollbar-track {background-color: #343a40;}
::-webkit-scrollbar-button {display:none;}
::-webkit-scrollbar-thumb {background-color: rgba(186, 186, 192, 0.7); border-radius: 8px; border: 1px solid #B9B9B9; transition: background-color 0.3s, opacity 0.3s, transform 0.1s, box-shadow 0.1s;}
::-webkit-scrollbar-thumb:hover {background-color: rgba(160, 160, 165, 0.5); opacity: 0.5; transform: scale(1.05);}
::-webkit-scrollbar-thumb:active {background-color: #8a8a8f; opacity: 1; transform: scale(0.95);}

/* Améliore le input file pour bootstrap */
.form-floating > input[type="file"].form-control {
  padding-top: 2rem;
  height: calc(3.5rem + calc(var(--bs-border-width) * 3));

  &::file-selector-button {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    border-right: var(--bs-border-width) solid var(--bs-border-color);
    border-top-right-radius: var(--bs-border-radius); // optional
  }
}

#chargement {display: block; text-align: center; position: fixed; top: 1rem; left: 50%; transform: translate(-50%, -50%); padding: 0.3rem 1rem; z-index: 1030;}
.chargement_warning {color: #664d03; border: 1px solid #ffecb5; background: #fff3cd; }
.chargement_danger {color: #58151c; border: 1px solid #f1aeb5; background: #f8d7da; }

.blurred {filter: blur(2px); pointer-events: none; opacity: 0.6;}

.w-5 {width: 5% !important;}
.w-10 {width: 10% !important;}
.w-15 {width: 15% !important;}
.w-20 {width: 20% !important;}
/*.w-25 {width: 25% !important;}*/
.w-30 {width: 30% !important;}
.w-35 {width: 35% !important;}
.w-40 {width: 40% !important;}
.w-45 {width: 45% !important;}
/*.w-50 {width: 50% !important;}*/
.w-55 {width: 55% !important;}
.w-60 {width: 60% !important;}
.w-65 {width: 65% !important;}
.w-70 {width: 70% !important;}
/*.w-75 {width: 75% !important;}*/
.w-80 {width: 80% !important;}
.w-85 {width: 85% !important;}
.w-90 {width: 90% !important;}
.w-95 {width: 95% !important;}


/* Image de profil */
.logo-32 { height: 32px; width: 32px; }
.logo-gb-32 { height: 32px; width: 32px; border: 1.5px solid #0080bb; background: #1d1d1b; }
.img_cont_16 { height: 16px; width: 16px; }
.user_img_16 { height: 16px; width: 16px; border: 1px solid #00D03C; }
.img_cont_24 { height: 24px; width: 24px; }
.user_img_24 { height: 24px; width: 24px; border: 1.5px solid #f5f6fa; }
.img_cont_27 { height: 27px; width: 27px; }
.user_img_27 { height: 27px; width: 27px; border: 1.5px solid #f5f6fa; }
.img_cont_32 { height: 32px; width: 32px; }
.user_img_32 { height: 32px; width: 32px; border: 1.5px solid #f5f6fa; }
.img_cont_35 { height: 35px; width: 35px; }
.user_img_35 { height: 35px; width: 35px; border: 1.5px solid #f5f6fa; }
.img_cont_48 { height: 48px; width: 48px; }
.user_img_48 { height: 48px; width: 48px; border: 1.5px solid #f5f6fa; }
.img_cont_54 { height: 54px; width: 54px; }
.user_img_54 { height: 54px; width: 54px; border: 1.5px solid #f5f6fa; }
.img_cont_64 { height: 64px; width: 64px; }
.user_img_64 { height: 64px; width: 64px; border: 2px solid #f5f6fa; }
.img_cont_92 { height: 92px; width: 92px; }
.user_img_92 { height: 92px; width: 92px; border: 2px solid #f5f6fa; }
.img_cont_100 { height: 100%; width: 100%; }
.user_img_100 { height: 100%; width: 100%; border: 3px solid #f5f6fa; }
.img_cont_128 { height: 128px; width: 128px; }
.user_img_128 { height: 128px; width: 128px; border: 3px solid #f5f6fa; }
.img_cont_160 { height: 160px; width: 160px; }
.user_img_160 { height: 160px; width: 160px; border: 3px solid #f5f6fa; }
.img_cont_256 { height: 256px; width: 256px; }
.user_img_256 { height: 256px; width: 256px; border: 3px solid #f5f6fa; }
/* Image de profil */


/* Colonnes de l'index */
@media (max-width: 1024px) and (min-width: 768px) {.col-custom-3 {flex: 0 0 25%;max-width: 25%;} .col-custom-6 {flex: 0 0 50%;max-width: 50%;}}
/* Colonnes de l'index */


/* Calendrier de l'index */
.calendar {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box;}
.calendar-day-header {text-align: center; padding: 0.4rem; font-weight: bold; font-size: 0.7rem; box-sizing: border-box;}
.day {text-align: center; padding: 6px; border-radius: 3px; position: relative; cursor: pointer; box-sizing: border-box; font-size: 0.7rem; transition: background-color 0.3s ease, color 0.3s ease; }
.tags {display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 3px; }
.tag {width: 6px; height: 6px; border-radius: 50%;}
.dark-theme .day {background-color: #2b2b2b; color: #e0e0e0; transition: background-color 0.3s ease, color 0.3s ease;}
.dark-theme .day:hover {background-color: #3c3f41;}
.dark-theme .day.empty {color: #777; background-color: #1e1e1e;}
.dark-theme .today {border: 1px solid #66aaff; background-color: #0056b3; color: #ffffff;}
.dark-theme .today:hover {background-color: #44475a; color: #ffffff;}
.light-theme .day {background-color: #efefef; color: #333; border-radius: 4px; transition: background-color 0.3s ease, color 0.3s ease; cursor: pointer;}
.light-theme .day:hover {background-color: #d1e7fd;}
.light-theme .day.empty {color: #aaa; background-color: #f9f9f9;}
.light-theme .today {border: 1px solid #2A42D0; background-color: #007bff; color: #ffffff; transition: background-color 0.3s ease, color 0.3s ease;}
.light-theme .today:hover {background-color: #0056b3; color: #ffffff;}
/* Calendrier de l'index */


/* Messagerie */
#chat_message_display:focus {outline: none;box-shadow: none;}
#emojiPicker {display: none; position: absolute; background: white; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); padding: 10px; width: 300px; z-index: 1000;}
#emojiSearch {width: 100%; padding: 5px; margin-bottom: 5px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px;}
.emoji {font-size: 24px; cursor: pointer; transition: transform 0.1s ease-in-out;}
.emoji:hover {transform: scale(1.2);}
#emojiContainer {max-height: 250px; overflow-y: auto;}
.emoji-category {font-size: 14px; font-weight: bold; color: #555; padding: 5px 0; border-bottom: 1px solid #ddd; margin-top: 8px;}
.emoji-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 5px; padding: 5px 0;}
.one-line-truncate {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; white-space: normal;}
/* Messagerie */


/* Icones et card de l'index */
.index-card {transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;}
.index-card i {transition: transform 0.3s ease, color 0.3s ease;}
.index-card:hover {transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); cursor: default;}
.index-card:hover {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.index-card:hover i {transform: scale(1.1);}
.index-card:hover {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.light-theme .index-card:hover {background-color: #f8f9fa !important;}
.light-theme .index-card:hover i {background: linear-gradient(45deg, #7c4dff, #4d9dff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.dark-theme .index-card:hover {background-color: #3c3f41 !important;}
.dark-theme .index-card:hover i {color: #007bff !important;}
/* Icones et card de l'index */


.avatar-container {position: relative; margin: 0 auto; overflow: hidden; border-radius: 50%; display: flex; justify-content: center; align-items: center;}


/* Range pour les heures des réunions */
section.range-slider{position:relative; margin:0px auto 15px; height:2rem;}
section.range-slider input[type="range"]{-webkit-appearance:none; position:absolute; width:100%; margin:0; top:31.5px; height:5px; background:transparent; z-index:2; pointer-events:none;} 
section.range-slider input[type="range"]::-webkit-slider-thumb{pointer-events:all; -webkit-appearance:none; width:16px; height:16px; background:#007bff; border-radius:50%; cursor:pointer; z-index:3; position:relative; box-shadow:none; transition:all 0.2s ease;} 
section.range-slider input[type="range"]::-webkit-slider-thumb{width:16px; height:16px; background:#007bff;} 
section.range-slider input[type="range"]:hover::-webkit-slider-thumb{width:16px; height:16px; background:#0056b3; box-shadow:0 0 5px rgba(0, 123, 255, 0.5);} 
section.range-slider input[type="range"]:active::-webkit-slider-thumb{width:16px; height:16px; background:#348AE7; box-shadow:0 0 10px rgba(0, 123, 255, 0.7);} 
section.range-slider input[type="range"]::-moz-range-thumb{width:16px; height:16px; background:#007bff; border-radius:50%; cursor:pointer; box-shadow:none; transition:all 0.2s ease;} 
section.range-slider input[type="range"]:hover::-moz-range-thumb{width:16px; height:16px; background:#0056b3; box-shadow:0 0 5px rgba(0, 123, 255, 0.5);} 
section.range-slider input[type="range"]:active::-moz-range-thumb{width:16px; height:16px; background:#348AE7; box-shadow:0 0 10px rgba(0, 123, 255, 0.7);} 
section.range-slider .range-track{position:absolute; top:30px; left:0; width:100%; height:8px; background:#8B8B8B; border-radius:25px; z-index:1;} 
section.range-slider .range-highlight{position:absolute; top:30px; height:8px; background:#007bff; border-radius:25px; z-index:2;} 
section.range-slider .rangeValues{text-align:center; font-weight: bold;}


/* Gestion des icône des pièces jointes */
    ul#fileList {list-style-type: none;}
    .list-group-item:hover {background-color: #f8f9fa;}
    .file-icon {width: 24px; margin-right: 10px;}
    .file-name {flex-grow: 1; text-align: left;}
    .remove-icon {cursor: pointer; font-size: 1.2rem; color: red;}