/* Mobile Responsive CSS for NotaTools PWA */

/* General mobile adjustments */
@media (max-width: 576px) {
  /* Masquer le lien RTF Explorer sur mobile */
  a[href^="/rtf-explorer/"] {
    display: none !important;
  }

  /* Masquer l'icône RTF Explorer sur mobile */
  .col-6.col-sm-4.col-md-3.col-lg-2:has(h6:contains("RTF Explorer")) {
    display: none !important;
  }

  /* Alternative pour les navigateurs qui ne supportent pas :has() */
  .product-card-link:has(img[alt*="RTF Explorer"]) {
    display: none !important;
  }

  /* Autre alternative plus spécifique */
  .animate__fadeInUp.animate__delay-3s:has(a[href*="rtf_explorer"]) {
    display: none !important;
  }

  body {
    padding-top: 60px; /* Reduce top padding on small screens */
  }

  /* Make text more readable on small screens */
  p, .lead, .nav-link, .btn {
    font-size: 0.95rem;
  }

  /* Adjust hero section for mobile */
  .hero-section {
    padding: 3rem 0 2rem;
  }

  .hero-section h1 {
    font-size: 2rem;
  }

  .hero-section p {
    font-size: 1rem;
  }

  /* Adjust product cards for mobile */
  .card-body {
    padding: 0.75rem;
  }

  /* Make buttons easier to tap */
  .btn {
    padding: 0.5rem 1rem;
    min-height: 44px; /* Minimum tap target size */
  }

  /* Adjust navbar for mobile */
  .navbar {
    padding: 0.5rem;
  }

  .navbar-brand {
    font-size: 1.2rem;
  }

  /* Improve form elements on mobile */
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Adjust spacing in sections */
  section {
    padding: 2rem 0;
  }

  /* Make footer more compact on mobile */
  footer {
    padding: 1.5rem 0 !important;
  }

  /* Adjust search form layout for mobile */
  #searchForm .input-group {
    flex-wrap: wrap;
  }

  #searchForm .form-control {
    width: 100%;
    border-radius: 0.375rem !important;
    margin-bottom: 0.5rem;
  }

  #searchForm .input-group-text {
    border-radius: 0.375rem 0 0 0.375rem !important;
    margin-right: 0;
    flex: 0 0 auto;
    border-right: none;
  }

  #searchForm .btn-primary {
    border-radius: 0 0.375rem 0.375rem 0 !important;
    flex: 1 1 auto;
  }

  /* Make the NEAR toggle more compact on mobile */
  #searchForm .form-check-label {
    font-size: 0.85rem;
    margin-left: 0.25rem !important;
  }

  #searchForm .form-check-input {
    margin-top: 0.1rem;
  }
}

/* Tablet adjustments */
@media (min-width: 577px) and (max-width: 991px) {
  /* Adjust hero section for tablets */
  .hero-section {
    padding: 4rem 0 3rem;
  }

  /* Adjust product cards for tablets */
  .gallery-img {
    width: 70px;
    height: 70px;
  }
}

/* Landscape phone orientation */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section {
    padding: 2rem 0 1rem;
  }

  .navbar {
    padding: 0.3rem 1rem;
  }

  body {
    padding-top: 50px;
  }
}

/* PWA specific styles */
@media (display-mode: standalone) {
  /* Styles specific to when the app is running in standalone mode (installed PWA) */
  body {
    padding-top: 0; /* Remove padding when running as PWA */
  }

  .navbar {
    position: sticky; /* Change from fixed to sticky in PWA mode */
    top: 0;
  }
}

/* Add to home screen animation */
@keyframes addToHomeScreenPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.add-to-home-prompt {
  animation: addToHomeScreenPulse 2s infinite;
}
/* ================================================================== */
/* == BLOC MOBILE SIMPLIFIÉ : 1 CHAMP PAR LIGNE (VOTRE IDÉE)       == */
/* ================================================================== */
@media (max-width: 768px) {
  /* Désactiver le comportement responsive standard de Bootstrap qui limite la largeur */
  .table-responsive {
    overflow-x: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* S'assurer que le tableau utilise toute la largeur disponible */
  #mailTable {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important; /* Remplacer fixed par auto */
  }

  /* Annuler les styles qui limitent la largeur des cellules */
  #mailTable tbody td {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
  }

  /* On cache les en-têtes de tableau, inutiles sur mobile */
  #mailTable thead {
    display: none !important;
  }

  /* Chaque ligne (tr) devient une "carte" */
  #mailTable tbody.mobile-layout tr {
    display: block !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    margin-bottom: 1rem !important;
    padding: 0.5rem !important;
    width: 100% !important;
  }

  /* Chaque cellule (td) prend toute la largeur et devient une ligne */
  #mailTable tbody.mobile-layout td {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    padding: 0.5rem 0.25rem !important;
    border-bottom: 1px solid #f1f1f1; /* Ligne de séparation */
    box-sizing: border-box !important;
  }

  /* On enlève la bordure de la dernière cellule */
  #mailTable tbody.mobile-layout tr td:last-child {
    border-bottom: none;
  }

  /* On ajoute un libellé avant chaque cellule pour savoir ce que c'est */
  #mailTable tbody.mobile-layout td::before {
    font-weight: 600;
    color: #495057;
    margin-right: 0.5rem;
    min-width: 80px; /* Pour aligner les valeurs */
    text-align: right;
  }

  /* On définit le texte de chaque libellé en utilisant les classes fiables */
  #mailTable .cell-icon::before      { content: ""; }
  #mailTable .cell-attachment::before{ content: ""; }
  #mailTable .cell-date::before      { content: ""; }
  #mailTable .cell-box::before       { content: ""; }
  #mailTable .cell-sender::before    { content: ""; }
  #mailTable .cell-subject::before   { content: ""; }
  #mailTable .cell-actions::before   { content: ""; }

  /* Style spécifique pour l'objet pour qu'il puisse passer à la ligne */
  #mailTable .cell-subject {
      flex-direction: column;
      align-items: flex-start;
      width: 100% !important;
  }
  #mailTable .cell-subject::before {
      margin-bottom: 0.25rem;
      min-width: auto; /* On annule l'alignement pour l'objet */
  }

  /* Style spécifique pour l'icône de pièce jointe */
  #mailTable .cell-attachment {
      padding-left: 0 !important;
  }

  #mailTable .cell-attachment::before {
      min-width: auto !important;
      margin-right: 0.25rem !important;
  }

