/*
 * Copyright (c) 2021-2026 Blade Expert SARL. All rights reserved.
 *
 * This file is part of the BladeExpert software and is proprietary and
 * confidential. Unauthorized copying, distribution or modification of this
 * file, via any medium, is strictly prohibited without the prior written
 * consent of Blade Expert SARL.
 */
:root{
    --bxp-blue: hsl(220, 43%, 19%);
    --bxp-green-light: hsl(132, 88%, 83%);
    --bxp-green: hsl(159, 52%, 41%);
    --bxp-beige: hsl(38, 75%, 88%);
    --bxp-peach: hsl(351, 100%, 81%);
    --bxp-turquoise: hsl(181, 75%, 61%);

    --bxp-avatar-main-text-color: var(--bxp-peach);
    --bxp-avatar-main-background-color: var(--bxp-green);
}

*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
*::-webkit-scrollbar-thumb {
    background: var(--bxp-green);
    border-radius: 2px;
}
*::-webkit-scrollbar-track {
    background: var(--bulma-scheme-main-ter);
    border-radius: 2px;
    margin: 0px;
}
*::-webkit-scrollbar-button {
    display: none;
}
*::-webkit-scrollbar-corner {
    background: none;
}


.theme-dark *::-webkit-scrollbar-thumb {
    background: var(--bxp-green-light);
}
.theme-dark *::-webkit-scrollbar-track {
    background: var(--bulma-scheme-main-ter);
}




#main_avatar{
    color: var(--bxp-green);
    border: 1px solid var(--bxp-green);
}
.theme-dark #main_avatar{
    color: var(--bxp-peach);
    background: var(--bxp-blue);
    border: none;
}



[data-theme="dark"],
html.theme-dark{
    /* ============================================================
       COMPOSANTES HSL FONDAMENTALES
       Bulma compose toutes ses couleurs (inputs, boutons, navbar,
       cards, table, message...) avec hsl(scheme-h, scheme-s, *-l).
       En surchargeant ces variables ici, le changement cascade
       automatiquement à tous les composants. Les variantes colorées
       (.is-warning, .is-danger, .is-primary...) continuent de fonctionner :
       elles redéfinissent h/s/l vers leur teinte avec une spécificité
       supérieure à ce bloc.
       ============================================================ */

    /* Teinte / saturation de la palette */
    --bulma-scheme-h:                     220;
    --bulma-scheme-s:                     43%;

    /* Niveaux de lightness (du plus sombre au plus clair) */
    --bulma-scheme-main-l:                14%;  /* fond principal : cards, inputs au repos, boutons */
    --bulma-scheme-main-bis-l:            16%;
    --bulma-scheme-main-ter-l:            19%;
    --bulma-background-l:                 22%;  /* surfaces secondaires (alt rows, etc.) */
    --bulma-border-l:                     28%;
    --bulma-border-weak-l:                22%;

    /* Textes */
    --bulma-text-l:                       70%;
    --bulma-text-strong-l:                90%;
    --bulma-text-weak-l:                  55%;

    /* Schéma invert : Bulma garde cette variable basse (4%) même en dark mode
       car elle sert aux voiles/ombres qui doivent rester sombres dans les deux
       thèmes. Ici on la pousse à 90% en dark pour que les inset-shadows des
       inputs (et autres ombres internes basées sur scheme-invert-l) apparaissent
       comme des highlights clairs visibles sur fond sombre, plutôt que des
       ombres dark-on-dark invisibles.
       Effet de bord : modal-background (qui compose aussi avec scheme-invert-l)
       devient un voile clair -> on le rattrape avec un override ciblé sur .modal
       en dehors de ce bloc. */
    --bulma-scheme-invert-l:              90%;

    /* Body : Bulma utilise scheme-main par défaut, mais on veut un cran plus
       sombre (12%) pour faire ressortir les composants posés dessus */
    --bulma-body-background-color:        hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 12%);

    /* Ombres externes (cards, boxes, dropdowns, modal-card...) teintées en
       --bxp-green-light (hsl 132 88% 83%) en dark mode. Bulma compose
       --bulma-shadow à partir de ces 3 composants H/S/L avec des alphas faibles
       (0.1 et 0.02), donc l'effet est un léger halo verdâtre autour des
       surfaces surélevées plutôt qu'une ombre noire / un glow blanc. */
    --bulma-shadow-h:                     132deg;
    --bulma-shadow-s:                     88%;
    --bulma-shadow-l:                     83%;
}



html.theme-dark .card{
    --bulma-card-header-shadow:0 0.125em 0.25em hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1);
}


html.theme-dark .navbar-dropdown.is-boxed {
    --bulma-navbar-dropdown-boxed-shadow: 0 0.5em 0.5em hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1), 0 0 0 1px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1);
}

/* Backdrop des modales en dark mode : on a poussé scheme-invert-l à 90% pour
   garder des inset-shadows visibles sur les inputs, mais Bulma 1.x s'en sert
   AUSSI pour composer modal-background-background-color, défini directement sur
   `.modal` (pas sur :root) -> impossible à override depuis le bloc thème,
   re-shadowé par la définition locale sur .modal. On la redéfinit ici au même
   niveau de cascade avec une spécificité supérieure pour gagner. */
[data-theme="dark"] .modal,
html.theme-dark .modal {
    --bulma-modal-background-background-color: hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), 4%, 0.7);
}




/* Chevron de dropdown raffiné : currentColor (suit le texte au hover/actif),
   trait fin, légère opacité. Plus de spécificité que la règle Bulma pour gagner
   sans !important. */
