/*
  This CSS file is meant to be customized by deployments
  and is intentionally left empty. Any style that is added
  here should override the default styles in the application.
 */


:root {
    /* Material design */
    --mdc-text-button-label-text-color: #f7f7f7;
    --mdc-shape-small: 4px;
    --mdc-theme-body: rgb(27, 39, 51);
    --mdc-theme-error: #a20323;
    --cas-theme-primary: #1F8388;
    --cas-theme-button-bg-hover: #1678d8;
    --cas-theme-primary-bg: rgba(21, 62, 80, 0.2);
    --cas-theme-button-bg: #26418f;
    --cas-theme-button-bg-lite: #1e78d0;
    --cas-theme-primary-light: #006d85;
    --cas-theme-secondary: #018077;
    --cas-theme-success: #74C163;
    --cas-theme-danger: #58151c;
    --cas-theme-danger-bg: #f8d7da;
    --cas-theme-warning: #664d03;
    --cas-theme-warning-bg: #fff3cd;
    --cas-theme-border-light: 1px solid rgba(0, 0, 0, .2);
    --mdc-theme-primary: var(--cas-theme-primary, #153e50);
    --mdc-typography-font-family: "Ubuntu", "Open Sans", Roboto, Arial, sans-serif;

    --navbar-width: 256px;
    --navbar-width-min: 80px;
    --navbar-dark-primary: #18283b;
    --navbar-dark-secondary: #2c3e50;
    --navbar-light-primary: #f5f6fa;
    --navbar-light-secondary: #8392a5;

    /* Thèmes ULK : fallback hexas du thème 11 Colvert, si souci d'appel distant */
    --local-bg-primary1: var(--ulk-theme11-bg-primary1, #4ABEB1);
    --local-bg-primary2: var(--ulk-theme11-bg-primary2, #007668);
    --local-bg-primary1-hover: color-mix(in srgb, var(--local-bg-primary1) 60%, white);
    
    --local-fg-on-primary1: var(--ulk-fg-on-primary1);
    --local-fg-on-primary2: var(--ulk-fg-on-primary2);
    --local-fg-accent1: var(--ulk-theme11-fg-accent1, #007668);
    --local-fg-accent1-rgb: var(--ulk-theme11-fg-accent1-rgb, 0, 118, 104);
    --local-fg-accent1-darkmode: var(--ulk-theme11-fg-accent1-darkmode, #74CDC3);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme11-fg-accent1-darkmode-rgb, 116, 205, 195);

    /* Radius configurable : ici en *-sm mais peut être : -full, -xl, -lg, -md ,-sm, -xs et -none */
    --local-radius-button: var(--ulk-radius-xs) ;
    --local-radius-surface: var(--ulk-radius-sm) ;
}

:root.dark {
     color-scheme: dark;
    --local-fg-accent1: var(--local-fg-accent1-darkmode);
    --local-fg-accent1-on-surface: var(--local-fg-accent1-darkmode);
    --local-fg-accent1-rgb: var(--local-fg-accent1-rgb-darkmode);

    --local-bg: var(--ulk-bg-darkmode);
    --local-fg-neutral1: var(--ulk-fg-neutral1-darkmode);
}


/* --------------------------------------------------- */
/* DOM et html */

body {
    display: flex;
    min-height: 100vh;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--local-font-sans);
    background: var(--local-bg-primary2);
    color: var(--local-fg-on-primary2);
}

header {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: var(--ulk-spacing-sm, 1.6rem) var(--ulk-spacing-md, 2.4rem);
}

a,
a:hover,
a:visited,
a:active {
    color: var(--local-fg-accent1);
    text-decoration: underline;
}

/* Lien d'évitement : posé sur le fond du body (primary2). Le DS le colore en accent (fond transparent),
   or l'accent n'est prévu que sur ulk-bg / neutral1 / neutral2 -> 2,93:1 en Colvert. On prend la couleur texte de primary2. */
.ulk-c-skip-link--button,
.ulk-c-skip-link--button:visited,
.ulk-c-skip-link--button:hover,
.ulk-c-skip-link--button:focus {
    color: var(--local-fg-on-primary2);
    border-color: var(--local-fg-on-primary2);
}

/* Survol : soulignement plutôt qu'un fond éclairci (qui ferait baisser le contraste du texte blanc) */
.ulk-c-skip-link--button:hover {
    background-color: transparent;
    text-decoration: underline;
}

/* --------------------------------------------------- */
/* Partie top */

.cas-topbar {
    display:flex;
    align-items: center;
    gap: var(--ulk-spacing-md);
    width:100%;
    margin: 0 auto;
}

/* SVG -> besoin d'une taille sinon ne s'affiche pas */ 
#cas-logo {
    height: 4rem;
    width: auto;
}

.cas-brand::after {
    content: "";
    display: block;
    height: auto;
    width: 0.2rem;
    background: var(--local-fg-on-primary2);
}

.cas-brand {
    display: flex;
    align-items: stretch;
    gap: var(--ulk-spacing-sm, 1.2rem);
    height: auto;
}

/* Logo, dark mode, mobile*/

#cas-logo {
    filter: invert(1);
}


@media screen and (max-width: 767.99px) {
    #cas-logo {
        height: 3rem;
        margin-bottom: var(--ulk-spacing-xs);
    }

    /* Passe le logo et le titre sur deux lignes distinctes en mobile */
    .cas-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ulk-spacing-xs, 0.8rem);
    }

    .cas-brand::after {
        display: none;
    }

    .cas-title {
        text-align: left;
    }
}

