/* -----------------------------------------------------------
   STYLE COMPLET DU FORMULAIRE DENTAL DOSSIER
----------------------------------------------------------- */

/* Importation d'une police moderne (Google Fonts) */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap");

/* Réinitialisation de base pour le formulaire */
#ddm-form-wrapper {
    width: 100%;
    margin: 50px auto;
    text-align: center;
    position: relative;
    font-family: 'Montserrat', sans-serif;
}

#ddm-multistep-form {
    background: white;
    border: 0 none;
    border-radius: 8px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1);
    padding: 30px;
    box-sizing: border-box;
    width: 100%;
    max-width: 600px; /* Largeur max du formulaire */
    margin: 0 auto;
    position: relative;
}

/* Masquer les fieldsets par défaut (sauf le premier géré par JS/HTML) */
#ddm-multistep-form fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative;
}

/* Titres */
.fs-title {
    font-size: 18px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
    font-weight: 600;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

/* Champs de saisie (Inputs) */
#ddm-multistep-form input, 
#ddm-multistep-form textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    color: #2C3E50;
    font-size: 14px;
    transition: border 0.3s;
}

#ddm-multistep-form input:focus, 
#ddm-multistep-form textarea:focus {
    border: 1px solid #27AE60; /* Vert dentaire au focus */
    outline: none;
}

#ddm-multistep-form textarea {
    height: 100px;
    resize: vertical;
}

/* Boutons d'action */
#ddm-multistep-form .action-button {
    width: 120px;
    background: #27AE60; /* Vert principal */
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    text-transform: uppercase;
    font-size: 12px;
    transition: all 0.3s ease;
}

#ddm-multistep-form .action-button:hover, 
#ddm-multistep-form .action-button:focus {
    background: #219150; /* Vert plus foncé au survol */
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

/* Bouton Précédent (Gris) */
#ddm-multistep-form .previous {
    background: #AAB7B8;
}

#ddm-multistep-form .previous:hover, 
#ddm-multistep-form .previous:focus {
    background: #899697;
    box-shadow: 0 0 0 2px white, 0 0 0 3px #AAB7B8;
}

/* Barre de progression (en haut) */
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /* Compteur CSS pour numéroter les étapes */
    counter-reset: step;
    padding: 0;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: flex; /* Utilisation de Flexbox */
    justify-content: space-between;
}

#progressbar li {
    list-style-type: none;
    color: #666; /* Couleur du texte inactif */
    text-transform: uppercase;
    font-size: 10px;
    width: 25%; /* 4 étapes donc 25% chacune */
    float: left;
    position: relative;
    text-align: center;
    font-weight: 600;
}

/* Cercles des étapes */
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 25px;
    height: 25px;
    line-height: 25px;
    display: block;
    font-size: 12px;
    color: #333;
    background: white;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    border: 2px solid #ccc; /* Bordure grise par défaut */
    z-index: 2;
    position: relative;
}

/* Lignes de connexion entre les étapes */
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #ccc; /* Ligne grise par défaut */
    position: absolute;
    left: -50%;
    top: 14px; /* Centré verticalement par rapport au cercle */
    z-index: 1; /* Derrière le cercle */
}

/* Masquer la ligne pour le premier élément */
#progressbar li:first-child:after {
    content: none;
}

/* Style de l'étape active */
#progressbar li.active {
    color: #27AE60;
}

#progressbar li.active:before {
    background: #27AE60;
    color: white;
    border-color: #27AE60;
}

#progressbar li.active:after {
    background: #27AE60; /* La ligne devient verte si active */
}

/* Messages d'erreur ou succès */
#ddm-message {
    margin-top: 20px;
    font-weight: bold;
    color: #27AE60;
}
.ddm-error {
    color: red !important;
}
/* -----------------------------------------------------------
   STYLE DU TABLEAU DE BORD (DASHBOARD)
----------------------------------------------------------- */

.ddm-dashboard {
    width: 100%;
    max-width: 900px;
    margin: 50px auto;
    font-family: 'Montserrat', sans-serif;
}

.ddm-dashboard h2 {
    text-align: center;
    color: #2C3E50;
    margin-bottom: 30px;
}

.ddm-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.ddm-table th, .ddm-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.ddm-table th {
    background-color: #2C3E50;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
}

.ddm-table tr:last-child td {
    border-bottom: none;
}

.ddm-table tr:hover {
    background-color: #f9f9f9;
}