.navbar .navbar-link:not(.is-arrowless)::after{
    border-color: currentColor;
    border-width: 1px;
    height: 0.5em;
    width: 0.5em;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

/* Au hover de l'item, le chevron monte en pleine opacité pour confirmer l'action */
.navbar .navbar-item.has-dropdown:hover > .navbar-link:not(.is-arrowless)::after,
.navbar .navbar-link:not(.is-arrowless):hover::after{
    opacity: 1;
}


/* === Navbar principale (main-header) ============================
   Titres de menu de premier niveau : couleur légère au repos,
   couleur de texte forte au hover, sans fond.
   - Light mode : gris au repos -> couleur texte par défaut au survol
   - Dark  mode : beige au repos -> couleur texte par défaut au survol
   On ne cible que .navbar-start pour ne pas toucher la zone .navbar-end
   (avatar, recherche, dropdown utilisateur).
   ================================================================ */
.navbar .navbar-start > .navbar-item,
.navbar .navbar-start > .navbar-item.has-dropdown > .navbar-link {
    color: var(--bulma-grey);
    background-color: transparent;
    transition: color 0.15s ease;
}

/* Suppression du fond au hover/focus et lorsqu'un dropdown est ouvert */
.navbar .navbar-brand > a.navbar-item:hover,
.navbar .navbar-start > a.navbar-item:hover,
.navbar .navbar-start > a.navbar-item:focus,
.navbar .navbar-start > .navbar-item.has-dropdown:hover > .navbar-link,
.navbar .navbar-start > .navbar-item.has-dropdown.is-active > .navbar-link,
.navbar .navbar-start > .navbar-item.has-dropdown > .navbar-link:hover,
.navbar .navbar-start > .navbar-item.has-dropdown > .navbar-link:focus {
    background-color: transparent;
    color: var(--bulma-text);
    scale: 1.02;
}

/* Pont invisible entre la pastille avatar (étroite, 2.5rem) et son dropdown :
   évite que le menu se ferme quand la souris transite en diagonale du
   déclencheur vers les items. Ciblé via :has() pour ne s'appliquer qu'au
   dropdown utilisateur (celui avec .navbar-link.is-arrowless). */
.navbar .navbar-item.has-dropdown.is-hoverable:has(> .navbar-link.is-arrowless) > .navbar-dropdown::before {
    content: "";
    position: absolute;
    top: -2rem;
    left: 0;
    right: 0;
    height: 2rem;
}


@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}





/* Par défaut : light visible, dark caché */
.logo-dark { display: none; }
.logo-light { display: inline; }

/* En dark mode : inverse */
.theme-dark .logo-dark { display: inline; }
.theme-dark .logo-light { display: none; }





.ui-autocomplete {
    max-height: 300px!important;
    overflow-y: auto!important;
    overflow-x: hidden!important;
    background: var(--bulma-background)!important;
    color:var(--bulma-text)!important;
    border: var(--bulma-border)!important;
}
.ui-autocomplete .ui-menu-item:nth-child(even){
    background: var(--bulma-background-active);
}

/*Retrait des fleches sur input number*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*Fait pour mettre un background hachuré*/
.hatch-1 {
    --hatch-color: var(--bulma-danger-light);
    --hatch-thickness: 2px;
    --hatch-gap: 12px;
    background: var(--bulma-background);
    background-image:
            repeating-linear-gradient(
                    -45deg,
                    var(--hatch-color) 0px,
                    var(--hatch-color) var(--hatch-thickness),
                    transparent var(--hatch-thickness),
                    transparent calc(var(--hatch-thickness) + var(--hatch-gap))
            );
}

.theme-dark .hatch-1 {
    --hatch-color: var(--bulma-danger-light-invert);
}


/* GESTION DES MODAL DRAGABLE */
.modal.is-draggable.is-active {
    display: block !important; /* Override le display: flex de Bulma */
}

.modal.is-draggable .modal-card {
    margin: unset;
    box-shadow: var(--bulma-shadow);
    overflow: hidden;
}

.modal.is-draggable .modal-card-head{
    cursor: move;
}

.is-draggable .modal-background{
    background-color: unset;
}

.theme-dark input[type="date"]::-webkit-calendar-picker-indicator, .theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-color: var(--bulma-link); /* Couleur de fond */
    border-radius: 30%; /* Rond */
    padding: 5px;
}

.cl-virt-additional-toggle-button-class{
    --bulma-input-h: var(--bulma-scheme-h);
    --bulma-input-s: var(--bulma-scheme-s);
    --bulma-input-l: var(--bulma-scheme-main-l);
    --bulma-input-border-style: solid;
    --bulma-input-border-width: var(--bulma-control-border-width);
    --bulma-input-border-l: var(--bulma-border-l);
    --bulma-input-border-l-delta: 0%;
    --bulma-input-border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
    --bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
    --bulma-input-active-border-l-delta: var(--bulma-active-border-l-delta);
    --bulma-input-focus-h: var(--bulma-focus-h);
    --bulma-input-focus-s: var(--bulma-focus-s);
    --bulma-input-focus-l: var(--bulma-focus-l);
    --bulma-input-focus-shadow-size: var(--bulma-focus-shadow-size);
    --bulma-input-focus-shadow-alpha: var(--bulma-focus-shadow-alpha);
    --bulma-input-color-l: var(--bulma-text-strong-l);
    --bulma-input-background-l: var(--bulma-scheme-main-l);
    --bulma-input-background-l-delta: 0%;
    --bulma-input-height: var(--bulma-control-height);
    --bulma-input-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05);
    --bulma-input-placeholder-color: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.3);
    --bulma-input-disabled-color: var(--bulma-text-weak);
    --bulma-input-disabled-background-color: var(--bulma-background);
    --bulma-input-disabled-border-color: var(--bulma-background);
    --bulma-input-disabled-placeholder-color: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-weak-l), 0.3);
    --bulma-input-arrow: var(--bulma-link);
    --bulma-input-icon-color: var(--bulma-text-light);
    --bulma-input-icon-hover-color: var(--bulma-text-weak);
    --bulma-input-icon-focus-color: var(--bulma-link);
    --bulma-input-radius: var(--bulma-radius);

    border-color: var(--bulma-input-border-color) !important;
    border-style: solid !important;
    border-width: var(--bulma-control-border-width) !important;
    border-radius: var(--bulma-control-radius) !important;
    font-size: var(--bulma-size-normal)!important;
    background-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-background-l) + var(--bulma-input-background-l-delta))) !important;
    color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l)) !important;
    height: var(--bulma-control-height) !important;
    line-height: var(--bulma-control-line-height) !important;
}
.cl-virt-additional-toggle-button-class.is-warning{
    --bulma-input-h: var(--bulma-warning-h);
    --bulma-input-s: var(--bulma-warning-s);
    --bulma-input-l: var(--bulma-warning-l);
    --bulma-input-focus-h: var(--bulma-warning-h);
    --bulma-input-focus-s: var(--bulma-warning-s);
    --bulma-input-focus-l: var(--bulma-warning-l);
    --bulma-input-border-l: var(--bulma-warning-l);
    --bulma-arrow-color: var(--bulma-warning);

    border-color: var(--bulma-input-border-color) !important;
    background-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-background-l) + var(--bulma-input-background-l-delta))) !important;
    color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l)) !important;
}