.cas-title {text-align:right;}


/* --------------------------------------------------- */
/* Boîte centrale, login */

.login-shell {
    width: 100%;
    max-width: 450px;
    box-sizing: border-box;
    padding-inline: var(--ulk-spacing-xs, 1.6rem);
}

.login-shell h1 {
    margin-top:0;
    padding-top:0;
}

/* Resserre la boîte centrale en mobile */
@media screen and (max-width: 767.99px) {
    .ulk-s-surface--neutral1.u-px-xxl.u-py-xxl {
        padding: var(--ulk-spacing-md, 2.4rem);
    }

    #usernameSection,
    #passwordSection {
        margin-top: var(--ulk-spacing-xs, 0.8rem);
        margin-bottom: var(--ulk-spacing-xs, 0.8rem);
    }
}

.cas-button--full-width {
    width: 100%;
}

.reveal-password-icon {
    display: inline-flex;
}

.reveal-password-icon .icon-eye-off,
.reveal-password-icon.mdi-eye .icon-eye-off {
    display: none;
}

.reveal-password-icon.mdi-eye-off .icon-eye {
    display: none;
}

.reveal-password-icon.mdi-eye-off .icon-eye-off {
    display: inline;
}

.cas-input--has-trailing-button .ulk-c-input__input {
    padding-right: 3.2rem;
}

.cas-reveal-password-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--local-fg-neutral1);
    cursor: pointer;
    border-radius: var(--ulk-radius-sm, 4px);
}

.cas-reveal-password-btn:hover,
.cas-reveal-password-btn:focus-visible {
    background-color: rgba(var(--local-fg-accent1-rgb), 0.12);
}

.cas-reveal-password-btn:focus-visible,
.ulk-c-button:focus-visible {
    outline: 2px solid var(--local-fg-neutral1);
    outline-offset: 2px;
}

/* --------------------------------------------------- */
/* Bloc infos (sous boîte login)*/

.cas-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin: 0;
}

.cas-info-list li {
    display: flex;
    align-items: center;
    gap: var(--ulk-spacing-xs, 0.8rem);
}

.cas-info-list li + li {
    margin-top: var(--ulk-spacing-sm, 1.6rem);
}

.cas-info-list__icon {
    flex-shrink: 0;
    font-size: 3rem;
    line-height: 1;
    margin-top: 0rem;
    /* color: var(--local-fg-accent1); */
}

.cas-info-list code {
    font-size: 0.95em;
    white-space: nowrap;
}

.cas-icon {
    margin-right: 2px;
    vertical-align: -3px;
}


/* Fieldset du formulaire : regroupement sémantique seulement, sans cadre visuel */
.cas-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

/* --------------------------------------------------- */
/* Erreurs */

.cas-field-error[aria-hidden="true"] {
    display: none;
}

.caps-on {
    margin-top: var(--ulk-spacing-sm, 1.6rem);
}


/* --------------------------------------------------- */
/* Footer */

.cas-footer {
    background-color: transparent;
    color: var(--local-fg-on-primary2);
}

.cas-footer a {
    color: inherit;
}

.cas-footer__copyright,
.cas-pmlinks__help {
    margin: 0;
}


/* -----------------------------------------------------*/
/* Overrides ULK */

.ulk-c-input .ulk-c-input__input {
    border-radius:var(--local-radius-button);
    /* Contraste de la bordure : 1,41:1 par défaut -> 4,8:1 (WCAG 1.4.11, 3:1 minimum) */
    border-color: #6b7280;
}

.ulk-c-alert.caps-warn {
    display: none;
}