/* Badges de statut */
.ddm-badge {
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.status-pending {
    background-color: #F39C12; /* Orange */
}

.status-accepted {
    background-color: #27AE60; /* Vert */
}

.status-rejected {
    background-color: #C0392B; /* Rouge */
}

/* Bouton Voir */
.ddm-view-btn {
    background: #3498DB;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.ddm-view-btn:hover {
    background: #2980B9;
}

.ddm-empty {
    text-align: center;
    padding: 20px;
    background: #f1f1f1;
    border-radius: 5px;
    color: #666;
}

/* Responsive pour mobile */
@media screen and (max-width: 600px) {
    .ddm-table thead {
        display: none; /* On cache l'entête sur mobile */
    }
    .ddm-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
    }
    .ddm-table td {
        display: block;
        text-align: right;
        font-size: 13px;
        border-bottom: 1px solid #eee;
    }
    .ddm-table td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }
}
/* -----------------------------------------------------------
   STYLE DU POP-UP (MODAL)
----------------------------------------------------------- */

/* Le fond sombre derrière le pop-up */
.ddm-modal {
    display: none; /* Caché par défaut */
    position: fixed; 
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.6); /* Noir transparent */
    backdrop-filter: blur(2px); /* Petit effet de flou moderne */
}

/* La boîte blanche au centre */
.ddm-modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% du haut et centré */
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px; /* Largeur max */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: 'Montserrat', sans-serif;
    position: relative;
    animation: fadeIn 0.3s;
}

/* Animation d'apparition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Bouton de fermeture (Croix) */
.ddm-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
}

.ddm-close:hover,
.ddm-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Mise en page interne du modal */
.ddm-modal h3 {
    margin-top: 0;
    color: #2C3E50;
}

.ddm-modal-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ddm-modal-grid > div {
    flex: 1;
    min-width: 200px;
}

.ddm-modal h4 {
    border-bottom: 2px solid #27AE60;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 14px;
    text-transform: uppercase;
    color: #27AE60;
}

.ddm-modal p {
    margin: 5px 0;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

/* Bouton de téléchargement */
.ddm-file-btn {
    display: inline-block;
    background: #2C3E50;
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.ddm-file-btn:hover {
    background: #1a252f;
}
/* -----------------------------------------------------------
   STYLE DE LA BARRE DE RECHERCHE
----------------------------------------------------------- */

.ddm-search-container {
    margin-bottom: 20px;
    text-align: right; /* Aligné à droite au-dessus du tableau */
}

#ddm-search-input {
    width: 100%;
    max-width: 300px; /* Pas trop large */
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 25px; /* Bords arrondis modernes */
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 35px; /* Espace pour l'icône loupe */
}

#ddm-search-input:focus {
    border-color: #27AE60; /* Vert quand on clique dedans */
    box-shadow: 0 0 8px rgba(39, 174, 96, 0.2);
}

/* -----------------------------------------------------------
   OPTIMISATION MOBILE (RESPONSIVE) - VERSION FINALE
----------------------------------------------------------- */

@media screen and (max-width: 600px) {
    /* Cache l'entête du tableau */
    .ddm-table thead {
        display: none;
    }

    /* Style de la carte (chaque dossier) */
    .ddm-table tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        padding: 20px; /* Espace interne global de la carte */
    }

    /* Style des lignes (Date, Patient, etc.) */
    .ddm-table td {
        display: flex; 
        justify-content: space-between; /* Espace max entre Label et Valeur */
        align-items: center; /* Alignement vertical */
        text-align: right;
        font-size: 14px;
        border-bottom: 1px solid #f0f0f0;
        padding: 12px 0; /* Espace vertical entre les lignes */
        padding-left: 0 !important; /* Force l'alignement à gauche pour tous */
    }

    /* Ajout des Labels (Date, Patient...) */
    .ddm-table td::before {
        content: attr(data-label);
        font-weight: 700; /* Plus gras */
        text-transform: uppercase;
        font-size: 11px;
        color: #7f8c8d; /* Gris foncé pro */
        letter-spacing: 0.5px;
        text-align: left;
        flex-shrink: 0; /* Empêche le label de rétrécir */
        width: 40%; /* Largeur fixe pour aligner parfaitement */
    }

    /* Gestion spécifique de la ligne ACTION (Bouton) */
    .ddm-table td[data-label="Action"] {
        display: flex;
        flex-direction: column; /* Empile le label et le bouton */
        align-items: center; /* Centre tout horizontalement */
        border-bottom: none;
        padding-top: 20px;
        margin-top: 10px;
    }

    /* On cache le mot "ACTION" car le bouton se suffit à lui-même */
    .ddm-table td[data-label="Action"]::before {
        display: none; 
    }

    /* Style du Bouton VOIR */
    .ddm-view-btn {
        width: 50% !important; /* Prend 50% de la largeur de la carte */
        max-width: 200px; /* Pas plus grand que 200px */
        display: block;
        margin: 0 auto; /* Centré horizontalement */
        padding: 12px 0;
        font-size: 13px;
        border-radius: 25px; /* Bouton arrondi */
    }
}
/* -----------------------------------------------------------
   MODULE D'AUTHENTIFICATION (LOGIN / REGISTER)
----------------------------------------------------------- */