.cl-virt-additional-toggle-button-class.is-small{
    font-size: var(--bulma-size-small)!important;
}
.cl-virt-additional-dropbox-class{
    --bulma-input-h: var(--bulma-scheme-h);
    --bulma-input-s: var(--bulma-scheme-s);
    --bulma-input-l: var(--bulma-scheme-main-l);
    --bulma-input-color-l: var(--bulma-text-strong-l);
    --bulma-navbar-dropdown-background-color: var(--bulma-scheme-main);
    background: var(--bulma-navbar-dropdown-background-color)!important;
    color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l)) !important;
}
.theme-dark .vscomp-option.focused {
    background: #232323!important;
}
.theme-dark .vscomp-option.selected {
    background: #232323!important;
}

.vscomp-arrow::after{
    border: .125em solid var(--bulma-arrow-color) !important;
    border-right: 0 !important;
    border-top: 0 !important;
    height: .625em !important;
    width: .625em !important;
    position: absolute!important;
    top: 50%!important;
    transform: rotate(-45deg)!important;
    transform-origin: center!important;
}




.bgImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/login.jpg");
    background-size: cover;
}

.theme-dark .bgImage {
    opacity: 0.5;
}

.has-background-light-auto{
    background-color: var(--bulma-scheme-main-ter);
}

.theme-dark .has-background-light-auto{
    background-color: var(--bulma-scheme-main-ter);
}

.has-background-success-light-auto{
    background-color: var(--bulma-success-light) !important;
}

.theme-dark .has-background-success-light-auto{
    background-color: var(--bulma-success-dark) !important;
}

.has-background-link-light-auto{
    background-color: var(--bulma-link-light) !important;
}

.theme-dark .has-background-link-light-auto{
    background-color: var(--bulma-link-dark) !important;
}

.has-background-primary-light-auto{
    background-color: var(--bulma-primary-light) !important;
}

.theme-dark .has-background-primary-light-auto{
    background-color: var(--bulma-primary-dark) !important;
}

.has-background-info-light-auto{
    background-color: var(--bulma-info-light) !important;
}

.theme-dark .has-background-info-light-auto{
    background-color: var(--bulma-info-dark) !important;
}


.has-background-danger-light-auto{
    background-color: var(--bulma-danger-light) !important;
}

.theme-dark .has-background-danger-light-auto{
    background-color: var(--bulma-danger-dark) !important;
}

.has-background-warning-light-auto{
    background-color: var(--bulma-warning-light) !important;
}

.theme-dark .has-background-warning-light-auto{
    background-color: var(--bulma-warning-dark) !important;
}



.has-text-dark-auto{
    color: hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l)) !important;
}

.theme-dark .has-text-dark-auto{
    color: hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-invert-l)) !important;
}

.has-text-link-auto{
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-light-l)) !important;
}

.theme-dark .has-text-link-auto{
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-dark-l)) !important;
}

@keyframes ping {
    75%,
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}


#dark-toogle {
    --cl-size: 200px;
    --cl-height: var(--cl-size);
    --cl-width: calc(var(--cl-size) * 2.2);
    height: var(--cl-size);
    width: var(--cl-width);
    position: relative;
    display: inline-block;
    background: #ebebeb;
    border-radius: var(--cl-size);
    box-shadow: inset 0px calc(var(--cl-size) / 40) calc(var(--cl-size) / 13.3) rgba(0, 0, 0, 0.4),
    inset 0px calc(-1 * var(--cl-size) / 40) calc(var(--cl-size) / 13.3) rgba(255, 255, 255, 0.4);
    transition: 0.2s;
}

label:has(> #dark-toogle) {
    cursor: pointer;
}

#dark-toogle:after {
    content: "";
    width: calc(var(--cl-size) * 0.84);
    height: calc(var(--cl-size) * 0.84);
    position: absolute;
    top: calc(var(--cl-size) * 0.08);
    left: calc(var(--cl-size) * 0.08);
    border-radius: calc(var(--cl-size) * 0.9);
    background: linear-gradient(180deg, #ffcc89, #d8860b);
    box-shadow: 0px calc(var(--cl-size) / 40) calc(var(--cl-size) / 20) rgba(0, 0, 0, 0.2);
    transition: 0.2s;

}
#dark-toogle input {
    width: 0;
    height: 0;
    visibility: hidden;
}

#dark-toogle:has(input:checked) {
    background: #242424;
}

