/* =========================================
   1. GENERAL SETTINGS
   ========================================= */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    color: #595A5A;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
}

/* Footer positioning */
.access {
    flex: 1; 
    display: flex; 
    flex-direction: column;
    /* Vertically center the content */
    justify-content: center; 
    /* Add top padding to prevent button from overlapping the logo */
    padding-top: 60px; 
}

#index_footer {
    text-align: center;
    padding: 20px;
}

/* =========================================
   2. VARIABLES CONFIGURATION (:root)
   ========================================= */

:root {
    /* --- HEADER COLORS --- */
    --text-header-color: #595A5A;

    /* --- PATIENT/DOCTOR ICONS & BUTTONS --- */
    --patient-doctor-icon-background-color: #D88569; /* Hover background */
    --patient-doctor-icon-background-color2: #C8E1E4; /* Default background */
    --patient-doctor-icon-color: #595A5A;             /* Icon & Text color */
    
    /* Toggle visibility */
    --doctor-button-icon-visibility: none; 
    
    /* Patient button sizing */
    --patient-button-size: 45%; 
    
    /* Hide the "First time" section - Use none to remove space */
    --first-time-display: none; 

    /* --- PATIENT PAGE VARIABLES (Form) --- */
    --first-label-old-version-visibility: hidden; 
    --first-label-new-version-visibility: visible; 
    --first-label-new-version-new-text: "Numéro de l’examen"; 
    
    --second-label-old-version-visibility: hidden; 
    --second-label-new-version-visibility: visible; 
    --second-label-new-version-new-text: "Date de naissance"; 
    
    --third-label-old-version-visibility: hidden; 
    --third-label-new-version-visibility: visible; 
    --third-label-new-version-new-text: "Code"; 

    --access-button-icon-color: #595A5A;

    /* --- DESCRIPTION & WARNINGS --- */
    --desc-question-display: block; 
    --desc-question-text: "Vous avez les clés pour accéder à un examen unique ?";
    --desc-question-color: #595A5A;
    --desc-question-size: 18px;

    --warning-text-display: none; 
    --warning-text-content: "Attention : les comptes-rendus seront disponibles dans 48h";
    --warning-text-color: red;
    --warning-text-size: 16px;

    /* --- MULTILINGUAL TEXTS --- */
    --patient-text-fr: "Je suis un patient ou un médecin et j'ai des codes pour visualiser des images médicales";
    --patient-text-en: "I am a patient or a doctor and I have codes to view medical images";
    --patient-text-nl: "Ik ben een patiënt of een arts en ik heb codes om medische beelden te bekijken";
    --patient-text-de: "Ich bin Patient oder Arzt und habe Codes zum Anzeigen von medizinischen Bildern";
    --patient-text-it: "Sono un paziente o un medico e ho dei codici per visualizzare le immagini mediche";
    --patient-text-lv: "Esmu pacients vai ārsts, un man ir kodi medicīnisko attēlu apskatīšanai";
}

/* =========================================
   3. HEADER STYLES
   ========================================= */

#logo {
    color: var(--text-header-color);
}

/* =========================================
   4. INDEX PAGE (SELECTION MENU)
   ========================================= */

.access .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* Reset margins to rely on Flexbox centering */
    margin-top: 0;
    padding-bottom: 20px;
}

/* Icons color */
.access .row a i {
    color: var(--patient-doctor-icon-color);
}

/* Button Styling */
#patient-button a,
#doctor-button a {
    background-color: var(--patient-doctor-icon-background-color2);
    transition: background-color 0.3s ease;
    color: var(--patient-doctor-icon-color) !important;
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
    text-decoration: none;
}

#patient-button a:hover,
#doctor-button a:hover {
    background-color: var(--patient-doctor-icon-background-color);
    color: var(--patient-doctor-icon-color) !important;
}

#doctor-button {
    display: var(--doctor-button-icon-visibility);
    margin: 0;
    float: none;
}

#patient-button {
    width: var(--patient-button-size);
    margin: 0;
    float: none;
}

/* --- MULTILINGUAL TEXTS & ICONS --- */

/* Hide original text but keep structure */
#patient-button span#fr, #patient-button span#en, 
#patient-button span#nl, #patient-button span#de, 
#patient-button span#it, #patient-button span#lv {
    font-size: 0 !important;
}