.ddm-auth-wrapper {
    max-width: 450px;
    margin: 50px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

/* Les onglets (Connexion / Inscription) */
.ddm-auth-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.ddm-auth-tab {
    flex: 1;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    color: #7f8c8d;
    transition: all 0.3s;
    background: none;
    border: none;
    font-size: 14px;
    text-transform:  uppercase;
}

.ddm-auth-tab.active {
    background: #fff;
    color: #27AE60; /* Vert dentaire */
    border-bottom: 3px solid #27AE60;
}

/* Le contenu des formulaires */
.ddm-auth-content {
    padding: 30px;
}

.ddm-auth-form h3 {
    text-align: center;
    color: #2C3E50;
    margin-bottom: 20px;
    font-size: 20px;
}

.ddm-input-group {
    margin-bottom: 15px;
}

.ddm-input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #2C3E50;
}

.ddm-input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    transition: border 0.3s;
}

.ddm-input-group input:focus {
    border-color: #27AE60;
    outline: none;
}

.ddm-submit-btn {
    width: 100%;
    padding: 15px;
    background: #27AE60;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
}

.ddm-submit-btn:hover {
    background: #219150;
}

.ddm-auth-message {
    margin-top: 15px;
    text-align: center;
    font-size: 13px;
    min-height: 20px;
}