#dark-toogle:has(input:checked):after {
    left: calc(var(--cl-width) - var(--cl-size) * 0.08);
    transform: translateX(-100%);
    background: linear-gradient(180deg, #777, #3a3a3a);
}

#dark-toogle:active:after {
    width: calc(var(--cl-size) * 1.25);
}

#dark-toogle svg {
    position: absolute;
    width: calc(var(--cl-size) * 0.7);
    top: calc(var(--cl-size) * 0.15);
    z-index: 100;
}

#dark-toogle svg.sun {
    left: calc(var(--cl-size) * 0.15);
    fill: #fff;
    transition: 0.5s;
}

#dark-toogle svg.moon {
    left: calc(var(--cl-width) - var(--cl-size) * 0.15);
    transform: translateX(-100%);
    fill: #7e7e7e;
    transition: 0.5s;
}

#dark-toogle:has(input:checked) svg.sun {
    fill: #7e7e7e;
}

#dark-toogle:has(input:checked) svg.moon {
    fill: #fff;
}

.cl-spin-5s {
    -webkit-animation: fa-spin 5s infinite linear;
    animation: fa-spin 5s infinite linear;
}

.cl-sticky {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Page « application » : la racine du contenu remplit la hauteur laissée par le menu, et le
   défilement se fait à l'intérieur (tableaux, panneaux) plutôt que sur la fenêtre. Repose sur
   le min-height:0 de la <section> de main-layout. Tout conteneur flex intermédiaire doit
   relayer min-height:0, sinon la contrainte de hauteur s'arrête à cet étage. */
.cl-page-fill {
    height: 100%;
    min-height: 0;
}

.cl-fieldset {
    border-radius: 4px;
    /*color: #4a4a4a;*/
    display: block;
    padding: 5px 3px 2px 5px;
    border: 1px solid #dcdcdc;
}

.cl-fieldset > legend {
    display: block;
    padding: 0 5px;
    width: max-content;
    border: 0 none
}

.cl-table-hover {
    border-collapse: collapse;
}

.cl-table-hover tbody tr:hover {
    border-top: 2px dotted hsl(0, 0%, 71%);
    border-bottom: 2px dotted hsl(0, 0%, 71%);
    border-left: 2px dotted hsl(0, 0%, 71%);
    border-right: 2px dotted hsl(0, 0%, 71%);

}

.table td,
.table th{
    vertical-align: middle;
}

/* Colonnes "actions" collantes : fond opaque sur les boutons is-outlined
   pour qu'ils ne laissent pas voir les données de la ligne qui défile derrière.
   La règle reste moins prioritaire que le :hover de Bulma, donc le survol est préservé. */
td[style*="sticky"] .button.is-outlined {
    background-color: var(--bulma-scheme-main);
}

body {
    font-family: 'Roboto', sans-serif;
}

html, body {
    height: 100%;
}

img.is-clickable.is-scalable:hover {
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

a[disabled] {
    opacity: 0.8;
    cursor: not-allowed;
    pointer-events: none!important;
}

.drop-zone {
    width: 200px;
    height: 128px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    color: #cccccc;
    border: 4px dashed #cccccc;
    border-radius: 10px;
}

.drop-zone--over {
    border-color: hsl(217, 71%, 53%);
    border-style: solid;
}

.drop-zone__input {
    display: none;
}

.drop-zone__thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
    background-size: cover;
    position: relative;
}

.drop-zone__thumb::after {
    content: attr(data-label);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
}

.simple-drop-zone {
    display: flex;
    align-items: center;
}

.simple-drop-zone__input {
    display: none;
}

.simple-drop-zone__thumb {
    width: 5%;
    height: 4%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
    background-size: cover;
    position: absolute;
}

.logo-loader .logo-loader-g1,
.logo-loader .logo-loader-g2,
.logo-loader .logo-loader-g3,
.logo-loader .logo-loader-g4 {
    transform-box: fill-box;
    transform-origin: center;

}
/* Vitesses différentes */
.logo-loader .logo-loader-g1 {
    animation: spin 6s linear infinite;
    animation-play-state: paused;
}
.logo-loader .logo-loader-g2 {
    animation: spin 4s linear infinite;
    animation-play-state: paused;
}
.logo-loader .logo-loader-g3 {
    animation: spin 2s linear infinite;
    animation-play-state: paused;
}
.logo-loader .logo-loader-g4 {
    animation: spin 3s linear infinite;
    animation-play-state: paused;
}

/* Animation rotation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.logo-loader {
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 0.75rem;
    min-width: 10px;
    min-height: 10px;
    background: var(--bulma-scheme-main);
    opacity: 0.9;
    display: none;
    z-index: 10000;
    overflow: hidden;
}

.logo-loader svg {
    width: 80%;
    height: 80%;
    opacity: 1;
    max-width: 120px;
    max-height: 120px;
    fill:var(--bxp-green);
}

.logo-loader .loader-message{
    color: var(--bxp-blue);
}

.theme-dark .logo-loader .loader-message{
    color: var(--bxp-green-light);
}

.theme-dark .logo-loader svg {
    fill:var(--bxp-green-light);
}

.logo-loader.is-active,
.htmx-request .logo-loader,
.htmx-request.logo-loader{
    display: flex;
}

.logo-loader.is-active svg g,
.htmx-request .logo-loader svg g,
.htmx-request.logo-loader svg g{
    animation-play-state: running;
}

.modal-card {
    clip-path: inset(0 round var(--bulma-radius-large));
}

/* Bulma fait scroller le seul .modal-card-body par une chaîne flex : .modal-card
   est un flex column borné en hauteur, le body y est le seul item extensible et
   porte overflow:auto. Un <form> englobant head/body/foot (patron courant ici,
   le bouton submit vivant dans le pied) casse cette chaîne : le form devient
   l'unique item flex, prend la hauteur de son contenu, et le body n'a plus de
   quoi se borner -> c'est la modale entière qui scrolle. On rend donc le form
   transparent au flex. min-height:0 est indispensable : par défaut un item flex
   ne descend pas sous la hauteur de son contenu. */
.modal-card > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}


