/* assets/css/emargement.css */

/* ==== Recherche de cours ==== */
#em-courses-search {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    margin-bottom: 16px;
	margin-top : 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

/* ==== Bloc de cours ==== */
.em-course {
padding: 25px;
margin-bottom: 12px;
border-radius: 20px;
background-color: #fefcfc;
box-shadow: 0 3px 6px rgba(191, 184, 184, 0.54)
}

/* ==== Alignement titre + actions ==== */
.em-course-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.em-course-header h3,
.em-course-header strong {
    margin: 0;
    font-size: 1.3rem;
    flex: 1;
	color: rgb(171, 0, 0);
	font-weight: 900;
}

/* ==== Boutons génériques ==== */
.em-course-actions button,
.em-course-actions a.button,
.em-camp-actions button,
.em-camp-actions a.button,
#em-submit-campaign,
#em-cancel-campaign,
#em-sign-clear,
#em-sign-cancel,
#em-sign-submit {
    margin-left: 8px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.90rem;
    transition: background-color 0.2s ease;
    color: #fff;
    background-color: #0073aa;
    text-decoration: none;
    display: inline-block;
}
.em-course-actions button:hover,
.em-camp-actions button:hover,
.em-course-actions a.button:hover,
.em-camp-actions a.button:hover,
#em-submit-campaign:hover,
#em-cancel-campaign:hover,
#em-sign-clear:hover,
#em-sign-cancel:hover,
#em-sign-submit:hover {
    opacity: 0.9;
}

/* Spécifiques */
.em-course-actions button.em-create-campaign { background-color: #368c50; }
.em-course-actions a.em-download-course-pdf,
.em-course-actions a.em-download-campaign-pdf { background-color: #0b88ad; }
.em-camp-actions button.em-close-campaign     { background-color: #a00; }
.em-camp-actions a.em-download-single-campaign-pdf { background-color: white; }
#em-cancel-campaign,
#em-sign-clear           { background-color: #aaa; }
#em-sign-cancel          { background-color: #777; }
#em-sign-submit          { background-color: #0073aa; }

.button.em-delete-course-campaigns {
	color: #a31919;
	background-color: rgb(255, 249, 249);
	border: 1px solid #a31919;
	
}

a.button.em-download-single-campaign-pdf {
	font-size : 0.7em !important;
	color : #0b88ad !important;
	border: 1px solid #0b88ad !important;
	padding : 3px 10px !important;
	
	
}

/* ==== Liste des campagnes ==== */
.em-campaigns-list,
.em-camp-list {
    list-style: none;
    margin: 8px 0;
    padding: 0;
}
.em-campaigns-list li,
.em-camp-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.em-camp-title {
    flex: 1;
}

/* ==== Accordéon "Tous mes cours" ==== */
.em-accordion-header {
    cursor: pointer;
    padding: 1em;
	margin-top: 15px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.em-accordion-content {
    border: 1px solid #ddd;
    border-top: none;
    padding: 1em;
    margin-bottom: 12px;
}
.em-accordion-icon {
    font-size: 0.8em;
    transition: transform 0.2s;
}
.em-accordion-icon.open {
    transform: rotate(180deg);
}

/* ==== Modals génériques ==== */
/* Conteneur de modale */
.em-modal {
  position: fixed;
  inset: 0; /* top/right/bottom/left:0 */
  display: none;
  z-index: 100000; /* au-dessus de tout */
}

/* Overlay plein écran */
.em-modal .em-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

/* Boîte de contenu */
.em-modal .em-modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  max-width: min(90vw, 720px);
  width: 100%;
  z-index: 100001; /* au-dessus de l’overlay */
}

/* État ouvert */
.em-modal.active { display: block; }

/* ==== Modal création de campagne ==== */
#em-modal .em-modal-content h2 {
    margin-top: 0;
}
#em-campaign-title {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

/* ==== Liste étudiant & émargement ==== */
.em-student-courses h3 {
    margin-top: 16px;
    font-size: 1.2rem;
}
.em-student-campaigns {
    list-style: none;
    padding: 0;
    margin-bottom: 16px;
}
.em-student-campaigns li {
    margin-bottom: 8px;
}
.em-student-campaigns button.em-sign {
    background-color: #46b450;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
}
.em-student-campaigns button.em-sign:hover {
    opacity: 0.9;
}

/* ==== Modal signature étudiant ==== */
#em-sign-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 9999;
}
#em-sign-modal.active {
    visibility: visible;
    opacity: 1;
}
#em-sign-modal .em-modal-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    cursor: pointer;
}
#em-sign-modal .em-modal-content {
    text-align: center;
}

/* ==== Signature Pad ==== */
#em-signature-pad {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 12px;
    box-sizing: content-box;
}

/* ==== Modal signature actions ==== */
.em-modal-actions {
    text-align: right;
    margin-top: 12px;
}
.em-modal-actions button {
    margin-left: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
}
.em-modal-actions #em-sign-clear,
.em-modal-actions #em-cancel-campaign {
    background-color: #aaa;
    color: #fff;
}
.em-modal-actions #em-sign-cancel {
    background-color: #777;
    color: #fff;
}
.em-modal-actions #em-sign-submit,
#em-submit-campaign {
    background-color: #0073aa;
    color: #fff;
}
/* Bouton Signer */
.em-sign {
    background-color: #46b450;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: inline-block;
}
.em-sign:hover {
    opacity: 0.9;
}

.em-sign-counter {
  display: inline-block;
  margin-left: .5rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid rgba(0,0,0,.06);
}

.em-counter-red    { background: #ffe5e5; color: #8a0000; }
.em-counter-orange { background: #fff1da; color: #8a5500; }
.em-counter-green  { background: #e6f7e9; color: #0b6b2b; }
.em-counter-grey   { background: #f0f0f0; color: #555; }


/* Compteur cliquable */
.em-sign-counter { cursor: pointer; }

/* Modale "liste des signatures" */
#em-sign-list-modal .em-modal-content.em-wide {
  max-width: 680px;
}

.em-sign-list-stats {
  margin-bottom: 8px; 
  font-size: 14px;
  opacity: .8;
}

.em-students-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 55vh;
  overflow: auto;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 8px;
}

.em-student-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.em-student-item:last-child { border-bottom: 0; }
.em-student-item.em-empty { color: #666; font-style: italic; }

.em-student-name { flex: 1; }

/* Pastilles */
.em-dot {
  width: 22px; height: 22px; min-width: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 14px; font-weight: 700;
  border: 1px solid rgba(0,0,0,.06);
}
.em-dot-green { background: #e6f7e9; color: #0b6b2b; }
.em-dot-red   { background: #ffe5e5; color: #8a0000; }

.em-section-title {
	margin-top : 20px;
}

.em-pagination { margin: 16px 0; }
.em-pagination .page-numbers { display:flex; gap:6px; list-style:none; padding:0; }
.em-pagination .page-number { display:inline-block; padding:6px 10px; border:1px solid #ddd; border-radius:4px; text-decoration:none; }
.em-pagination .current { font-weight:600; background:#f5f5f5; }