/* === Styles CRM NettArmor (front-end) === */

/* Bouton blanc discret */
.btn-discret-orange-crm {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: none !important;
    margin-left: 8px;
}

/* Bouton noir discret */
.btn-discret-bleu-crm {
    background: #000000 !important;
    color: #FFFFFF !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: none !important;
    margin-left: 8px;
}
.btn-qrcode {
	display: none;
}

/* Formulaire de recherche CRM */
#crm-search {
    padding: 5px 9px;
	font-size: 14px;
	height: 30px;
}

#crm-search-info {
	padding-top: 20px;
	margin-bottom: 20px;
	font-size: 14px;
	color: red;
	font-style: italic;
	font-weight: 600;
	text-decoration: uppercase;
}

#crm-contact-form {
	display: none;
	padding: 10px !important;
	background-color: #F2F5F7;
	border: 1px solid #000000;
	border-radius: 5px;
	margin-bottom: 10px;
	width: 410px;
	margin-left: auto;
	margin-right: auto;
}


select,
textarea,
input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"] {
  width: 250px;
  text-align: left;
  font-size: 12px;
  padding: 2px 5px;
}


select,
input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"] {
  height: 25px;
}

input[type="number"] {
	width: 50px !important;
	height: 25px;
	text-align: left;
  font-size: 12px;
  padding: 2px 5px;
}

#crm-contact-form th,
#crm-quote-form th {
	text-transform: uppercase;
	text-align: left;
	width: 115px;
	padding-bottom: 0px;
}

#form-gestion-co-add th {
	text-transform: uppercase;
	text-align: left;
	width: 150px;
	padding-bottom: 0px;
}

#crm-contact-form td,
#crm-quote-form td {
  text-align: left;
  padding-bottom: 0px;
}

#form-gestion-co-add td {
  text-align: left;
  padding-bottom: 0px;
}


label {
	color: #000000;
	font-size: 12px;
	font-weight: 600;
}

#crm-contact-form #identifiant,
#crm-quote-form #quote_number {
	background-color: #f0f8ff;
	width: 160px;
}

#crm-form-title {
	margin: 0px;
	text-transform: uppercase;
	font-weight: 600;
	color: black !important;
}



thead {
  background-color: #000000;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}

tr{
	border-color: #000000;
	font-size: 12px;
	text-align: center;
}

#qr-code-container img {
	width: 100px;
	height : 100px;
}

#crm-contacts-table {
	margin-top: 0px !important;
}

#crm-contacts-table button.edit-contact,
#crm-contacts-table a.button {
  background-color: transparent;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  padding: 5px;
  text-decoration: none;
  border:1px solid #000000;
  display: inline-block;
}

img.emoji {
	width : 12px !important;
	height: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Style général des boutons de pagination */
.crm-page-btn {
  display: inline-block;
  padding: 5px 5px;
  margin: 0 3px;
  margin-bottom: 10px;
  border: 1px solid #000000 !important;
  border-radius: 5px;
  background-color: #ffffff !important;
  color: #000000 !important;
  text-decoration: none !important;
  transition: background-color 0.2s;
  font-size: 14px;
  width: 24px;
  height: 24px;
  text-align: center;
  padding: auto;
}

/* ✅ Style pour la page active */
.crm-page-btn.button-primary {
  background-color: #000000 !important;
  color: white !important;
  cursor: default;
  border-color: #000000 !important;
}

/* Réactive la croix de suppression native sur les champs de recherche */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    appearance: auto;
}

/* --- Conteneur scrollable si besoin --- */
#crm-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin-bottom: 10px;
}

.crm-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin-bottom: 10px;
}

.crm-planning-table {
  min-width: 800px; /* 🔥 clé du scroll */
  border-collapse: collapse;
}

/* --- Tableau principal --- */
#crm-contacts-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}



/* Style général pour le bouton désactivé */
.button.disabled,
.btn-discret-bleu.disabled,
button:disabled.btn-discret-bleu {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.button.button-small {
	 background-color: transparent;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  padding: 5px;
  text-decoration: none;
  border:1px solid #000000;
  display: inline-block;
}

input::placeholder,
textarea::placeholder {
  font-size: 12px;
  color: #555;
  font-style: italic;
  opacity: 0.5;
}

.crm-quotes-table th,
#crm-contacts-table th {
	color:white !important;
}