/*Rotor Loader : the parent element must be relative and have an overflow hidden*/
.rotor-loader {
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    row-gap: 0.75rem;
    width: 100%;
    height: 100%;
    min-width: 10px;
    min-height: 10px;
    background: var(--bulma-scheme-main);
    opacity: 0.9;
    display: none;
    z-index: 1000;
    overflow: hidden;
}

.rotor-loader::after {
    content: "";
    width: 80%;
    height: 80%;
    opacity: 1;
    max-width: 100px;
    max-height: 100px;
    background-image: url("../img/BladeExpertRotor200-centered-exactly.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: rotate 1.5s infinite linear;
    animation-play-state: paused;
    filter: drop-shadow(10px 10px 7px #fff);
}

.rotor-loader.is-active {
    display: flex;
}

.rotor-loader.is-active::after {
    animation-play-state: running;
}

.htmx-request .rotor-loader{
    display: flex;
}
.htmx-request.rotor-loader{
    display: flex;
}

.htmx-request .rotor-loader::after{
    animation-play-state: running;
}
.htmx-request.rotor-loader::after{
    animation-play-state: running;
}


.flat-loader{
    display:none;
}
.htmx-request.flat-loader,
.flat-loader.is-active{
    display:block;
}


/* HTML: <div class="dot-loader"></div> */
.dot-loader {
    margin: 1rem auto;
    height: 30px;
    aspect-ratio: 2.5;
    --_g: no-repeat radial-gradient(circle closest-side,var(--bxp-green) 90%,#0000);
    background:var(--_g), var(--_g), var(--_g), var(--_g);
    background-size: 20% 50%;
    animation: l43 .7s infinite linear;
    display:none;
    animation-play-state: paused;
}
@keyframes l43 {
    0%     {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    16.67% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    33.33% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    50%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
    66.67% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
    83.33% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
    100%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
}

.dot-loader.is-active,
.htmx-request.dot-loader{
    display:block;
    animation-play-state: running;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
        filter: drop-shadow(10px 10px 7px rgba(0, 0, 0, 0.7));
    }
    25% {
        transform: rotate(90deg);
        filter: drop-shadow(10px -10px 7px rgba(0, 0, 0, 0.7));
    }
    50% {
        transform: rotate(180deg);
        filter: drop-shadow(-10px -10px 7px rgba(0, 0, 0, 0.7));
    }
    75% {
        transform: rotate(270deg);
        filter: drop-shadow(-10px 10px 7px rgba(0, 0, 0, 0.7));
    }
    to {
        transform: rotate(360deg);
        filter: drop-shadow(10px 10px 7px rgba(0, 0, 0, 0.7));
    }
}

.py-0\.5 {
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
}

.px-0\.5 {
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
}

.p-0\.5 {
    padding: 0.125rem !important;
}

.my-0\.5 {
    margin-top: 0.125rem !important;
    margin-bottom: 0.125rem !important;
}

.mx-0\.5 {
    margin-left: 0.125rem !important;
    margin-right: 0.125rem !important;
}

.m-0\.5 {
    margin: 0.125rem !important;
}

.is-striked {
    text-decoration: line-through;
}

.clickable-icon{
    border: 1px dashed transparent;
    border-radius: var(--bulma-radius);
}
.clickable-icon:hover{
    border-color: currentColor;
}

.clickable-icon.icon:hover,
.clickable-icon:hover .icon{
    scale: 1.1;
}

.clickable-icon.has-text-light-auto:hover {
    color: inherit!important;
}
.clickable-icon.has-text-light-auto.is-danger:hover {
    color: var(--bulma-danger)!important;
}
.clickable-icon.has-text-light-auto.is-warning:hover {
    color: var(--bulma-warning)!important;
}
.clickable-icon.has-text-light-auto.is-link:hover {
    color: var(--bulma-link)!important;
}

.has-text-light-auto{
    color:var(--bulma-grey-lighter)!important;
}

.theme-dark .has-text-light-auto{
    color:var(--bulma-grey-dark)!important;
}

.trb-card-serial{
    fill: var(--bulma-grey-dark)!important;
}

.theme-dark .trb-card-serial{
    fill: var(--bulma-grey-light)!important;
}

.trb-card-tower, .trb-card-hub {
    fill: var(--bulma-grey-lighter)!important;
}

.theme-dark .trb-card-tower, .theme-dark .trb-card-hub {
    fill: var(--bulma-grey-darker)!important;
}

/* Module tour (feature.tower) : la tour cesse d'être un décor et devient un composant, comme une
   pale — couleur de gravité et clic vers ses défauts.

   Classe DISTINCTE de .trb-card-tower, et jamais les deux ensemble : le fill !important de
   celle-ci l'emporterait sur la couleur posée en ligne, quelle que soit la spécificité. Module
   off, le gabarit ne pose que .trb-card-tower et rien de tout ceci n'existe.

   Aucun fill ici : la couleur vient TOUJOURS du style en ligne, gravité réelle ou « #AAA » de la
   pale saine. En poser un ne servirait qu'à masquer un jour un champ oublié.
   stroke-width est ici et non en attribut SVG comme sur les pales, pour ne rien ajouter au
   gabarit quand le module est absent. */
.trb-card-tower-component{
    stroke-width: 1rem;
}

.trb-card-link:hover{
    transform: scale(1.05);
}

.trb-card:has(.trb-card-link:hover){
    background: var(--bulma-link-light);
}

.theme-dark .trb-card:has(.trb-card-link:hover){
    background: var(--bulma-link-dark);
}

/* COMPOSANT ABSENT — pale non montée, et rien d'autre à ce jour.
   Il reprend la couleur du MOYEU : un composant qui n'existe pas ne doit pas se lire comme un
   composant sain, or le #AAA de la gravité la plus basse est justement celui d'une pale saine.
   !important : le gabarit pose la couleur de gravité en ligne sur chaque pale, sans exception.

   La tour, elle, n'a pas besoin de cette classe : sans tour, son dessin garde .trb-card-tower, qui
   porte déjà exactement ces deux couleurs. */
.trb-card-clickable-element.disabled{
    pointer-events: none;
    fill: var(--bulma-grey-lighter)!important;
}

.theme-dark .trb-card-clickable-element.disabled{
    fill: var(--bulma-grey-darker)!important;
}

/* L'ÉTIQUETTE d'un composant absent — le mot « missing » à la place du numéro de série : estompée,
   pas effacée. C'est la seule chose qui reste à lire sur une pale non montée ; sa position, elle,
   n'est plus affichée du tout.

   Un gris médian, le même dans les deux thèmes, et c'est voulu : il se lit sur le fond de la
   vignette, clair ou sombre, un cran en dessous du texte normal. Deux tons auraient rendu l'un des
   deux cas plus contrasté que le texte qu'il est censé estomper.

   !important, et un doublon .theme-dark : la couleur d'origine vient de .trb-card-serial, dont la
   variante sombre est PLUS SPÉCIFIQUE que cette règle-ci. Sans le doublon, le mot resterait vif en
   thème sombre — et seulement là. */
.trb-card-missing-label{
    fill: var(--bulma-grey)!important;
}

.theme-dark .trb-card-missing-label{
    fill: var(--bulma-grey)!important;
}

.trb-card-clickable-element{
    transition: all 0.1s ease;
    stroke: transparent;
    cursor: pointer;
}

.trb-card-clickable-element:hover{
    stroke: var(--bulma-link);
}

.theme-dark .flexslider{
    background: var(--bulma-scheme-main) !important;
    border: 4px solid var(--bulma-border)!important;
}

.theme-dark .flex-control-paging li a {
    background: var(--bulma-scheme-main-ter) !important;
}

.theme-dark .flex-control-paging li a:hover {
    background: var(--bxp-green-light) !important;
}


/* Tables du framework : champs transparents (fond + bordure + ombre) pour laisser
   passer le striping/hover du tableau. L'état "non sauvé" (.is-warning) conserve sa
   bordure jaune visible. */
.framework-table input:not(.is-warning),
.framework-table textarea:not(.is-warning),
.framework-table .select:not(.is-warning) select {
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.framework-table td{
    padding: 0;
}

/* Le popup d'options reprend un fond solide (option ET label d'optgroup : sans style
   explicite, le label d'optgroup reste clair/illisible en dark mode). */
.framework-table select option,
.framework-table select optgroup {
    background-color: var(--bulma-scheme-main);
    color: var(--bulma-text);
}

/* Selects natifs en dark mode (notamment les selecteurs de pays a optgroups) :
   color-scheme demande au navigateur de rendre le menu deroulant - options ET
   labels d'<optgroup> - avec ses couleurs sombres. Sans cela, les labels
   d'optgroup s'affichent sur une bande blanche illisible. */
[data-theme="dark"] select,
html.theme-dark select {
    color-scheme: dark;
}

/* ================================================================
   TRI DES GALERIES DE PHOTOS PAR GLISSER-DÉPOSER (js/pictureSortable.js)

   Ici et non dans expertise.css : les modales de trous de drainage et de LPS embarquent la même
   galerie et s'ouvrent depuis des pages qui ne chargent pas expertise.css.
   ================================================================ */

/* Emplacement de dépôt. En mode fantôme maison (forceFallback), la vignette d'origine RESTE dans
   la liste et sert de repère : SortableJS lui pose ghostClass — et aussi chosenClass, qu'on se
   garde donc bien d'estomper ici. On la vide visuellement pour en faire un cadre d'accueil, seul
   repère fiable de l'endroit où la photo va tomber. Le contenu est masqué en visibility (et non
   en display) pour que le cadre garde exactement la taille de la vignette. */
.bxp-pic-ghost {
    background: var(--bulma-link-light) !important;
    outline: 2px dashed var(--bulma-link);
    outline-offset: -2px;
    border-radius: var(--bulma-radius);
}

.bxp-pic-ghost > * {
    visibility: hidden;
}

/* Fantôme qui suit le curseur, cloné sur <body>. SortableJS lui applique déjà position:fixed,
   z-index:100000 et pointer-events:none ; on n'ajoute que l'habillage. */
.bxp-pic-dragging {
    opacity: 0.9;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    border-radius: var(--bulma-radius);
}

/* NEUTRALISATION DES ÉVÉNEMENTS DANS LE FANTÔME — indispensable, pas cosmétique.
 *
 * Le fantôme est un clone PROFOND de la vignette et SortableJS ne pose pointer-events:none que
 * sur sa racine. Or chaque vignette contient des .pic-action qui réactivent les événements pour
 * eux-mêmes (expertise.css et style inline dans les trois templates) : ces déclarations sont
 * clonées telles quelles.
 *
 * En mode fantôme maison, SortableJS cherche la cible de dépôt avec document.elementFromPoint()
 * puis remonte la chaîne des ancêtres jusqu'à un conteneur triable. Le fantôme étant collé sous
 * le curseur, elementFromPoint renvoyait un bouton du CLONE, dont les ancêtres mènent à <body> et
 * jamais à la galerie : aucune cible n'était trouvée et l'emplacement de dépôt ne bougeait pas.
 *
 * !important est nécessaire pour l'emporter sur les pointer-events:auto écrits en style inline
 * (une déclaration !important d'une feuille de style prime sur une déclaration inline normale). */
.bxp-pic-dragging,
.bxp-pic-dragging * {
    pointer-events: none !important;
}

/* Le curseur doit annoncer le déplacement pendant tout le glissé. Il est porté par <body> et non
   par le fantôme : celui-ci ne reçoit plus d'événements, c'est donc l'élément SITUÉ DESSOUS qui
   décide du curseur — et les vignettes portent .is-clickable (cursor: pointer !important). */
body.bxp-pic-sorting,
body.bxp-pic-sorting * {
    cursor: grabbing !important;
}

/* ================================================================
   ONGLET "REPORTS" DE LA PAGE PARC (templates/windfarm/reportsContent.html)
   ================================================================ */

/* PASTILLES COLORÉES EN THÈME SOMBRE — CORRECTION VOLONTAIREMENT LOCALE.

   Les classes has-background-<couleur>-light-auto pointent en thème sombre vers var(--bulma-X-dark),
   c'est-à-dire le palier 10 de Bulma, soit 8 % de luminosité. Or le fond de ce tableau est à 14 % :
   la pastille est donc PLUS SOMBRE que ce sur quoi elle est posée, et à 8 % sa teinte ne se
   distingue plus du noir. Elle ne se lit pas comme un badge.

   On remonte au palier 30 (28 %), pour le seul tableau des rapports : 14 points au-dessus du fond,
   teinte franchement visible, et le texte de has-text-dark-auto (90 % en sombre) garde tout son
   contraste dessus.

   NE PAS GÉNÉRALISER. Le résultat est bon ici, mais porter la même correction sur les classes
   elles-mêmes toucherait 64 emplois dans 19 gabarits, dont aucun n'a été regardé sous cet angle.
   Cet écran est donc sciemment en avance sur le reste de l'application : c'est un choix, pas un
   essai en attente. Étendre la règle passe par l'ajout d'un autre sélecteur ici, écran par écran.

   DEUX ÉCRANS À CE JOUR : le tableau de l'onglet Reports du parc (#wfm_reports_table) et les deux
   pastilles de l'en-tête des pages d'édition de rapport (.report-header-tag), qui sont posées sur
   le même fond sombre et souffraient du même effacement.

   Le sélecteur doit battre les règles d'origine (style.css, section has-background-*-light-auto),
   qui portent !important : il faut à la fois plus de spécificité et un !important à son tour. D'où
   l'id pour le tableau, et pour l'en-tête les deux classes accolées sous html.theme-dark.

   Cinq couleurs pour le tableau, et pas seulement les trois états : les pastilles d'avancement
   d'une génération en série (itemBadge) sont rendues DANS ces mêmes cellules et utilisent link et
   danger. En traiter une partie ferait cohabiter deux profondeurs de fond dans une même case.
   L'en-tête de l'éditeur, lui, n'a que quatre couleurs possibles — link n'y apparaît jamais.

   has-background-light-auto (« not created », « queued ») n'est PAS repris : ce gris neutre est
   déjà au bon niveau, c'est le seul qui ressortait correctement. */
html.theme-dark #wfm_reports_table .has-background-success-light-auto,
html.theme-dark .report-header-tag.has-background-success-light-auto {
    background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-30-l)) !important;
}

html.theme-dark #wfm_reports_table .has-background-info-light-auto,
html.theme-dark .report-header-tag.has-background-info-light-auto {
    background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-30-l)) !important;
}