/* ================================================================== */
/* == CORRECTION : On rend la règle de masquage plus spécifique     == */
/* ================================================================== */

/* On cache les cellules qu'on ne veut pas voir sur mobile */
#mailTable tbody.mobile-layout .cell-actions,
#mailTable tbody.mobile-layout .cell-icon {
    display: none !important;
}

/* Groupe spécial pour les 4 cellules à afficher sur la même ligne */
#mailTable tbody.mobile-layout .cell-attachment,
#mailTable tbody.mobile-layout .cell-date,
#mailTable tbody.mobile-layout .cell-box,
#mailTable tbody.mobile-layout .cell-sender{
  display: inline-block !important; /* Changer inline-flex en inline-block */
  width: auto !important;
  border-bottom: none !important;
  padding: 0 !important; /* Supprimer tout le padding */
  margin: 0 !important; /* Supprimer toutes les marges */
  white-space: nowrap !important;
}

/* Ajout des tirets entre les cellules avec tabulation (environ 5 caractères) */
#mailTable tbody.mobile-layout .cell-date::after,
#mailTable tbody.mobile-layout .cell-box::after,
#mailTable tbody.mobile-layout .cell-sender{
  content: "     ";
  margin: 0;
  padding: 0;
  white-space: pre;
}

/* Conteneur pour regrouper les 4 cellules */
#mailTable tbody.mobile-layout tr .cell-attachment + .cell-date + .cell-box + .cell-sender {
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 0.5rem !important;
}

/*!* Créer un conteneur flex pour les trois cellules *!*/
/*#mailTable tbody.mobile-layout tr .cell-attachment,*/
/*#mailTable tbody.mobile-layout tr .cell-date,*/
/*#mailTable tbody.mobile-layout tr .cell-box {*/
/*  flex: 0 0 auto !important; !* Empêcher la croissance ou rétrécissement *!*/
/*}*/

/* Ajustement des largeurs pour les 4 cellules */
#mailTable tbody.mobile-layout .cell-attachment {
  width: auto !important; /* Largeur automatique au lieu de pourcentage fixe */
  min-width: auto !important;
}

#mailTable tbody.mobile-layout .cell-date {
  width: auto !important; /* Largeur automatique au lieu de pourcentage fixe */
  text-align: center;
}

#mailTable tbody.mobile-layout .cell-box {
  width: auto !important; /* Largeur automatique au lieu de pourcentage fixe */
}

#mailTable tbody.mobile-layout .cell-sender {
  width: auto !important; /* Largeur automatique au lieu de pourcentage fixe */
}

/* Supprimer l'espace des pseudo-éléments before */
#mailTable tbody.mobile-layout .cell-attachment::before,
#mailTable tbody.mobile-layout .cell-date::before,
#mailTable tbody.mobile-layout .cell-box::before {
    min-width: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    content: "" !important;
}
/* Center mail filter buttons on mobile and make them smaller */
.btn-group[aria-label="Filtres de type de mail"] {
  float: none !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
  transform: scale(0.9) !important; /* Réduire légèrement la taille globale */
}

/* Make individual filter buttons smaller */
.btn-group[aria-label="Filtres de type de mail"] .btn {
  font-size: 0.75rem !important; /* Réduire la taille de la police */
  padding: 0.25rem 0.5rem !important; /* Réduire le padding */
  min-height: 32px !important; /* Réduire la hauteur minimale */
}

/* Make icons in filter buttons smaller */
.btn-group[aria-label="Filtres de type de mail"] .btn i {
  font-size: 0.7rem !important; /* Réduire la taille des icônes */
}

/* Make attachment filter text smaller on mobile */
.form-check-label[for="trombonneFilter"] {
  font-size: 0.75rem !important; /* Smaller font size */
  white-space: nowrap; /* Prevent line breaks */
}
}