/*
 ==============================================================================
   jfmblinux — Thème de connexion basé sur Material.
   Flat, sans dégradé ni flou. Clair par défaut, sombre automatique
   selon les préférences système (prefers-color-scheme).
   Thème modifié, personnalisation du thème: 
   Les polices sont remplacées de manière ciblée dans les fichiers CSS et JS.
   Toutes les connexions externes vers Google fonts sont supprimées.
   Intégration de ces nouvelles polices Non Google sont en local.
   Conforme au RGPD pour une meilleure protection des données.
 ==============================================================================
*/

:root {
    --jfmblinux-bg: #ffffff;
    --jfmblinux-card-bg: #ffffff;
    --jfmblinux-card-border: #dadce0;
    --jfmblinux-text: #202124;
    --jfmblinux-text-secondary: #5f6368;
    --jfmblinux-primary: #1a73e8;
    --jfmblinux-primary-text-on: #ffffff;
    --jfmblinux-field-border: #dadce0;
    --jfmblinux-field-bg: transparent;
    --jfmblinux-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    --jfmblinux-radius-card: 28px;
    --jfmblinux-radius-field: 4px;
}

/* ---------- Police Inter chargée localement ---------- */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Préchargement pour performance ---------- */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF;
}

@media (prefers-color-scheme: dark) {
    :root {
        --jfmblinux-bg: #202124;
        --jfmblinux-card-bg: #2d2e30;
        --jfmblinux-card-border: #3c4043;
        --jfmblinux-text: #e8eaed;
        --jfmblinux-text-secondary: #9aa0a6;
        --jfmblinux-primary: #8ab4f8;
        --jfmblinux-primary-text-on: #202124;
        --jfmblinux-field-border: #5f6368;
        --jfmblinux-field-bg: transparent;
        --jfmblinux-shadow: none;
    }
}
html.dark-mode body.task-login {
    --jfmblinux-bg: #202124;
    --jfmblinux-card-bg: #2d2e30;
    --jfmblinux-card-border: #3c4043;
    --jfmblinux-text: #e8eaed;
    --jfmblinux-text-secondary: #9aa0a6;
    --jfmblinux-primary: #8ab4f8;
    --jfmblinux-primary-text-on: #202124;
    --jfmblinux-field-border: #5f6368;
    --jfmblinux-shadow: none;
}

/* ---------- Fond plein écran flat ---------- */
body.task-login {
    overflow: hidden;
    min-height: 100vh;
    font-family: 'Roboto', Arial, sans-serif !important;
    background: var(--jfmblinux-bg);
    transition: background 0.2s ease;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

/* ---------- Conteneur central : centrage fixe et fiable ---------- */
body.task-login #layout-content {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
    text-align: left;
    overflow-y: auto;
}

/* ---------- Logo discret en haut de carte ---------- */
body.task-login #logo {
    position: relative !important;
    top: 0 !important;
    max-height: 64px;
    margin-bottom: 16px;
}

/* ---------- La carte ---------- */
body.task-login #login-form {
    position: relative;
    top: 0 !important;
    margin: 0 !important;
    z-index: 1;
    width: 100%;
    max-width: 450px;
    background: var(--jfmblinux-card-bg);
    border: 1px solid var(--jfmblinux-card-border);
    border-radius: var(--jfmblinux-radius-card);
    box-shadow: var(--jfmblinux-shadow);
    padding: 48px 40px 32px;
    box-sizing: border-box;
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.jfmblinux-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--jfmblinux-primary);
    color: var(--jfmblinux-primary-text-on);
    margin-bottom: 20px;
}
.jfmblinux-icon-badge .material-symbols-outlined {
    font-size: 18px;
}

.jfmblinux-title {
    color: var(--jfmblinux-text);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    margin: 0 0 8px;
}
.jfmblinux-subtitle {
    color: var(--jfmblinux-text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 32px;
    font-weight: 400;
}

/* ---------- Neutraliser la structure table/Bootstrap d'origine ---------- */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr {
    display: block !important;
    width: 100% !important;
}
body.task-login #login-form td.input {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-text {
    display: none !important;
}
body.task-login #login-form td.title,
body.task-login #login-form td.title label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Champs avec label flottant (style Material outlined) ---------- */
body.task-login .jfmblinux-field {
    position: relative;
    height: 56px;
    margin-bottom: 20px;
}
body.task-login .jfmblinux-field input {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 16px 0 16px !important;
    border: 1px solid var(--jfmblinux-field-border) !important;
    border-radius: var(--jfmblinux-radius-field) !important;
    background: var(--jfmblinux-field-bg) !important;
    color: var(--jfmblinux-text) !important;
    font-size: 16px !important;
    font-family: inherit !important;
    outline: none !important;
    transition: border-color 0.15s ease, padding 0.15s ease;
}
body.task-login .jfmblinux-field.has-toggle input {
    padding-right: 44px !important;
}
body.task-login .jfmblinux-field label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--jfmblinux-text-secondary);
    background: transparent;
    padding: 0 4px;
    margin: 0;
    pointer-events: none;
    transition: all 0.15s ease;
}
body.task-login .jfmblinux-field input:focus,
body.task-login .jfmblinux-field input:not(:placeholder-shown) {
    padding-top: 8px !important;
}
body.task-login .jfmblinux-field input:focus + label,
body.task-login .jfmblinux-field input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%) scale(0.75);
    background: var(--jfmblinux-card-bg);
    color: var(--jfmblinux-primary);
}
body.task-login .jfmblinux-field input:focus {
    border-color: var(--jfmblinux-primary) !important;
    border-width: 2px !important;
    padding-left: 15px !important;
}
body.task-login .jfmblinux-field input:focus ~ label {
    left: 14px;
}