.ddm-auth-error { color: #e74c3c; }
.ddm-auth-success { color: #27AE60; }
/* -----------------------------------------------------------
   NOUVEAU STYLE DES BOUTONS AUTHENTIFICATION
----------------------------------------------------------- */

/* Réduction de la taille des boutons de connexion/inscription */
.ddm-submit-btn.small-btn {
    width: auto !important; /* Ne prend plus 100% */
    min-width: 150px; /* Largeur minimum */
    padding: 10px 20px; /* Moins de hauteur */
    font-size: 14px; /* Texte un peu plus petit */
    border-radius: 25px; /* Très arrondi */
    display: inline-block;
}

/* Centrage dans le formulaire */
.ddm-auth-form button[type="submit"] {
    margin-top: 15px;
}
/* -----------------------------------------------------------
    HEADER TABLEAU DE BORD (LOGOUT + CRÉATION)
----------------------------------------------------------- */

.ddm-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.ddm-dashboard-header h2 {
    margin: 0; /* Enlève la marge par défaut du titre */
    font-size: 24px;
}

.ddm-logout-link {
    color: #e74c3c; /* Rouge */
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #e74c3c;
    padding: 5px 15px;
    border-radius: 20px;
    transition: all 0.3s;
}

.ddm-logout-link:hover {
    background: #e74c3c;
    color: white;
}

.ddm-create-btn-wrapper {
    margin-bottom: 20px;
    text-align: left; /* Bouton aligné à gauche */
}

/* Ajustement mobile */
@media screen and (max-width: 600px) {
    .ddm-dashboard-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}
/* -----------------------------------------------------------
   CORRECTIFS ORDINATEUR & TABLETTE UNIQUEMENT
   (Ne touche pas au mobile)
----------------------------------------------------------- */

@media screen and (min-width: 601px) {
    
    /* 1. Bouton "Se déconnecter" sur une seule ligne */
    .ddm-logout-link {
        white-space: nowrap; /* Interdit le retour à la ligne */
        display: inline-block;
        min-width: auto;
        padding: 8px 20px; /* Ajustement pour qu'il soit moins haut */
    }

    /* 2. Décalage de la colonne DATE vers la droite */
    /* On cible la première colonne (th et td) */
    .ddm-table th:first-child,
    .ddm-table td:first-child {
        padding-left: 40px; /* Ajoute de l'espace à gauche */
    }

    /* 3. Centrage de la colonne ACTIONS et du bouton VOIR */
    /* On cible la dernière colonne (th et td) */
    .ddm-table th:last-child,
    .ddm-table td:last-child {
        text-align: center; /* Centre le texte du titre et le contenu */
    }

    /* On s'assure que le bouton lui-même est bien centré */
    .ddm-view-btn {
        margin: 0 auto; /* Centre le bouton s'il a une largeur fixe */
        display: inline-block;
    }
}
/* Bouton Profil Spécifique */
.ddm-create-btn-wrapper .open-profile-modal {
    background-color: #3498DB !important; /* Bleu clair */
    color: white !important;
}

.ddm-create-btn-wrapper .open-profile-modal:hover {
    background-color: #2980B9 !important; /* Bleu un peu plus foncé au survol */
}
/* -----------------------------------------------------------
   FIX : UNIFICATION DES BOUTONS (Mobile & Desktop)
----------------------------------------------------------- */

/* Conteneur des boutons : Flexbox pour l'alignement */
.ddm-create-btn-wrapper {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne sur mobile */
    justify-content: center; /* Centre les boutons */
    gap: 15px; /* Espace entre les boutons */
    margin-bottom: 30px;
}

/* Style commun strict pour le lien (<a>) et le bouton (<button>) */
.ddm-create-btn-wrapper .ddm-btn-unified {
    /* Reset des styles par défaut du navigateur */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box; /* Important pour que padding soit inclus dans la largeur */

    /* Dimensions identiques */
    display: inline-flex; /* Utiliser Flex pour centrer le texte verticalement */
    align-items: center;
    justify-content: center;
    
    width: auto; /* Largeur auto mais... */
    min-width: 260px; /* ...largeur minimale identique pour les deux */
    height: 50px; /* Hauteur fixe imposée */
    
    padding: 0 20px;
    margin: 0 !important; /* On annule les marges externes */
    
    /* Typographie identique */
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600; /* Gras */
    text-transform: uppercase; /* Tout en majuscule pour l'uniformité */
    line-height: 1;
    border-radius: 50px; /* Bords très ronds */
    color: white !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Légère ombre moderne */
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Effet au clic/survol */
.ddm-create-btn-wrapper .ddm-btn-unified:hover {
    transform: translateY(-2px); /* Petit effet de levier */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Couleurs spécifiques */
.btn-green {
    background-color: #27AE60 !important;
}
.btn-green:hover {
    background-color: #219150 !important;
}

.btn-blue {
    background-color: #3498DB !important;
}
.btn-blue:hover {
    background-color: #2980B9 !important;
}

/* OPTIMISATION MOBILE */
@media screen and (max-width: 600px) {
    .ddm-create-btn-wrapper {
        flex-direction: column; /* Empile les boutons verticalement */
        align-items: center;
    }
    
    .ddm-create-btn-wrapper .ddm-btn-unified {
        width: 100%; /* Prend toute la largeur sur mobile */
        max-width: 300px; /* Mais pas plus de 300px */
    }
}
/* -----------------------------------------------------------
   NOUVEAUX FILTRES (Date & Statut)
----------------------------------------------------------- */

.ddm-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Permet le passage à la ligne sur mobile */
    gap: 10px;
}

.ddm-search-box {
    flex: 1; /* Prend l'espace disponible */
    min-width: 200px;
}

.ddm-filters-box {
    display: flex;
    gap: 10px;
}

.ddm-filter-select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 25px;
    background: white;
    font-family: 'Montserrat', sans-serif;
    color: #2C3E50;
    cursor: pointer;
    outline: none;
}

/* Ajustement Mobile */
@media screen and (max-width: 600px) {
    .ddm-toolbar {
        flex-direction: column;
        align-items: stretch; /* Tout prend 100% de largeur */
    }
    .ddm-filters-box {
        flex-direction: column;
    }
    .ddm-filter-select {
        width: 100%;
    }
}
/* --- NOUVELLES COULEURS PERSONNALISÉES --- */

/* 1. Onglet et Bouton Connexion (#1b526d) */
#tab-login.active { color: #1b526d !important; border-bottom-color: #1b526d !important; }
#ddm-login-form .ddm-submit-btn { background-color: #1b526d !important; }
#ddm-login-form .ddm-submit-btn:hover { background-color: #12384a !important; }

/* 2. Onglet et Bouton Inscription (#3DA6B4) */
#tab-register.active { color: #3DA6B4 !important; border-bottom-color: #3DA6B4 !important; }
#ddm-register-form .ddm-submit-btn { background-color: #3DA6B4 !important; }
#ddm-register-form .ddm-submit-btn:hover { background-color: #2c7a85 !important; }

/* 3. Formulaire de dépôt - Boutons Suivant/Envoyer (#3DA6B4) */
#ddm-multistep-form .next, 
#ddm-multistep-form .submit { background: #3DA6B4 !important; }
#ddm-multistep-form .next:hover, 
#ddm-multistep-form .submit:hover { background: #2c7a85 !important; }

/* 4. Formulaire de dépôt - Bouton Précédent (#1b526d) */
#ddm-multistep-form .previous { background: #1b526d !important; }
#ddm-multistep-form .previous:hover { background: #12384a !important; }

/* 5. Formulaire de dépôt - Barre de progression (#1b526d) */
#progressbar li.active { color: #1b526d !important; }
#progressbar li.active:before { background: #1b526d !important; border-color: #1b526d !important; color: white !important; }
#progressbar li.active:after { background: #1b526d !important; }