.crm-quotes-table th,
.crm-quotes-table td,
#crm-contacts-table th,
#crm-contacts-table td {
  white-space: nowrap;
}
/* ✅ Aligne parfaitement les cases à cocher et leur texte */
input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
  position: relative;
  top: -1px; /* ajuste finement selon ton rendu */
  margin-right: 3px; /* petit espace entre la case et le texte */
  margin-left: 5px;
}

/* Optionnel : améliore la lisibilité du texte à côté */
label {
  vertical-align: middle;
}

.room_header_left {
  display: flex;
  align-items: center;
  justify-content: space-between; /* pousse le toggle tout à droite */
  gap: 10px;
  width: 100%;
}

.frontend_toggle_room_btn,
.frontend_toggle_room_btn:hover {
	color: red !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  padding: 0 !important;
  margin-left: auto;
}

.remove_room_btn {
  display: block;
  margin: 0 auto;
}

#crm-quote-form table.form-table th {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  white-space: normal; /* ou nowrap si tu veux empêcher le retour à la ligne */
  vertical-align: top; /* optionnel, pour un alignement propre */
}

#rythme_intervention_wrapper {
  display: block !important;
  margin-top: 8px; /* petit espace sous le select */
  margin-left:0px !important;
}

#acces_wrapper {
  display: flex;
  flex-direction: column; /* force une pile verticale */
  gap: 5px; /* petit espace entre les lignes */
}

.acces-extra {
  display: flex;
  align-items: center;
  gap: 10px;
}

#crm-quote-form,
#form-gestion-co-add {
	display: none;
	padding: 10px !important;
	background-color: #F2F5F7 !important;
	border: 1px solid #000000;
	border-radius: 5px;
	margin-bottom: 10px;
	
}

select.room_select {
  width: 160px;
}

input.room_comment {
	width : 300px;
}

.room_block {
  background-color: white; /* couleur douce bleutée */
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.room_total_time {
  font-weight: bold;
  color: #000000;
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
}

/* Fixe la largeur des colonnes dans les tables de services */
#floors_container .services_table {
	margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 🚀 force le navigateur à respecter les largeurs */
}

#floors_container .services_table th {
	vertical-align: middle !important;
	font-size : 10px !important;
	text-align: center !important;
}

/* Colonnes individuelles */
#floors_container .services_table th:nth-child(1),
#floors_container .services_table td:nth-child(1) {
  width: 30px !important;
  font-size: 10px !important;
}

#floors_container .services_table th:nth-child(2),
#floors_container .services_table td:nth-child(2) {
  width: 120px !important;
  font-size: 10px !important;
}

#floors_container .services_table th:nth-child(3),
#floors_container .services_table td:nth-child(3) {
  width: 45px !important;
  font-size: 10px !important;
}

#floors_container .services_table th:nth-child(4),
#floors_container .services_table td:nth-child(4) {
  width: 50px !important;
  font-size: 10px !important;
}

#floors_container .services_table th:nth-child(5),
#floors_container .services_table td:nth-child(5) {
  width: 50px !important;
  font-size: 10px !important;
}

#floors_container .services_table th:nth-child(6),
#floors_container .services_table td:nth-child(6) {
  width: 50px !important;
  font-size: 10px !important;
}

#floors_container .services_table th:nth-child(7),
#floors_container .services_table td:nth-child(7) {
  width: 50px !important;
  font-size: 10px !important;
}

#floors_container .services_table th:nth-child(8),
#floors_container .services_table td:nth-child(8) {
  width: 100px !important;
  font-size: 10px !important;
}

input.service_qty {
	width: 35px !important;
}

/* --- Modale de confirmation --- */
#crm-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Fond semi-transparent */
#crm-confirm-modal .crm-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

/* Contenu de la boîte */
#crm-confirm-modal .crm-modal-box {
  position: relative;
  background: #fff;
  padding: 20px 25px;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  z-index: 10000;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  text-align: center;
}

/* Titre et texte */
#crm-confirm-modal h5 {
  margin-top: 0;
  color: #000000;
}

#crm-confirm-message {
  margin: 15px 0;
  color: #333;
  font-size: 12px;
}

