/* Couleurs des sociétés */
:root {
  --colorSociete1: #e84393;
  --colorSociete2: #b6cf43;
  --colorSociete3: #00b1cf;
  --colorSociete4: #8f8f8f;
}

.colorSociete1 {
  color: var(--colorSociete1);
}
.colorSociete2 {
  color: var(--colorSociete2);
}
.colorSociete3 {
  color: var(--colorSociete3);
}
.colorSociete4 {
  color: var(--colorSociete4);
}

/* Containers */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  border: 1px solid lightgray;
  overflow: hidden;
}

/* Z-index pour les éléments modaux */
.swal2-container {
  z-index: 3000 !important;
}

.modal {
  z-index: 2000 !important;
}

.offcanvas {
  z-index: 1050 !important;
}

/* Espace Admin - Index */
.card-appli-container {
  .card {
    margin: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    width: 400px;
    height: 200px;

    .card-count-container {
      display: flex;
      align-items: center;
      width: 100%;
      height: 90px;
      padding: 20px 0px;
    }

    .card-count {
      font-weight: bold;
      font-size: 30px;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin: auto;
      margin-right: -50px;
      padding-right: 25px;
      overflow: hidden;
      color: #ffffff;
      box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
      text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
      transition: all 0.2s ease-in-out;
    }

    .card-content {
      padding: 20px;
      padding-top: 0px;

      > h3 {
        margin-top: 0px;
        text-align: center;
      }
    }

    .card-footer {
      color: #ffffff;
      border-radius: 10px;
    }

    &:nth-child(1) {
      .card-count,
      .card-footer {
        background-image: linear-gradient(90deg, #f6671f, #c01b1c);
      }
    }

    &:nth-child(2) {
      .card-count,
      .card-footer {
        background-image: linear-gradient(90deg, #ee4d90, #c03872);
      }
    }

    &:nth-child(3) {
      .card-count,
      .card-footer {
        background-image: linear-gradient(90deg, #bcd249, #8a9d1c);
      }
    }

    &:nth-child(4) {
      .card-count,
      .card-footer {
        background-image: linear-gradient(90deg, #f39c12, #e67e22);
      }
    }

    &:nth-child(5) {
      .card-count,
      .card-footer {
        background-image: linear-gradient(90deg, #00b1cf, #00859a);
      }
    }

    &:nth-child(6) {
      .card-count,
      .card-footer {
        background-image: linear-gradient(90deg, #16a085, #1abc9c);
      }
    }

    &:nth-child(7) {
      .card-count,
      .card-footer {
        background-image: linear-gradient(90deg, #ffd700, #ffae00);
      }
    }

    &:nth-child(8) {
      .card-count,
      .card-footer {
        background-image: linear-gradient(90deg, #8e44ad, #9b59b6);
      }
    }

    /* Carte disabled grisées */
    &.disabled {
      background-color: #d3d3d3;

      .card-count,
      .card-footer {
        background-image: linear-gradient(90deg, #b2b2b2, #999999);
        /* Gris pour les cartes désactivées */
      }

      .card-count,
      .card-footer,
      h3 {
        color: #7d7d7d;
        /* Couleur plus claire pour le texte */
      }

      cursor: not-allowed;
    }

    @media (max-width: 968px) {
      flex-wrap: wrap;
    }
  }

  a {
    text-decoration: none;
    color: #fff;
  }
}

/* Fix pour le scroll du menu latéral */
.leftside-menu {
  height: 100vh !important;
  overflow: hidden !important;
}

#leftside-menu-container {
  height: calc(
    100vh - 240px
  ) !important; /* 240px = hauteur logo + image + padding */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@media (max-width: 767.98px) {
  .sidebar-enable .leftside-menu {
    height: 100vh !important;
  }

  #leftside-menu-container {
    height: calc(100vh - 240px) !important;
    overflow-y: auto !important;
  }
}

.leftside-menu .simplebar-content-wrapper {
  height: 100% !important;
  overflow-y: auto !important;
}

.leftside-menu .simplebar-content {
  min-height: 100% !important;
}

/* Styles pour l'impression */
@media print {
  @page {
    size: A4;
    margin: 1cm;
  }

  .noPrint {
    display: none !important;
  }

  .noShow {
    display: block !important;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    zoom: 75%;
  }
  .card-body {
    padding: 20px;
  }
}

@media not print {
  .print {
    display: none !important;
  }
}

/* Navbar */
.navbar-custom {
  background-color: #313a46 !important;
  min-height: 85px;
  color: #fff !important;
}
.nav-user {
  padding: calc(31px * 0.5) 20px calc(31px * 0.5) 57px !important;
  text-align: left !important;
  position: relative;
  background-color: #ffffff;
  border: none;
  border-width: 0 1px;
  min-height: 70px;
  margin-right: 50px !important;
}
.nav-user .account-user-avatar {
  left: 3px !important;
  top: calc(16px * 0.5);
}
.bi.header::before {
  padding-bottom: 15px;
  padding-top: 15px;
}
.cercle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #fff;
  color: #313a46;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 45px;
}

/* Modern Nav Tabs Styles */
.nav-tabs {
  border-bottom: 3px solid #e9ecef;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: #6c757d;
  font-weight: 600;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s ease;
  position: relative;
  background: transparent;
}

.nav-tabs .nav-link:hover {
  color: #727cf5;
  background: rgba(114, 124, 245, 0.1);
  border-bottom-color: #727cf5;
  transform: translateY(-2px);
}

.nav-tabs .nav-link.active {
  color: #727cf5;
  background: rgba(114, 124, 245, 0.1);
  border-bottom-color: #727cf5;
  font-weight: 700;
}

.nav-tabs .nav-link i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.nav-tabs .nav-link:hover i {
  transform: scale(1.15);
}

.nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #727cf5 0%, #0acf97 100%);
  border-radius: 3px 3px 0 0;
}

/* Tab content animation */
.tab-content > .tab-pane {
  animation: fadeIn 0.4s ease-in-out;
}

/* Styles pour les états vides */
.empty-state {
  text-align: center;
  color: #6c757d;
  padding: 4rem 2rem;
}

.empty-state i {
  font-size: 4rem;
  opacity: 0.6;
  margin-bottom: 1rem;
}

/* Styles pour les nombres cliquables */
.number-clickable {
  color: #727cf5;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.number-clickable:hover {
  color: #5a63d8;
  font-weight: 600;
}
.number-clickable-danger {
  color: #dc3545;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s;
  border: none !important;
  background: none !important;
}
.number-clickable-danger:hover {
  color: #c82333;
  text-shadow: 0 0 8px rgba(200, 35, 51, 0.5);
}
.number-clickable-success {
  color: #28a745;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s;
  border: none !important;
  background: none !important;
}
.number-clickable-success:hover {
  color: #218838;
  text-shadow: 0 0 8px rgba(33, 136, 56, 0.5);
}

/* Styles pour les tâches */
.task-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.task-details {
  display: flex;
  align-items: center;
  flex: 1;
}

/*Widget de tâches */
.task-priority {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.task-priority.high {
  background: #fa5c7c;
}

.task-priority.medium {
  background: #ffbc00;
}

.task-priority.low {
  background: #727cf5;
}

.task-item {
  padding: 1rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e9ecef;
  margin-bottom: 0.75rem;
  transition: all 0.2s;
}

.task-item:hover {
  border-color: #737df4;
  box-shadow: 0 2px 8px rgba(115, 125, 244, 0.1);
}

.task-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 2px solid #dee2e6;
  cursor: pointer;
  accent-color: #737df4;
}

.task-checkbox:checked {
  background-color: #737df4;
  border-color: #737df4;
}

/* Formulaires */

.titleContenu {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: bold;
  background: #e6e7fd;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.requiredAdd {
  background-color: #e6e7fded !important;
}
.requiredReadOnly {
  background-color: #ededed !important;
}
.col-form-label {
  font-weight: bold;
}
.form-control,
.form-select {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.form-control:focus,
.form-select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Style pour les select2 ayant la classe requiredAdd */
.requiredAdd + .select2 .select2-selection {
  background: #e3e7fd !important;
  border-radius: 8px;
  border: 1px solid #ced4da;
}

.titleForm {
  font-size: 1.2rem;
  font-weight: bold;
  background: #727cf5;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.titleSousForm {
  color: #727cf5;
  text-decoration: underline;
  padding: 10px;
}

/* Evaluations */
.rating input[type="radio"] {
  display: none;
}
.rating label {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  border-radius: 50%;
  cursor: pointer;
  background-color: transparent;
  color: gray;
  border: 1px solid gray;
  transition: background-color 0.3s;
}
.rating input[type="radio"]:checked + label {
  background-color: #727cf5;
  color: white;
}
.rating-circle-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rating-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: transparent;
  color: gray;
  font-size: 14px;
  border: 1px solid gray;
}
.emoji input[type="radio"] {
  display: none;
}
.emoji label {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
  border-radius: 50%;
  cursor: pointer;
  background-color: transparent;
  color: gray;
  border: 1px solid gray;
  transition: background-color 0.3s;
}
.emoji input[type="radio"]:checked + label {
  background-color: #727cf5;
  color: white;
}

/* Appliquer le fond primaire uniquement si l'élément a requiredAdd */
.select2-primary.requiredAdd + .select2-container .select2-selection {
  background-color: #e8e9fd !important;
  /* bg-primary */
  border-color: #e8e9fd !important;
}
.grayIcon {
  color: gray;
  font-size: 22px;
  margin-right: 10px;
}

.grayIconMin {
  color: gray;
  font-size: 17px;
  margin-right: 10px;
}

.iconTitle {
  font-size: 30px;
  margin-right: 10px;
}

.editTitle {
  color: #fff;
  background: #00b1cf;
  padding: 10px;
}

.addTitle {
  color: #fff;
  background: #727cf5;
  padding: 10px;
}

.viewTitle {
  color: #fff;
  background: #8f8f8f;
  padding: 10px;
}

.btn-success-rpl {
  background: #b6cf43;
  color: #fff;
}
.bg-success-rpl {
  background-color: #b6cf43;
}

/* =================== OFFCANVAS TASKS =================== */
.offcanvas-tasks .offcanvas-body {
  padding: 0.5rem;
}

.offcanvas-tasks .task-counter {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0.15rem 0.5rem;
  margin-left: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.offcanvas-tasks .progress-container {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 0.15rem;
  margin-left: 0.6rem;
  min-width: 80px;
  flex: 0 0 80px;
}

.offcanvas-tasks .progress-bar-custom {
  background: rgba(255, 255, 255, 0.9);
  height: 4px;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.offcanvas-tasks .accordion-item {
  border: none;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.offcanvas-tasks .accordion-button {
  padding: 0.6rem 0.8rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.offcanvas-tasks .accordion-body {
  padding: 0.5rem;
}

.offcanvas-tasks .theme-section {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 0.6rem;
  margin-bottom: 0.5rem;
  border-left: 3px solid #667eea;
}

.offcanvas-tasks .theme-title {
  color: #1a202c;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.offcanvas-tasks .task-item {
  padding: 0.4rem 0 0.4rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.offcanvas-tasks .task-item:last-child {
  border-bottom: none;
}

.offcanvas-tasks .form-check {
  flex: 1;
  margin-bottom: 0;
}

.offcanvas-tasks .form-check-label {
  font-size: 0.813rem;
  color: #4a5568;
  font-weight: 400;
  cursor: pointer;
  padding-left: 0.4rem;
  line-height: 1.3;
}

.offcanvas-tasks .form-check-input {
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  border: 2px solid #cbd5e0;
  margin-top: 0.1rem;
}

.offcanvas-tasks .completed-task {
  opacity: 0.6;
}

.offcanvas-tasks .completed-task .form-check-label {
  text-decoration: line-through;
  color: #a0aec0;
}

.offcanvas-tasks .action-buttons {
  display: flex;
  gap: 0.25rem;
  margin-left: 0.5rem;
}

.offcanvas-tasks .btn-action {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  border: none;
  background: transparent;
  color: #718096;
  transition: color 0.2s;
}

.offcanvas-tasks .btn-action:hover {
  color: #2d3748;
}

.offcanvas-tasks .btn-action i {
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .offcanvas-tasks .accordion-button {
    font-size: 0.813rem;
    padding: 0.5rem 0.6rem;
  }

  .offcanvas-tasks .theme-title {
    font-size: 0.75rem;
  }

  .offcanvas-tasks .task-item {
    padding: 0.35rem 0;
  }

  .offcanvas-tasks .form-check-label {
    font-size: 0.75rem;
  }
}

.notification-list .notify-item.unread-noti {
  background-color: #c7c7c7;
  color: black;
}

.notification-list .noti-item-subtitle.unread-noti {
  color: black;
}

.notification-list .notify-item .card-body .noti-item-subtitle,
.notification-list .notify-item .card-body .noti-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}

.notification-list .noti-icon-badge {
  display: inline-block;
  position: absolute;
  top: 12px;
  right: 17px;
  border-radius: 5px;
  height: 10px;
  width: 10px;
  background-color: #fa5c7c;
}

.buttonTransparent {
  border: none;
  background: transparent;
}

.btn-action {
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.btn-action:hover {
  transform: scale(1.3);
}

.table-compact th,
.table-compact td {
  padding: 0.5rem;
  font-size: 0.9rem;
}

/* Styles pour les tâches cochées - harmonisés pour tous les contextes */
.task-content.text-decoration-line-through,
.task-item .task-content.text-decoration-line-through,
.form-check-label.task-content.text-decoration-line-through,
.task-item .flex-grow-1.text-decoration-line-through {
  text-decoration: line-through !important;
  opacity: 0.5 !important;
  transition: all 0.3s ease;
}

.task-content.text-decoration-line-through *,
.task-item .task-content.text-decoration-line-through *,
.task-item .flex-grow-1.text-decoration-line-through * {
  text-decoration: line-through !important;
}

/* Animation lors du changement d'état */
.task-content {
  transition: all 0.3s ease;
}

/* Styles pour les checkboxes dans l'offcanvas */
.checkbox-primary.task-checkbox-header:checked ~ .task-content {
  text-decoration: line-through !important;
  opacity: 0.5 !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Style pour Select2 invalide */
.is-invalid-select2 .select2-selection {
  border-color: #dc3545 !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

.is-invalid-select2 .select2-selection:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}