/* Ensure Icon and Headers remain visible */
#patient-button span h3,
#patient-button span i,
#patient-button span img {
    font-size: 24px !important; 
    display: block !important;
    visibility: visible !important;
    margin-bottom: 10px;
    color: var(--patient-doctor-icon-color) !important;
    width: 100%;
}

/* Inject new text */
#patient-button span#fr::after { content: var(--patient-text-fr); font-size: 14px; color: var(--patient-doctor-icon-color) !important; display: block; line-height: 1.4; }
#patient-button span#en::after { content: var(--patient-text-en); font-size: 14px; color: var(--patient-doctor-icon-color) !important; display: block; line-height: 1.4; }
#patient-button span#nl::after { content: var(--patient-text-nl); font-size: 14px; color: var(--patient-doctor-icon-color) !important; display: block; line-height: 1.4; }
#patient-button span#de::after { content: var(--patient-text-de); font-size: 14px; color: var(--patient-doctor-icon-color) !important; display: block; line-height: 1.4; }
#patient-button span#it::after { content: var(--patient-text-it); font-size: 14px; color: var(--patient-doctor-icon-color) !important; display: block; line-height: 1.4; }
#patient-button span#lv::after { content: var(--patient-text-lv); font-size: 14px; color: var(--patient-doctor-icon-color) !important; display: block; line-height: 1.4; }

/* Completely remove the "First time" section to save space */
#first-time {
    display: var(--first-time-display);
}

/* =========================================
   5. PATIENT PAGE (LOGIN FORM)
   ========================================= */

.wrap .row {
    display: flex;
    justify-content: center; 
}

.wrap form input {
    display: block;          
    width: 100%;            
    max-width: 400px;       
    margin-left: auto;      
    margin-right: auto;     
    box-sizing: border-box; 
    text-align: center; 
}

.wrap input::placeholder {
    text-align: center; 
}

.wrap form .field span {
    text-align: center;
    display: block;
    width: 100%;
}

.wrap form button.button {
    margin-left: auto;
    margin-right: auto;
    display: block;
    background-color: var(--access-button-icon-color);
}

/* Labels Replacement */
span#label1_fr { font-size: 0 !important; visibility: var(--first-label-old-version-visibility); display: block; }
span#label1_fr:after { visibility: var(--first-label-new-version-visibility); content: var(--first-label-new-version-new-text); font-size: 16px; display: block; }

span#label2_fr { font-size: 0 !important; visibility: var(--second-label-old-version-visibility); display: block; }
span#label2_fr:after { visibility: var(--second-label-new-version-visibility); content: var(--second-label-new-version-new-text); font-size: 16px; display: block; }

span#label3_fr { font-size: 0 !important; visibility: var(--third-label-old-version-visibility); display: block; }
span#label3_fr:after { visibility: var(--third-label-new-version-visibility); content: var(--third-label-new-version-new-text); font-size: 16px; display: block; }

/* Description & Warning */
div#fr.smalldesc {
    font-size: 0 !important;
    display: var(--desc-question-display);
    position: relative;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

div#fr.smalldesc::after {
    content: var(--desc-question-text);
    color: var(--desc-question-color);
    font-size: var(--desc-question-size);
    display: block;
    width: 100%;
    text-align: center;
    white-space: pre-wrap;
    position: relative;
}

.wrap form::before {
    content: var(--warning-text-content);
    display: var(--warning-text-display);
    color: var(--warning-text-color);
    font-size: var(--warning-text-size);
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

/* =========================================
   6. RESPONSIVE (MOBILE)
   ========================================= */

@media screen and (max-width: 768px) {
    /* Stack content from the top to avoid large gaps */
    .access {
        justify-content: flex-start !important;
        flex: auto !important; 
        padding-top: 20px !important;
    }

    .access .row {
        flex-direction: column;
        align-items: center;
    }
    
    /* Reduce default margins for Header and Titles */
    #logo {
        margin-bottom: 10px !important;
    }
    #logo img {
        max-width: 80%;
        height: auto;
    }

    h2 {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
    }
    
    #patient-button, 
    #doctor-button {
        width: 90%; 
        max-width: 100%;
        margin-bottom: 10px;
    }
    
    #index_footer {
        padding: 10px;
    }
}