.ulk-s-surface--neutral1 {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.ulk-c-button {
    background-color: var(--local-bg-primary1);
    color: var(--local-fg-on-primary1);
}

.ulk-c-button:hover,
.ulk-c-button:focus-visible {
    background-color: color-mix(in srgb, var(--local-bg-primary1) 80%, white);
}

/* -----------------------------------------------------*/
/* Pages pas encore refondues (encore en MDC : déconnexion, erreurs...) */
/* Le body est désormais sombre avec texte clair : on rétablit un texte foncé dans leurs cartes. */

.mdc-card,
.card {
    color: var(--ulk-fg-neutral1, #1b2733);
}

/* -----------------------------------------------------*/
/* Page d'erreur générique (error.html) */

.login-shell--wide {
    max-width: 720px;
}

.ulk-c-alert .cas-error-title,
.ulk-c-alert .cas-status-title {
    margin: 0;
    padding: 0;
    font-size: 2.2rem;
}

.cas-error-code code {
    display: block;
    padding: var(--ulk-spacing-sm, 1.6rem);
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--ulk-radius-xs, 2px);
    font-size: 1.3rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* -----------------------------------------------------*/
/* Pages de statut (connexion réussie...) : icône + titre dans le bloc */

.cas-status-heading {
    display: flex;
    align-items: center;
    gap: var(--ulk-spacing-sm, 1.6rem);
}

.cas-status-heading__icon {
    flex-shrink: 0;
    font-size: 3rem;
    line-height: 1;
}

/* -----------------------------------------------------*/
/* Paramètres d'affichage (engrenage en haut à droite de la topbar) */

.cas-topbar .cas-topbar__utilities {
    display: flex; /* le design system masque .ulk-c-header-utilities en mobile (prévu pour un menu burger) */
    margin: 0 0 0 auto;
}

.cas-topbar__utilities .ulk-c-header-utilities__item {
    position: relative;
}

.cas-topbar .ulk-c-header-utilities__button {
    color: var(--local-fg-on-primary2);
}

.cas-topbar .ulk-c-header-utilities__button:hover,
.cas-topbar .ulk-c-header-utilities__button[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.15);
}

.cas-topbar .ulk-c-header-utilities__button:focus-visible {
    outline: 2px solid var(--local-fg-on-primary2);
    outline-offset: 2px;
}

.cas-topbar__utilities .dropdown-menu {
    top: 100%;
    margin-top: var(--ulk-spacing-xxs, 0.4rem);
    z-index: 1050;
}

@media screen and (max-width: 767.99px) {
    .cas-topbar {
        position: relative;
    }

    /* En mobile la topbar passe en colonne : l'engrenage reste en haut à droite */
    .cas-topbar .cas-topbar__utilities {
        position: absolute;
        top: var(--ulk-spacing-sm, 1.6rem);
        right: var(--ulk-spacing-md, 2.4rem);
    }
}

/* -----------------------------------------------------*/
/* Thèmes de couleurs (sélecteur dans le menu engrenage)
   html[data-ulk-theme="N"] remplace les couleurs du thème par défaut (11 Colvert, cf. :root).
   Spécificité (0,1,1) : passe devant :root, mais :root.dark (0,2,0) garde la main
   pour basculer l'accent en version mode sombre. */
html[data-ulk-theme="1"] { /* Neutre */
    --local-bg-primary1: var(--ulk-theme1-bg-primary1);
    --local-bg-primary2: var(--ulk-theme1-bg-primary2);
    --local-fg-accent1: var(--ulk-theme1-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme1-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme1-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme1-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="2"] { /* Industrie */
    --local-bg-primary1: var(--ulk-theme2-bg-primary1);
    --local-bg-primary2: var(--ulk-theme2-bg-primary2);
    --local-fg-accent1: var(--ulk-theme2-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme2-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme2-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme2-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="3"] { /* Pink Lady */
    --local-bg-primary1: var(--ulk-theme3-bg-primary1);
    --local-bg-primary2: var(--ulk-theme3-bg-primary2);
    --local-fg-accent1: var(--ulk-theme3-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme3-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme3-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme3-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="4"] { /* Brique du Nord */
    --local-bg-primary1: var(--ulk-theme4-bg-primary1);
    --local-bg-primary2: var(--ulk-theme4-bg-primary2);
    --local-fg-accent1: var(--ulk-theme4-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme4-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme4-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme4-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="5"] { /* Orangette */
    --local-bg-primary1: var(--ulk-theme5-bg-primary1);
    --local-bg-primary2: var(--ulk-theme5-bg-primary2);
    --local-fg-accent1: var(--ulk-theme5-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme5-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme5-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme5-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="6"] { /* Hypérion */
    --local-bg-primary1: var(--ulk-theme6-bg-primary1);
    --local-bg-primary2: var(--ulk-theme6-bg-primary2);
    --local-fg-accent1: var(--ulk-theme6-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme6-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme6-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme6-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="7"] { /* Océan */
    --local-bg-primary1: var(--ulk-theme7-bg-primary1);
    --local-bg-primary2: var(--ulk-theme7-bg-primary2);
    --local-fg-accent1: var(--ulk-theme7-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme7-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme7-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme7-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="8"] { /* Menthe */
    --local-bg-primary1: var(--ulk-theme8-bg-primary1);
    --local-bg-primary2: var(--ulk-theme8-bg-primary2);
    --local-fg-accent1: var(--ulk-theme8-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme8-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme8-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme8-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="9"] { /* Dune */
    --local-bg-primary1: var(--ulk-theme9-bg-primary1);
    --local-bg-primary2: var(--ulk-theme9-bg-primary2);
    --local-fg-accent1: var(--ulk-theme9-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme9-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme9-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme9-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="10"] { /* Commodore */
    --local-bg-primary1: var(--ulk-theme10-bg-primary1);
    --local-bg-primary2: var(--ulk-theme10-bg-primary2);
    --local-fg-accent1: var(--ulk-theme10-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme10-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme10-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme10-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="11"] { /* Colvert */
    --local-bg-primary1: var(--ulk-theme11-bg-primary1);
    --local-bg-primary2: var(--ulk-theme11-bg-primary2);
    --local-fg-accent1: var(--ulk-theme11-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme11-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme11-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme11-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="12"] { /* Vulcain */
    --local-bg-primary1: var(--ulk-theme12-bg-primary1);
    --local-bg-primary2: var(--ulk-theme12-bg-primary2);
    --local-fg-accent1: var(--ulk-theme12-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme12-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme12-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme12-fg-accent1-darkmode-rgb);
}

html[data-ulk-theme="13"] { /* Orange Sanguine */
    --local-bg-primary1: var(--ulk-theme13-bg-primary1);
    --local-bg-primary2: var(--ulk-theme13-bg-primary2);
    --local-fg-accent1: var(--ulk-theme13-fg-accent1);
    --local-fg-accent1-rgb: var(--ulk-theme13-fg-accent1-rgb);
    --local-fg-accent1-darkmode: var(--ulk-theme13-fg-accent1-darkmode);
    --local-fg-accent1-rgb-darkmode: var(--ulk-theme13-fg-accent1-darkmode-rgb);
}


.cas-theme-picker {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

/* Légende en bloc pleine largeur (float) : évite l'encoche native du fieldset et garde le trait du titre ULK */
.cas-theme-picker > legend {
    float: left;
    width: 100%;
    padding: 0;
}

.cas-theme-picker__list {
    clear: both;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ulk-spacing-xxs, 0.4rem);
    padding: var(--ulk-spacing-xxs, 0.4rem) var(--ulk-spacing-sm, 1.6rem) var(--ulk-spacing-sm, 1.6rem);
}

.cas-theme-option {
    display: flex;
    align-items: center;
    gap: var(--ulk-spacing-xs, 0.8rem);
    padding: var(--ulk-spacing-xxs, 0.4rem) var(--ulk-spacing-xs, 0.8rem);
    border: 2px solid transparent;
    border-radius: var(--ulk-radius-sm, 4px);
    cursor: pointer;
    font-size: 1.5rem;
    white-space: nowrap;
}

.cas-theme-option:hover {
    background-color: rgba(var(--local-fg-accent1-rgb), 0.08);
}

/* Bouton radio natif masqué visuellement mais toujours focusable (flèches du clavier) */
.cas-theme-option__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.cas-theme-option:has(.cas-theme-option__input:checked) {
    border-color: var(--local-fg-neutral1);
    font-weight: 600;
}

.cas-theme-option:has(.cas-theme-option__input:focus-visible) {
    outline: 2px solid var(--local-fg-accent1);
    outline-offset: 2px;
}

.cas-theme-option__swatches {
    display: inline-flex;
    flex-shrink: 0;
}

.cas-theme-option__swatch {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.cas-theme-option__swatch + .cas-theme-option__swatch {
    margin-left: -0.5rem;
}

/* Le menu s'allonge avec les thèmes : défilement si l'écran est trop bas */
.cas-topbar__utilities .dropdown-menu {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

/* Mobile (tiroir du bas, même seuil que le « bottom sheet » ULK) : noms des thèmes masqués visuellement
   mais lus par les lecteurs d'écran, pastilles en grille avec de grandes zones de toucher (56 px min.,
   WCAG 2.5.5 : 44 px). Le thème actif reste signalé par le cadre (pas seulement par la couleur). */
@media screen and (max-width: 576px) {
    .cas-theme-picker__list {
        grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
        gap: var(--ulk-spacing-xs, 0.8rem);
    }

    .cas-theme-option {
        justify-content: center;
        min-height: 5.6rem;
        padding: var(--ulk-spacing-xs, 0.8rem);
        border-color: var(--local-border-color, rgba(0, 0, 0, 0.12));
    }

    .cas-theme-option:has(.cas-theme-option__input:checked) {
        border-width: 3px;
    }

    .cas-theme-option__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .cas-theme-option__swatch {
        width: 2.6rem;
        height: 2.6rem;
    }

    .cas-theme-option__swatch + .cas-theme-option__swatch {
        margin-left: -0.8rem;
    }
}