/* ==========================================================
   IT PROXIMITÉ 82
   PAGE DE CONNEXION GLPI 11
   DESKTOP + TABLETTE + MOBILE
   ========================================================== */


/* ==========================================================
   1. ARRIÈRE-PLAN
   ========================================================== */

.welcome-anonymous {
    background-image: url("../background.php") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* Desktop : afficher toute l'image */
    background-size: 100% 100% !important;

    background-color: #071f3b !important;

    width: 100% !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   2. PAGE
   ========================================================== */

.page-anonymous {
    width: 100% !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* ==========================================================
   3. CENTRAGE
   ========================================================== */

.page-anonymous > .flex-fill {
    width: 100% !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ==========================================================
   4. CONTENEUR
   ========================================================== */

.page-anonymous .container-tight {
    width: 100% !important;
    max-width: 520px !important;

    margin: 0 auto !important;
    padding: 0 !important;
}


/* ==========================================================
   5. MASQUER LE LOGO GLPI / I-VERTIX EXTÉRIEUR
   ========================================================== */

.page-anonymous .container-tight > .text-center:first-child {
    display: none !important;
}


/* ==========================================================
   6. CARTE
   ========================================================== */

.page-anonymous .main-content-card {
    position: relative !important;

    width: 100% !important;

    background: rgba(255, 255, 255, 0.985) !important;

    border: 1px solid rgba(255, 255, 255, 0.70) !important;
    border-radius: 18px !important;

    box-shadow:
        0 18px 55px rgba(0, 20, 55, 0.30) !important;

    overflow: hidden !important;
}


/* ==========================================================
   7. LOGO IT PROXIMITÉ 82
   ========================================================== */

.page-anonymous .main-content-card::before {
    content: "" !important;

    display: block !important;

    width: 200px !important;
    height: 92px !important;

    margin: 18px auto 0 auto !important;

    background-image:
        url("/branding/IT_Proximite_82_logo_GLPI.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}


/* ==========================================================
   8. EN-TÊTE EXTÉRIEUR
   ========================================================== */

.page-anonymous .main-content-card > .card-header {
    display: none !important;
}


/* ==========================================================
   9. CORPS DE LA CARTE
   ========================================================== */

.page-anonymous .main-content-card > .card-body {
    padding: 4px 42px 30px 42px !important;
}


/* ==========================================================
   10. FORMULAIRE PLEINE LARGEUR
   ========================================================== */

.page-anonymous .main-content-card form .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.page-anonymous .main-content-card form .col-md-5 {
    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================================
   11. SUPPRESSION SOURCE DE CONNEXION
   PC + TABLETTE + MOBILE
   ========================================================== */

/*
   HTML GLPI observé :

   <div class="mb-3">
       <label for="dropdown_auth...">Source de connexion</label>
       <select name="auth" ...>
   </div>
*/

.page-anonymous form div.mb-3:has(> select[name="auth"]),
.page-anonymous form div.mb-3:has(> label[for^="dropdown_auth"]) {
    display: none !important;
}


/* Sécurité supplémentaire */

.page-anonymous select[name="auth"],
.page-anonymous label[for^="dropdown_auth"],
.page-anonymous select[name="auth"] + .select2,
.page-anonymous select[name="auth"] ~ .select2-container {
    display: none !important;
}


/* ==========================================================
   12. TITRE
   ========================================================== */

.page-anonymous .main-content-card form .card-header {
    display: block !important;

    background: transparent !important;

    border-top: 1px solid #e7edf4 !important;
    border-bottom: none !important;

    padding: 17px 0 0 0 !important;
    margin-bottom: 18px !important;

    text-align: center !important;
}

.page-anonymous .main-content-card form .card-header h2 {
    margin: 0 !important;

    color: #10243d !important;

    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}


/* ==========================================================
   13. SOUS-TITRE
   ========================================================== */

.page-anonymous
.main-content-card
form
.card-header
h2::after {

    content: "Accédez à votre espace de support" !important;

    display: block !important;

    margin-top: 6px !important;

    color: #667085 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}


/* ==========================================================
   14. LABELS
   ========================================================== */

.page-anonymous .form-label {
    margin-bottom: 6px !important;

    color: #263445 !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}


/* ==========================================================
   15. CHAMPS
   ========================================================== */

.page-anonymous .form-control,
.page-anonymous .form-select {
    width: 100% !important;

    min-height: 44px !important;

    background-color: #ffffff !important;
    color: #263445 !important;

    border: 1px solid #ced9e6 !important;
    border-radius: 8px !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}


.page-anonymous .form-control:focus,
.page-anonymous .form-select:focus {
    border-color: #1689e8 !important;

    box-shadow:
        0 0 0 3px rgba(22, 137, 232, 0.15) !important;
}


/* ==========================================================
   16. ESPACEMENTS
   ========================================================== */

.page-anonymous .mb-3 {
    margin-bottom: 14px !important;
}

.page-anonymous .mb-4 {
    margin-bottom: 14px !important;
}


/* ==========================================================
   17. CHECKBOX
   ========================================================== */

.page-anonymous .form-check-input:checked {
    background-color: #1689e8 !important;
    border-color: #1689e8 !important;
}

.page-anonymous .form-check {
    margin-bottom: 13px !important;
}


/* ==========================================================
   18. BOUTON
   ========================================================== */

.page-anonymous .btn-primary {
    width: 100% !important;

    min-height: 46px !important;

    background-color: #1689e8 !important;
    border-color: #1689e8 !important;

    color: #ffffff !important;

    border-radius: 8px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    box-shadow:
        0 4px 12px rgba(22, 137, 232, 0.20) !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease !important;
}

.page-anonymous .btn-primary:hover,
.page-anonymous .btn-primary:focus {
    background-color: #0b6fc2 !important;
    border-color: #0b6fc2 !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 6px 16px rgba(22, 137, 232, 0.28) !important;
}


/* ==========================================================
   19. COPYRIGHT
   ========================================================== */

.page-anonymous
.container-tight
> .text-center.text-muted {

    margin-top: 10px !important;

    color: rgba(255, 255, 255, 0.80) !important;

    font-size: 11px !important;
    line-height: 1.3 !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.50) !important;
}


.page-anonymous
.container-tight
> .text-center.text-muted
a {
    color: rgba(255, 255, 255, 0.90) !important;
}


/* ==========================================================
   20. ÉCRANS 4K
   ========================================================== */

@media (min-width: 2000px) {

    .page-anonymous .container-tight {
        max-width: 540px !important;
    }

    .page-anonymous .main-content-card::before {
        width: 210px !important;
        height: 96px !important;
    }
}


/* ==========================================================
   21. TABLETTES
   ========================================================== */

@media (max-width: 900px) {

    .welcome-anonymous {
        background-size: cover !important;
        background-position: center center !important;
    }

    .page-anonymous > .flex-fill {
        padding: 18px !important;
    }
}


/* ==========================================================
   22. MOBILE / IPHONE
   ========================================================== */

@media (max-width: 700px) {

    html,
    body,
    .welcome-anonymous,
    .page-anonymous {
        width: 100% !important;
        min-height: 100dvh !important;

        overflow-x: hidden !important;
    }


    /* Fond mobile */
    .welcome-anonymous {
        background-attachment: scroll !important;

        background-size: cover !important;
        background-position: center center !important;

        min-height: 100dvh !important;
    }


    /* Centrage */
    .page-anonymous > .flex-fill {
        min-height: 100dvh !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding:
            max(10px, env(safe-area-inset-top))
            14px
            max(12px, env(safe-area-inset-bottom))
            14px !important;
    }


    /* Carte compacte */
    .page-anonymous .container-tight {
        width: calc(100% - 16px) !important;
        max-width: 320px !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }


    .page-anonymous .main-content-card {
        width: 100% !important;

        background:
            rgba(255, 255, 255, 0.975) !important;

        border-radius: 16px !important;

        box-shadow:
            0 12px 32px rgba(0, 20, 55, 0.32) !important;
    }


    /* Logo */
    .page-anonymous .main-content-card::before {
        width: 105px !important;
        height: 48px !important;

        margin: 9px auto 0 auto !important;

        background-size: contain !important;
    }


    /* Corps */
    .page-anonymous
    .main-content-card
    > .card-body {

        padding:
            0 14px 15px 14px !important;
    }


    /* Header */
    .page-anonymous
    .main-content-card
    form
    .card-header {

        padding:
            8px 0 0 0 !important;

        margin-bottom:
            10px !important;
    }


    /* Titre */
    .page-anonymous
    .main-content-card
    form
    .card-header h2 {

        font-size: 17px !important;

        line-height: 1.15 !important;

        font-weight: 700 !important;
    }


    /* Sous-titre */
    .page-anonymous
    .main-content-card
    form
    .card-header
    h2::after {

        margin-top: 4px !important;

        font-size: 11px !important;

        line-height: 1.25 !important;
    }


    /* Labels */
    .page-anonymous .form-label {
        margin-bottom: 3px !important;

        font-size: 11px !important;
    }


    /* Espacement */
    .page-anonymous .mb-3 {
        margin-bottom: 7px !important;
    }

    .page-anonymous .mb-4 {
        margin-bottom: 8px !important;
    }


    /* Champs */
    .page-anonymous .form-control,
    .page-anonymous .form-select {
        height: 39px !important;
        min-height: 39px !important;

        border-radius: 8px !important;
    }


    /*
       16 px évite le zoom automatique
       de Safari sur les champs.
    */
    .page-anonymous input,
    .page-anonymous select {
        font-size: 16px !important;
    }


    /* Checkbox */
    .page-anonymous .form-check {
        margin-top: 1px !important;
        margin-bottom: 8px !important;
    }

    .page-anonymous .form-check-label {
        font-size: 12px !important;
    }


    /* Bouton */
    .page-anonymous .btn-primary {
        min-height: 40px !important;

        font-size: 13px !important;

        border-radius: 8px !important;
    }


    /* Copyright */
    .page-anonymous
    .container-tight
    > .text-center.text-muted {

        margin-top: 6px !important;

        padding: 0 4px !important;

        font-size: 8px !important;

        line-height: 1.2 !important;
    }
}


/* ==========================================================
   23. PETITS IPHONE
   ========================================================== */

@media (max-width: 390px) {

    .page-anonymous .container-tight {
        width: calc(100% - 12px) !important;
        max-width: 300px !important;
    }


    .page-anonymous
    .main-content-card
    > .card-body {

        padding:
            0 12px 13px 12px !important;
    }


    .page-anonymous
    .main-content-card::before {

        width: 95px !important;
        height: 43px !important;

        margin-top: 8px !important;
    }


    .page-anonymous
    .main-content-card
    form
    .card-header h2 {

        font-size: 16px !important;
    }
}