/* Boutons */
.crm-modal-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

#crm-confirm-yes,
#crm-confirm-no {
  min-width: 120px;
}

/* Conteneur principal des messages */
#crm-message-container {
  margin: 5px 0;
}

/* Style commun aux notices WordPress */
#crm-message-container .notice {
  border-left: 4px solid #72aee6;
  padding: 5px 5px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  border-radius: 4px;
  margin: 10px 0;
  font-size: 12px;
}

/* ✅ Succès */
#crm-message-container .notice-success {
  border-left-color: #00a32a;
}

/* ⚠️ Erreur */
#crm-message-container .notice-error {
  border-left-color: #d63638;
}

/* ℹ️ Info */
#crm-message-container .notice-info {
  border-left-color: #72aee6;
}

button:disabled,
.button.disabled,
.btn-discret-bleu.disabled,
.btn-discret-orange.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Couleurs pastel selon le statut du devis */
.crm-gestion-co-table tr.statut-accepte td {
    background-color: #d9f7be !important; /* vert pastel */
}
.crm-gestion-co-table tr.statut-refuse td {
    background-color: #ffe7ba !important; /* orange doux */
}
.crm-gestion-co-table tr.statut-attente td {
    background-color: #bae7ff !important; /* bleu clair */
}
.crm-gestion-co-table tr.statut-presente td {
    background-color: #fff7ba !important; /* jaune clair */
}
.crm-gestion-co-table tr.statut-cree td {
    background-color: #f5f5f5 !important; /* gris clair */
}

h1 img.emoji, h2 img.emoji, h3 img.emoji, h4 img.emoji, h5 img.emoji {
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle;
}

h6 img.emoji {
  width: 15px !important;
  height: 15px !important;
  vertical-align: middle;
}

/* Supprime les flèches ↑↓ uniquement sur le champ distance */
#distance_km::-webkit-inner-spin-button,
#distance_km::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#distance_km {
  -moz-appearance: textfield; /* Pour Firefox */
}


/* Curseur interactif pour les légendes de statuts */
.crm-legend-gestion-co span {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
	font-size: 12px !important;
}

/* Petit effet au survol pour indiquer le clic possible */
.crm-legend-gestion-co span:hover {
    transform: scale(1.05);
    box-shadow: 0 0 4px rgba(0, 124, 186, 0.5);
}

.crm-legend-gestion-co strong {
    font-size: 14px !important;
}


.crm-etat-commercial ul li,
.crm-etat-commercial ul li em,
.crm-etat-commercial ul li a,
.crm-etat-commercial ul li strong {
    font-size: 12px !important;
}

/* ===========================
   PLANNING — STYLE GLOBAL
   =========================== */

.crm-planning-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 13px;
    background: #fff;
    border: 1px solid #ccc;
}

.crm-planning-table th,
.crm-planning-table td {
    border: 1px solid #e1e1e1;
    padding: 6px;
    text-align: center;
}

/* En-tête */
.crm-planning-header th {
    background: #000000;
	color: white !important;
    font-weight: 600;
    font-size: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Petite date sous le jour */
.crm-date-small {
    font-size: 11px;
    color: #fff;
}

/* Colonne des heures */
.crm-hour {
    background: #fafafa;
    font-weight: bold;
    width: 70px;
}

/* Cellules des créneaux */
.crm-slot {
    height: 35px;
    cursor: pointer;
    transition: background 0.2s;
}

/* Survol */
.crm-slot:hover {
    background: #f0f8ff; /* bleu clair */
}

/* Jour actuel highlighté dans l’en-tête */
.crm-today {
    background: #d1ecff !important;
    color: #000000;
    font-weight: bold;
}

/* Jour actuel colonne entière */
.crm-today-col {
    background: #f8fcff !important;
}

/* -----------------------------
   VUE MENSUELLE — Grille fixe
------------------------------ */
.crm-planning-table {
    table-layout: fixed !important;  /* ❗ Empêche l'élargissement */
    width: 100%;
    border-collapse: collapse;
}

/* Cellules vides */
.crm-month-empty {
    background: #f9f9f9;
}

/* Chaque cellule du mois */
.crm-month-day {
    position: relative;
    vertical-align: top;
    height: 110px;            /* ❗ même hauteur pour TOUTES les cellules */
    padding: 2px;
    overflow: hidden;         /* Evite agrandissement vertical */
    border: 1px solid #e0e0e0;
}

/* Numéro du jour (fixé en haut) */
.crm-day-number {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 3px;
    padding: 0;
}

/* Zone pour les événements (scroll interne si trop d'interventions) */
.crm-day-content {
    margin-top: 3px;
    height: calc(100% - 20px);   /* espace restant après le numéro */
    overflow-y: auto;            /* 🎉 Scroll interne sans agrandir la cellule */
}

/* Style des événements individuels */
.crm-month-event {
    margin: 1px 0;
    padding: 2px 4px;
    font-size: 11px;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;     /* Pas de débordement */
}


/* Overlay */
.crm-modal-overlay {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.4);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10020;
overflow-y: auto;

}