html.theme-dark #wfm_reports_table .has-background-warning-light-auto,
html.theme-dark .report-header-tag.has-background-warning-light-auto {
    background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-30-l)) !important;
}

html.theme-dark #wfm_reports_table .has-background-danger-light-auto,
html.theme-dark .report-header-tag.has-background-danger-light-auto {
    background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-30-l)) !important;
}

html.theme-dark #wfm_reports_table .has-background-link-light-auto {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-30-l)) !important;
}

/* ================================================================
   NOTIFICATIONS — page /notifications, dropdown du header, modale
   ================================================================

   PRINCIPE : la couleur dit le NIVEAU, jamais la surface.

   Le fond reste celui du thème (.card et .modal-card portent déjà les bonnes
   variables Bulma) ; le niveau est porté par un filet vertical de 4 px et une
   icône. Plus aucun bandeau plein : empiler des bandes saturées dans une liste
   se lit mal, et surtout les classes Bulma -light ne suivent pas le thème —
   en sombre, les corps de carte restaient des blocs pastel sur fond marine.

   Trois teintes, reprises telles quelles de la palette Bulma du site :
     info    (niveau 0)  --bulma-info     — « un rapport est disponible »
     caution (niveau 10) --bulma-warning  — « une action vous attend »
     warning (niveau 20) --bulma-danger   — « quelque chose ne va pas »

   Aucune surcharge par thème ici : ces trois variables Bulma ont la même valeur
   en clair et en sombre, et elles tiennent dans les deux cas parce qu'elles ne
   servent qu'en filet de 4 px et en icône pleine, jamais en texte. Bulma fournit
   aussi des variantes --bulma-X-on-scheme, contrastées pour le fond courant ;
   elles sont plus foncées en thème clair, mais -warning-on-scheme y vire au brun
   (42deg à 23 % de luminosité) et perd la lecture « ambre ». D'où le choix des
   variables nues.

   Elles ne sont indirectées qu'ICI. La pastille de l'avatar, les lignes du
   dropdown, les cartes de la page et la modale lisent les mêmes --bxp-notif-* :
   changer une teinte se fait en un seul endroit.

   Le niveau se pose avec .notif-info / .notif-caution / .notif-warning, qui ne
   font que renseigner --bxp-notif-accent. Tout le reste (filet, icône, survol
   de Delete) lit cette variable, donc les trois classes suffisent, sur la carte
   comme sur la modale ou la ligne de dropdown.
   ================================================================ */

