/* ******************** */
/* 12. Custom CSS */
/* ******************** */

/* .bottom-div {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
} */

.rounded-circle{
    border: 1px solid #333F55;
}

.cursor{
    cursor: pointer;
}

.square-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px; /* Optional, for spacing */
}

.square-img {
    width: 100%;       /* Make the image take full width */
    aspect-ratio: 1;   /* Maintain square aspect ratio */
    object-fit: cover; /* Crop the image to fit in the square */
}

 

.bottom-div {
    position: relative;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Ensure it stays within the screen width */
    max-width: 400px; /* Optional: limit the maximum width */
    padding: 0 15px; /* Add padding for better spacing */
    box-sizing: border-box;
    text-align: center;
}

@media (max-width: 768px) {
    .bottom-div {
        width: 90%; /* Reduce width on smaller screens */
        padding: 0 10px; /* Adjust padding */
    }
}


.password-wrapper {
    position: relative;
}

.password-wrapper .toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}


.end-10 {
    right: 10px !important;
  }
  

    @media only screen and (min-width: 1400px) {
      .container-menu {
        max-width: 500px !important;
      }
    }

    @media only screen and (min-width: 1200px) {
      .container-menu {
        max-width: 500px !important;
      }
    }

    @media only screen and (min-width: 992px) {
      .container-menu {
        max-width: 500px !important;
      }
    }
    
 
a, .profil , .go-link{
    cursor: pointer;
  }

  .text-webkit-center{
    text-align: -webkit-center;
  }
  .loader-css {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 6px solid;
    border-color: #3b4995 #0000 #43c0ee #0000;
    animation: l1 1s infinite;
  }
  @keyframes l1 {to{transform: rotate(.5turn)}}
  
  .border-raduis-10{
    border-radius:  0px  0px 10px 10px ;
  }
  
  .border-raduis-top-7{
    border-radius:  0px  0px 7px 7px ;
  }


   
  .couverture { 
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px 10px 0px 0px;
  }
  .profile-image-wrapper {  
    transform: translateX(0%);
    z-index: 1;
  }
  .profile-image {
    border: 2px solid white;  
  } 
  
  .iframe-container {
    width: 375px;   
    height: 667px; 
    margin-left: 25px;
    overflow: hidden;
    border: 6px solid #ebebeb;
    border-radius: 3rem;
    box-shadow: 0 121px 49px #00000005, 0 68px 41px #00000014, 0 30px 30px #00000024, 0 8px 17px #00000029;
  }
