/* static/css/consultation.css */
/* === GLOBAL === */
/* =========================
   consultation.css
   CSS standard pour Consultation
   ========================= */

/* === GLOBAL === */
body, html {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #E7F2FF;
}

/* === ZONE PATIENT === */
.zone-patient {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 24px;
    padding: 24px;
    margin: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Ligne 1 : Recherche + Lettres caissière + Retour */
.patient-top-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 768px) {
    .patient-top-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        display: flex;
        gap: 16px;
    }
}

.patient-top-row input.input {
    width: 100%;
}

/* Champ de recherche : largeur équilibrée */
.patient-top-row .flex-1 {
    flex: 0 1 55%; /* calibré pour s’arrêter au S final de CNAMGS */
    max-width: 300px;
}

/* On allonge la zone de recherche horizontalement */
.patient-top-row .flex-1 {
    flex-grow: 1;
    margin-right: auto;
}

/* Aligne les lettres caissière + bouton retour sur la même ligne */
.patient-top-row .flex.items-center {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 0 !important; /* pour supprimer le petit décalage vertical */
}

/* Avatar caissière */
.caissiere-avatar {
    width: 36px;
    height: 36px;
    background-color: #2563EB;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bouton retour (texte avant la flèche) */
.btn-return {
    color: #EF4444;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-direction: row-reverse; /* <-- place la flèche à droite du texte */
    transition: color 0.2s;
}

.btn-return:hover {
    color: #DC2626;
}

/* Ligne 2 : Nouveau patient */
.patient-new-row {
    display: flex;
    justify-content: flex-start; /* bouton aligné à gauche */
}

.patient-new-row .btn-primary {
    min-width: 160px;
}

/* Ligne 3 : Radios CNAMGS */
.cnamgs-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* Labels et inputs */
.label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid #D1D5DB;
    font-size: 1rem;
    transition: all 0.2s;
}

.input:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

/* Bouton Nouveau patient */
.btn-primary {
    background-color: #3B82F6;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    border: none;
}

.btn-primary:hover {
    background-color: #2563EB;
}

/* Radios */
.radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #374151;
}

.radio-input {
    accent-color: #3B82F6;
}

/* === ZONE SERVICES & MÉDECINS === */
.zone-service {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 24px;
    padding: 16px;
    padding-bottom: 8px; /* Réduction pour rapprocher les vignettes du bas */
    margin: 16px;
    overflow-y: auto;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E40AF;
    margin-bottom: 12px;
}

.sub-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.grid-consultation-externes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.card-medecin {
    height: 112px;
    background-color: #DBEAFE;
    border: 2px solid #BFDBFE;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1E40AF;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s;
}

.card-medecin:hover {
    background-color: #BFDBFE;
    transform: translateY(-2px);
}

.specialty-titles-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

.specialty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
}

.specialty-combined {
    margin-top: 20px;
}
/* Ajustement pour grid des spécialités CDT + Dermato */
.specialty-combined .grid-consultation-externes {
    grid-template-rows: auto; /* supprime les 3 lignes fixes */
}


/* Réduction de l’espace bas de page pour rapprocher les vignettes du bord */
.zone-service > .space-y-8 > div:last-child,
.zone-service .specialty-combined,
.zone-service .grid-consultation-externes {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* === ZONE VALIDATION === */
.zone-validation {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 24px;
    padding: 16px;
    margin: 16px;
    display: flex;
    justify-content: flex-end;
}

.btn-validate {
    background-color: #1D4ED8;
    color: #ffffff;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    border: none;
}

.btn-validate:hover {
    background-color: #2563EB;
    transform: translateY(-1px);
}

/* === CARTES SPÉCIALITÉS CDT & DERMATOLOGIE === */
.card-cdt {
    background-color: #C7F0DB;
    border: 2px solid #A8E6C9;
    color: #065F46;
}

.card-dermato {
    background-color: #FDE2C0;
    border: 2px solid #FBC89A;
    color: #92400E;
}

/* Hover pour CDT */
.card-cdt:hover {
    background-color: #A8E6C9; /* un vert un peu plus foncé que le fond */
    transform: translateY(-2px);
}

/* Hover pour Dermatologie */
.card-dermato:hover {
    background-color: #FBC89A; /* un orange un peu plus foncé que le fond */
    transform: translateY(-2px);
}

/* === ZONE PATIENT - PARTIE GAUCHE REORGANISEE CORRIGEE === */

/* Ligne 1 : Recherche + Bouton +Nouveau + Caissière / Retour */
.patient-top-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 768px) {
    .patient-top-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between; /* laisse la recherche à gauche, caissière + retour à droite */
        gap: 16px;
    }
}

/* Zone recherche + bouton +Nouveau */
.patient-top-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1; /* prend tout l'espace disponible à gauche */
}

/* Champ de recherche : occupe la majeure partie */
.patient-top-left .flex-1 {
    flex: 1;
    max-width: 300px;
}

/* Bouton +Nouveau positionné juste à droite de la recherche */
.patient-top-left .btn-primary {
    flex-shrink: 0;
    min-width: 140px;
    white-space: nowrap;
}

/* Zone caissière + bouton retour à droite */
.patient-top-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Supprime l’ancienne ligne des radios CNAMGS */
.cnamgs-row {
    display: none;
}

/* Encadré dynamique patient (existant ou nouveau) */
.patient-info-card {
    margin-top: 16px;
    background-color: #F9FAFB;
    border: 1px solid #D1D5DB;
    border-radius: 16px;
    padding: 12px 16px;
    display: none; /* affiché dynamiquement via JS */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Info patient structuré */
.patient-info-card .info-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.patient-info-card .info-line span.label {
    font-weight: 600;
    color: #374151;
}

.patient-info-card .info-line span.value {
    color: #1E40AF;
    font-weight: 500;
}

/* Ajustement recherche patient + bouton Nouveau */
.patient-top-row .flex-1 {
    display: flex;
    align-items: flex-end; /* aligne label et input avec le bouton sur la ligne */
    gap: 8px; /* espace entre input et bouton */
}

.patient-top-row .flex-1 > div {
    flex-basis: 300px; /* largeur minimale de l’input */
    flex-grow: 1;      /* s’étire un peu vers la droite */
}

.patient-top-row .flex-1 .input {
    width: 100%;       /* prend tout l’espace de son conteneur */
    box-sizing: border-box;
}

.patient-top-row .btn-primary {
    flex-shrink: 0;    /* le bouton garde sa taille */
    padding: 8px 16px;
}


/* Ajustement final recherche patient + bouton Nouveau */
.patient-top-row .flex-1 {
    display: flex;
    align-items: flex-end; /* aligne input et bouton sur la même ligne */
    gap: 12px;             /* espace un peu plus large entre input et bouton */
}

.patient-top-row .flex-1 .input {
    width: calc(100% - 120px); /* étire l’input vers la droite tout en laissant de la place pour le bouton */
    min-width: 220px;           /* largeur minimale pour petit écran */
    box-sizing: border-box;
}

.patient-top-row .flex-1 .btn-primary {
    align-self: flex-end; /* descente du bouton pour être aligné avec l’input */
    flex-shrink: 0;
    padding: 8px 16px;
}

/* Décalage vers la droite de la zone recherche + bouton Nouveau */
.patient-top-row .flex-1 {
    margin-left: 18px; /* pousse légèrement vers la droite */
}

.patient-top-row .flex.items-center {
    margin-left: 16px; /* décale également la partie droite pour garder l'harmonie */
}