:root {
    --bxp-notif-info: var(--bulma-info);
    --bxp-notif-caution: var(--bulma-warning);
    --bxp-notif-warning: var(--bulma-danger);
}

.notif-info    { --bxp-notif-accent: var(--bxp-notif-info); }
.notif-caution { --bxp-notif-accent: var(--bxp-notif-caution); }
.notif-warning { --bxp-notif-accent: var(--bxp-notif-warning); }

/* Lue : le filet et l'icône retombent au gris de bordure du thème. La carte
   reste lisible, elle cesse simplement de réclamer l'attention. */
.notif-card.notif-read { --bxp-notif-accent: var(--bulma-border); }


/* ---------- Carte de la page /notifications ---------- */

.notif-card {
    border-left: 4px solid var(--bxp-notif-accent);
}

.notif-card-header {
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.75rem;
    box-shadow: none;                       /* Bulma pose une ombre sous .card-header */
    border-bottom: 1px solid var(--bulma-border-weak);
}

/* Une carte sans corps ni pied n'a pas de séparateur à tracer. */
.notif-card-header:last-child {
    border-bottom: none;
}

.notif-icon {
    flex: 0 0 auto;
    color: var(--bxp-notif-accent);
}

.notif-title {
    flex: 1 1 auto;
    min-width: 0;                           /* sans quoi un titre long pousse la croix hors de la carte */
    padding: 0.6rem 0;
    font-weight: 600;
    color: var(--bulma-text-strong);
}