/* 
  .iframe-container{
    position: fixed ;
  }

  @media only screen and (max-width: 768px) {
    .iframe-container {
        position:relative;
    }
  } */

  
  .profile-iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  
  ::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
  }
  
  ::-webkit-scrollbar-track {
    width: 5px;
    height: 8px;
    background-color: #fff;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
  }
  
  .reload-iframe{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 25px;
    font-weight: 900;
    color: #5d87ff;
  }


  .disable {
    position: relative; /* Ensure the container is positioned relatively */
  }
  
  .disable::before,
  .disable::after {
    content: "";
    position: absolute;
    width: calc(100% + 4px);
    height: 3px;
    background-color: var(--bs-primary);
    top: 50%;
    left: 0;
    z-index: 999;
    transform-origin: center;
  }
  
  .disable::before {
    transform: translateY(-50%) rotate(45deg); /* First diagonal line */
  }
  
  .disable::after {
    transform: translateY(-50%) rotate(-45deg); /* Second diagonal line */
  }
  

  .statut-card{
    position: absolute;
    top: 50%;
    right: 10px; 
    z-index: 999;
  }
  
  .bg-input{
      background-color: var(--bs-body-bg);
  }
  
  .bg-input:focus{
      background-color: var(--bs-body-bg);
  }

  /* Squelette de chargement des tableaux */
  .skeleton-row td{
      padding-top: 16px;
      padding-bottom: 16px;
  }

  .skeleton-bar{
      display: block;
      height: 14px;
      border-radius: 6px;
      background: linear-gradient(90deg, rgba(128, 128, 128, 0.15) 25%, rgba(128, 128, 128, 0.3) 37%, rgba(128, 128, 128, 0.15) 63%);
      background-size: 400% 100%;
      animation: skeleton-shimmer 1.4s ease infinite;
  }

  @keyframes skeleton-shimmer{
      0%{
          background-position: 100% 50%;
      }
      100%{
          background-position: 0 50%;
      }
  }

  /* Le squelette remplace le message « Chargement en cours » */
  .dt-container:has(.skeleton-row) .dt-processing{
      display: none !important;
  }

  /* Cartes de stats cliquables */
  .stat-cards a.card{
      display: block;
  }

  /* Page Apparence : en-tête du profil, sections en onglets, aperçu qui reste à l'écran */
  .tla-head{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px 18px;
      padding: 14px 18px;
      margin-bottom: 20px;
      border: 1px solid var(--bs-border-color, #ebf1f6);
      border-radius: 14px;
      background: var(--bs-body-bg, #fff);
  }

  .tla-id{
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 220px;
  }

  .tla-photo{
      flex: none;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
  }

  .tla-nom{
      font-weight: 600;
      font-size: 1.15rem;
      color: var(--bs-heading-color, #2a3547);
  }

  .tla-head a.tunlink-username{
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-decoration: underline;
  }

  .tla-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
  }

  .tla-nav{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px;
  }

  .tla-onglet{
      display: inline-flex;
      align-items: center;
      padding: 8px 14px;
      border: 1px solid var(--bs-border-color, #ebf1f6);
      border-radius: 999px;
      background: var(--bs-body-bg, #fff);
      font-weight: 500;
      white-space: nowrap;
      color: var(--bs-heading-color, #2a3547);
  }

  .tla-onglet:hover{
      border-color: var(--bs-primary);
  }

  .tla-onglet.tla-actif{
      border-color: var(--bs-primary);
      background: var(--bs-primary);
      color: #fff;
  }

  /* Dans la zone à onglets, l'accordéon principal perd ses en-têtes et son cadre */
  .tla-work #apparence-accordion > .accordion-item{
      border: 0;
      background: none;
  }

  .tla-work #apparence-accordion > .accordion-item > .accordion-header{
      display: none;
  }

  .tla-work #apparence-accordion > .accordion-item > .accordion-collapse > .accordion-body{
      padding: 0;
  }

  .tla-work #apparence-accordion > .accordion-item > .collapsing{
      transition: none;
  }

  .tla-preview{
      position: sticky;
      top: 100px;
      align-self: flex-start;
  }

  /* Aperçu : un téléphone à cadre sombre, avec sa barre d'outils au-dessus */
  .tla-phone-bar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 330px;
      margin: 0 auto 12px;
  }

  .tla-phone-titre{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      color: var(--bs-heading-color, #2a3547);
  }

  .tla-point{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #13deb9;
  }

  .tla-phone-bar .reload-iframe{
      position: static;
      font-size: inherit;
      font-weight: inherit;
      color: inherit;
  }

  /* Téléphone clair : cadre argenté fin, petit haut-parleur, barre d'adresse au-dessus de la page */
  .tla-phone{
      position: relative;
      width: 100%;
      max-width: 330px;
      margin: 0 auto;
      padding: 26px 9px 9px;
      border: 1px solid #cfd6e4;
      border-radius: 42px;
      background: linear-gradient(160deg, #ffffff 0%, #eef1f7 55%, #dde3ee 100%);
      box-shadow: 0 22px 40px -22px rgba(12, 27, 63, 0.4), inset 0 0 0 1px #ffffff;
  }

  /* Haut-parleur */
  .tla-phone::before{
      content: "";
      position: absolute;
      top: 11px;
      left: 50%;
      width: 46px;
      height: 5px;
      border-radius: 999px;
      background: #c3cbdb;
      transform: translateX(-50%);
  }

  /* Caméra */
  .tla-phone::after{
      content: "";
      position: absolute;
      top: 9px;
      left: calc(50% + 36px);
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #aab4c8;
  }

  .tla-phone-url{
      display: flex;
      align-items: center;
      gap: 6px;
      height: 34px;
      padding: 0 14px;
      border-radius: 30px 30px 0 0;
      border-bottom: 1px solid #e6eaf2;
      background: #f6f8fc;
      font-size: 0.75rem;
      color: #5a6a85;
  }

  .tla-phone-url a{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: inherit;
      text-decoration: none;
  }

  .tla-phone-btn{
      position: absolute;
      width: 3px;
      border-radius: 2px;
      background: #cfd6e4;
  }

  .tla-phone-btn-1{
      left: -3px;
      top: 118px;
      height: 32px;
  }

  .tla-phone-btn-2{
      left: -3px;
      top: 166px;
      height: 58px;
  }

  .tla-phone-btn-3{
      right: -3px;
      top: 150px;
      height: 82px;
  }

  .tla-preview .iframe-container{
      position: relative;
      width: 100%;
      height: min(640px, calc(100vh - 200px));
      min-height: 420px;
      margin: 0;
      border: 0;
      border-radius: 0 0 34px 34px;
      box-shadow: none;
      background: #fff;
  }

  @media (max-width: 991.98px){
      .tla-preview{
          position: static;
          margin-top: 24px;
      }

      .tla-nav{
          flex-wrap: nowrap;
          overflow-x: auto;
          padding-bottom: 6px;
      }
  }

  /* Page Profils (admin) : utilisateurs à gauche, profils du choix en tableau à droite */
  .tlp{
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
  }

  .tlp-users{
      position: sticky;
      top: 100px;
      max-height: calc(100vh - 130px);
      overflow-y: auto;
      padding: 6px;
      border: 1px solid var(--bs-border-color, #ebf1f6);
      border-radius: 12px;
  }

  .tlp-u{
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 10px;
      border: 0;
      border-radius: 8px;
      background: none;
      text-align: left;
  }

  .tlp-u:hover{
      background: rgba(128, 128, 128, 0.08);
  }

  .tlp-u.tlp-choisi{
      background: var(--bs-primary);
  }

  .tlp-u.tlp-choisi .tlp-user-nom,
  .tlp-u.tlp-choisi .tlp-discret,
  .tlp-u.tlp-choisi .tlp-tous{
      color: #fff;
  }

  .tlp-tous{
      flex: none;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      color: var(--bs-primary);
  }

  .tlp-n{
      flex: none;
      margin-left: auto;
      min-width: 30px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(128, 128, 128, 0.15);
      font-size: 0.75rem;
      font-weight: 600;
      text-align: center;
      color: var(--bs-heading-color, #2a3547);
  }

  .tlp-u.tlp-choisi .tlp-n{
      background: #fff;
      color: var(--bs-primary);
  }

  .tlp-profil-main{
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      cursor: pointer;
  }

  .tlp-profil-photo{
      flex: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
  }

  .tlp-texte{
      min-width: 0;
  }

  .tlp-texte span{
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .tlp-user-nom,
  .tlp-profil-nom{
      font-weight: 600;
      color: var(--bs-heading-color, #2a3547);
  }

  .tlp-titre{
      font-weight: 600;
      font-size: 1.15rem;
      color: var(--bs-heading-color, #2a3547);
  }

  .tlp-discret{
      font-size: 0.8125rem;
      color: var(--bs-secondary-color, #5a6a85);
  }

  .tlp-tete{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
  }

  .tlp-filtre{
      flex: none;
      width: 240px;
  }

  .tlp-detail{
      min-width: 0;
  }

  .tlp-table td{
      max-width: 240px;
  }

  .tlp-etat{
      padding: 2px 9px;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      white-space: nowrap;
  }

  .tlp-actif{
      background: rgba(19, 222, 185, 0.15);
      color: #0e9f85;
  }

  .tlp-inactif{
      background: rgba(250, 137, 107, 0.18);
      color: #d9534f;
  }

  .tlp-pied{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      padding-top: 14px;
  }

  .tlp-vide{
      padding: 24px 0;
      color: var(--bs-secondary-color, #5a6a85);
  }

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

      .tlp-users{
          position: static;
          max-height: 260px;
      }

      .tlp-tete{
          flex-direction: column;
          align-items: stretch;
      }

      .tlp-filtre{
          width: 100%;
      }
  }