/* Modale */
.crm-modal {
    background:#fff;
    padding:20px;
    width:380px;
    border-radius:6px;
    box-shadow:0 4px 25px rgba(0,0,0,0.3);
margin-top: 150px;
overflow-y: auto;

}

.crm-modal h2 {
    margin-top:0;
    margin-bottom:15px;
}
.crm-modal label {
    font-weight:bold;
    display:block;
    margin-top:10px;
}
.crm-modal input, .crm-modal select {
    width:100%;
}

.crm-event {
    font-size: 12px;
    line-height: 14px;
    overflow: hidden;
}
.crm-event:hover {
    opacity: 0.9;
}

.crm-slot-occupied {
    background: rgba(10, 142, 219, 0.15);
}

.crm-event-block:hover {
    background:#066db1;
}

#crm-planning-view-buttons {
    display: flex;
    gap: 8px;
}

.crm-view-btn {
	background: #ffffff !important;
    color: #000000 !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: none !important;
    margin-left: 8px;
}

.crm-view-btn.active {
    background: #000000 !important;
    color: #FFFFFF !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: none !important;
    margin-left: 8px;
}

/* --- RENDRE LES RADIO NORMAUX ET RONDS --- */
#planning_edit_mode_block input[type="radio"] {
    -webkit-appearance: radio !important;
    appearance: radio !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 5px;
	background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Aligner le texte proprement */
#planning_edit_mode_block label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
	text-transform: none !important;
}

/* Conteneur général */
#planning_edit_mode_block {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 12px 15px;
    border-radius: 6px;
    margin-top: 15px;
}

.crm-holiday,
.crm-holiday-cell {
    background: #efefef !important;
    color: #777 !important;
}

.crm-holiday-month {
    background: #f4f4f4 !important;
    border: 1px solid #ddd !important;
}

/* Tous les blocs doivent être au-dessus des cellules */
.crm-event-block {
    z-index: 5;
}

/* Mini-blocs mensuels */
.crm-event-mini {
    z-index: 5;
}

/* Lors du survol : passer vraiment au-dessus */
.crm-event-block:hover,
.crm-event-mini:hover {
    z-index: 50;
}

/* Centrage des tableaux + largeur 75% */
.crm-doc-table-wrapper {
    width: 75%;
    margin: 0 auto; /* centre horizontalement */
}

.crm-pointeuse-infos p {
    font-size: 12px !important;
    margin: 2px 0; /* optionnel : resserre légèrement */
}

.crm-pointeuse-infos strong {
    font-size: 12px !important;
}

.crm-pointeuse-infos span {
    font-size: 12px !important;
}

.crm-pointeuse-infos-fin p {
    font-size: 12px !important;
    margin: 2px 0; /* optionnel : resserre légèrement */
}

.crm-pointeuse-infos-fin strong {
    font-size: 12px !important;
}

.crm-pointeuse-infos-fin span {
    font-size: 12px !important;
}

.crm-timer-circle {
    width: 130px;
    height: 130px;
    margin: 20px auto;
    border-radius: 50%;
    border: 3px solid #0077cc; /* bleu CRM */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #0077cc;
    background: #f9fcff; /* léger fond */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;
}

.crm-timer-circle.running {
    transform: scale(1.05);
}

.btn-discret-bleu-crm-nav {
    padding: 6px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: none !important;
    margin-left: 8px;
}