.notif-card.notif-read .notif-title {
    font-weight: 400;
    color: var(--bulma-text);
}

.notif-date {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--bulma-text-weak);
}

.notif-body {
    padding: 0.9rem 1rem;
    color: var(--bulma-text);
}

/* Le corps arrive en HTML libre (diffusion depuis l'app de management) : on ne
   maîtrise ni les listes ni les liens qu'il contient, d'où le passage par
   .content côté gabarit et ce simple rappel de couleur pour les liens. */
.notif-body a,
.notif-modal .modal-message a {
    color: var(--bxp-notif-accent);
    text-decoration: underline;
}

.notif-footer {
    border-top: 1px solid var(--bulma-border-weak);
}

.notif-footer .card-footer-item {
    padding: 0.45rem;
    font-size: 0.875rem;
    color: var(--bulma-text-weak);
    border-color: var(--bulma-border-weak);
    transition: color 0.12s ease, background-color 0.12s ease;
}

.notif-footer .card-footer-item:hover {
    color: var(--bulma-text-strong);
    background-color: var(--bulma-scheme-main-ter);
}

.notif-footer .notif-action-delete:hover {
    color: var(--bxp-notif-warning);
}

/* La croix d'en-tête ne doit pas peser autant qu'une action : discrète au
   repos, franche au survol. */
.notif-card-header .delete,
.notif-drop-item .delete {
    opacity: 0.45;
    transition: opacity 0.12s ease;
}

.notif-card-header .delete:hover,
.notif-drop-item .delete:hover {
    opacity: 1;
}


/* ---------- Lignes du dropdown de l'avatar ---------- */

.notif-drop-item {
    position: relative;
    margin: 0 0.5rem;
    padding-right: 2rem;                    /* place pour la croix posée en absolu */
    border-left: 3px solid var(--bxp-notif-accent);
    border-radius: 4px;
    background-color: var(--bulma-scheme-main-ter);
}

.notif-drop-item:hover {
    background-color: var(--bulma-border-weak);
}

/* L'icône est posée entre le filet et le texte, centrée verticalement sur la
   ligne. Hors du flux : le titre et la date ne sont pas dans le même élément
   (le titre est dans l'ancre, la date est en absolu sous elle), et les décaler
   d'un seul retrait partagé est le seul moyen de les garder alignés. */
.notif-drop-icon {
    position: absolute;
    top: 50%;
    left: 0.55rem;
    transform: translateY(-50%);
}

.notif-drop-item .notification-item,
.notif-drop-item .notif-date {
    padding-left: 2rem;
}

.notif-drop-item .notification-item {
    color: var(--bulma-text-strong);
}

.notif-drop-item .notif-date {
    color: var(--bulma-text-weak);
}


/* ---------- Pastille de l'avatar ---------- */

.notification-bulb.notif-info    { background-color: var(--bxp-notif-info); }
.notification-bulb.notif-caution { background-color: var(--bxp-notif-caution); }
.notification-bulb.notif-warning { background-color: var(--bxp-notif-warning); }


/* ---------- Modale d'une notification sans lien ---------- */

.notif-modal {
    overflow: hidden;                       /* pour que le filet suive les coins arrondis */
    border-left: 4px solid var(--bxp-notif-accent);
}

.notif-modal .modal-card-head,
.notif-modal .modal-card-foot {
    background-color: var(--bulma-scheme-main);
}

.notif-modal .modal-card-head {
    align-items: flex-start;
    gap: 0.75rem;
    border-bottom: 1px solid var(--bulma-border-weak);
}

.notif-modal-icon {
    margin-top: 0.15rem;
}

/* Bulma fige .modal-card-title en flex-shrink:0 : un titre long débordait de
   la modale et emportait la croix avec lui. Le titre n'est plus enfant direct
   du flex, et ce bloc-ci accepte de rétrécir. */
.notif-modal-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.notif-modal-title {
    margin-bottom: 0.2rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    color: var(--bulma-text-strong);
}

.notif-modal .modal-card-foot {
    justify-content: flex-end;
    border-top: 1px solid var(--bulma-border-weak);
}

/* -------------- Bouton Helper ------------------ */

.helper-btn{
    transition: all 0.15s ease;
    color: var(--bulma-info);
}

.helper-btn:hover{
    color: var(--bulma-danger);
    scale: 1.1;
}