/* Bouton afficher/masquer le mot de passe */
body.task-login .jfmblinux-toggle-pass {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--jfmblinux-text-secondary);
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.15s ease;
}
body.task-login .jfmblinux-toggle-pass:hover {
    background: rgba(95, 99, 104, 0.1);
}

/* ---------- Sélecteur d'hôte / langue ---------- */
body.task-login #login-form select {
    width: 100% !important;
    height: 56px !important;
    background: var(--jfmblinux-field-bg) !important;
    border: 1px solid var(--jfmblinux-field-border) !important;
    border-radius: var(--jfmblinux-radius-field) !important;
    color: var(--jfmblinux-text) !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* ---------- Case "se souvenir de moi" ---------- */
body.task-login #login-form input[type="checkbox"] {
    accent-color: var(--jfmblinux-primary);
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 8px;
}
body.task-login #login-form label[for="rcmloginsavepass"] {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    color: var(--jfmblinux-text-secondary);
    font-size: 14px;
    cursor: pointer;
}

/* ---------- Pied de carte : bouton aligné à droite, façon Google ---------- */
.jfmblinux-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
}

body.task-login #login-form input[type="submit"],
body.task-login #rcmloginsubmit,
body.task-login .button.mainaction {
    width: auto !important;
    min-width: 110px;
    background: var(--jfmblinux-primary) !important;
    border: none !important;
    border-radius: 20px !important;
    color: var(--jfmblinux-primary-text-on) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    text-transform: none !important;
    padding: 10px 24px !important;
    cursor: pointer;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3);
    transition: box-shadow 0.15s ease, filter 0.15s ease;
}
body.task-login #login-form input[type="submit"]:hover,
body.task-login #rcmloginsubmit:hover {
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    filter: brightness(1.04);
}
body.task-login #login-form input[type="submit"]:active {
    filter: brightness(0.97);
}

/* ---------- Pied de page ---------- */
body.task-login #login-footer {
    margin-top: 28px;
    text-align: left;
    color: var(--jfmblinux-text-secondary);
    font-size: 12px;
}
body.task-login #login-footer a.support-link {
    color: var(--jfmblinux-primary);
    text-decoration: none;
}
body.task-login #login-footer a.support-link:hover {
    text-decoration: underline;
}

/* ---------- Messages d'erreur / succès ---------- */
body.task-login .alert,
body.task-login #message,
body.task-login .ui-pnotify {
    border-radius: 8px !important;
    font-size: 13.5px !important;
}
body.task-login .alert-danger,
body.task-login .alert-error,
body.task-login #message .error {
    background: rgba(217, 48, 37, 0.1) !important;
    border: 1px solid rgba(217, 48, 37, 0.35) !important;
    color: #d93025 !important;
}
@media (prefers-color-scheme: dark) {
    body.task-login .alert-danger,
    body.task-login .alert-error,
    body.task-login #message .error {
        color: #f28b82 !important;
    }
}
body.task-login .alert-success,
body.task-login #message .confirmation {
    background: rgba(24, 128, 56, 0.1) !important;
    border: 1px solid rgba(24, 128, 56, 0.35) !important;
    color: #188038 !important;
}

/* ---------- Neutralise le fond jaune que Chrome force sur l'autofill ---------- */
body.task-login .jfmblinux-field input:-webkit-autofill,
body.task-login .jfmblinux-field input:-webkit-autofill:hover,
body.task-login .jfmblinux-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--jfmblinux-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--jfmblinux-card-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--jfmblinux-card-bg) inset !important;
    caret-color: var(--jfmblinux-text);
    transition: background-color 5000s ease-in-out 0s;
}

/* ---------- Avertissement no-script ---------- */
body.task-login .noscriptwarning {
    position: relative;
    z-index: 1;
    max-width: 450px;
    margin: 16px auto 0;
    color: var(--jfmblinux-text-secondary);
    font-size: 12px;
    text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    body.task-login #layout-content { padding: 16px; }
    body.task-login #login-form { padding: 36px 24px 24px; border-radius: 20px; }
    body.task-login .jfmblinux-title { font-size: 22px; }
}