@charset "UTF-8";
/* ============================================================
   Palette Wall-IT : claire, v2 (GLPI 11)
   Fichier : /var/www/glpi/files/_themes/wallit-light.scss
   Fond clair, menu bleu nuit, accent vert Wall-IT, contrastes AA.
   Structure : 1) variables GLPI + Tabler  2) renforts ciblés.
   Après modification : php bin/console cache:clear (en www-data)
   ============================================================ */
/* Palette claire : pas de $is-dark */
:root[data-glpi-theme=wallit-light] {
  /* ---------- 1. Couleurs de marque ---------- */
  --wallit-page: #f4f6fa; /* fond de page */
  --wallit-card: #ffffff; /* cartes, panneaux, champs */
  --wallit-border: #cfd6e4; /* bordures */
  --wallit-hover: #eaf0f8; /* survol */
  --wallit-night: #0b1526; /* bleu nuit : menu latéral, en-tête */
  --wallit-night-2: #111c30; /* bleu nuit un cran plus clair : sous-menus */
  --wallit-night-border:#1f2d4a;
  --wallit-text: #0b1526; /* 18:1 sur blanc */
  --wallit-text-2: #5b6780; /* 5.7:1 sur blanc */
  --wallit-text-light: #ffffff; /* texte sur bleu nuit */
  --wallit-accent: #12ef70; /* vert vif : boutons, badges, actif */
  --wallit-accent-text: #07803c; /* vert foncé : liens et textes (5:1 sur blanc) */
  --wallit-accent-2: #0aa84f; /* hover */
  /* ---------- 2. Tabler : socle ---------- */
  --tblr-dark: #0b1526;
  --tblr-light: #f4f6fa;
  --tblr-primary: var(--wallit-accent);
  --tblr-primary-rgb: 18, 239, 112;
  --tblr-primary-fg: #05130a;
  --tblr-secondary: #6b7899;
  --tblr-secondary-rgb: 107, 120, 153;
  --tblr-secondary-fg: #ffffff;
  --tblr-secondary-color: var(--wallit-text-2);
  --tblr-muted: var(--wallit-text-2);
  --tblr-muted-rgb: 91, 103, 128;
  --tblr-link-color: var(--wallit-accent-text);
  --tblr-link-color-rgb: 7, 128, 60;
  --tblr-link-hover-color: var(--wallit-accent-2);
  --tblr-link-hover-color-rgb: 10, 168, 79;
  --tblr-body-bg: var(--wallit-page);
  --tblr-body-bg-rgb: 244, 246, 250;
  --tblr-body-color: var(--wallit-text);
  --tblr-body-color-rgb: 11, 21, 38;
  --tblr-bg-surface: var(--wallit-card);
  --tblr-bg-surface-secondary: var(--wallit-page);
  --tblr-bg-surface-tertiary: var(--wallit-hover);
  --tblr-bg-forms: var(--wallit-card);
  --tblr-border-color: var(--wallit-border);
  --tblr-border-color-translucent: rgba(11, 21, 38, .12);
  --tblr-card-bg: var(--wallit-card);
  --tblr-card-cap-bg: var(--wallit-page);
  --tblr-card-border-color: var(--wallit-border);
  --tblr-active-bg: var(--wallit-hover);
  --tblr-table-striped-bg: rgba(11, 21, 38, .02);
  --tblr-table-hover-bg: var(--wallit-hover);
  --tblr-dropdown-bg: var(--wallit-card);
  --tblr-dropdown-border-color: var(--wallit-border);
  --tblr-dropdown-link-color: var(--wallit-text);
  --tblr-dropdown-link-hover-bg: var(--wallit-hover);
  --tblr-dropdown-link-hover-color: var(--wallit-text);
  --tblr-modal-bg: var(--wallit-card);
  --tblr-badge-bg: var(--wallit-accent);
  --tblr-badge-color: #05130a;
  /* ---------- 3. GLPI : menu latéral ---------- */
  --glpi-mainmenu-bg: var(--wallit-night);
  --glpi-mainmenu-fg: var(--wallit-text-light);
  --glpi-mainmenu-fg-muted: rgba(255, 255, 255, .7);
  --glpi-mainmenu-active-bg: rgba(18, 239, 112, .14);
  /* ---------- 4. GLPI : onglets, formulaires, recherche ---------- */
  --glpi-tabs-bg: var(--wallit-page);
  --glpi-tabs-fg: var(--wallit-text-2);
  --glpi-tabs-border-color: var(--wallit-border);
  --glpi-tabs-active-bg: var(--wallit-card);
  --glpi-tabs-active-fg: var(--wallit-text);
  --glpi-tabs-active-border-color: var(--wallit-border);
  --glpi-form-header-fg: var(--wallit-accent-text);
  --glpi-form-header-bg: color-mix(in srgb, var(--wallit-accent-text), var(--wallit-card) 92%);
  --glpi-form-header-border-color: color-mix(in srgb, var(--wallit-accent-text), var(--wallit-card) 75%);
  --glpi-search-bg: var(--wallit-hover);
  --glpi-search-fg: var(--wallit-text);
  --glpi-search-border-color: var(--wallit-border);
  --glpi-badge-bg: color-mix(in srgb, var(--wallit-accent-text), var(--wallit-card) 88%);
  --glpi-badge-fg: var(--wallit-accent-text);
  --glpi-itil-secondary-bg: var(--wallit-page);
  --glpi-hover-bg: rgba(107, 120, 153, .08);
  --glpi-scrollbar-thumb-color: rgba(107, 120, 153, .35);
  /* ---------- 5. GLPI : timeline des tickets (valeurs claires standard) ---------- */
  --glpi-timeline-fup-bg: #ffffff;
  --glpi-timeline-fup-fg: #1a2332;
  --glpi-timeline-fup-border-color: #d3dce7;
  --glpi-timeline-task-bg: #f2f4f8;
  --glpi-timeline-task-fg: #3a4557;
  --glpi-timeline-task-border-color:#d3dce7;
  --glpi-timeline-solution-bg: #e8fbf0;
  --glpi-timeline-solution-fg: #0b3d22;
  --glpi-timeline-solution-border-color: #12ef70;
  --glpi-timeline-itil-content-bg: #f5f7fa;
  --glpi-timeline-itil-content-fg: #1a2332;
  --glpi-timeline-itil-content-border-color: #c9d4e2;
  --glpi-timeline-document-bg: #dce8f5;
  --glpi-timeline-document-fg: #1a2332;
  --glpi-timeline-badge-bg: rgba(11, 21, 38, .10);
  --glpi-timeline-badge-fg: rgba(26, 35, 50, .85);
  /* ---------- 6. GLPI : helpdesk (portail client) et illustrations ---------- */
  --glpi-helpdesk-header: var(--wallit-night);
  --glpi-helpdesk-tiles-section-bg: var(--wallit-page);
  --glpi-helpdesk-tabs-section-bg: var(--wallit-card);
  --glpi-illustrations-background: #ffffff;
  --glpi-illustrations-primary: var(--wallit-accent-2);
  --glpi-illustrations-gradient-1: #e3ecf7;
  --glpi-illustrations-gradient-2: #7f95b8;
  --glpi-illustrations-gradient-3: #1f2d4a;
  --glpi-illustrations-header-dark: var(--wallit-night);
  --glpi-illustrations-header-light:var(--wallit-night-2);
  /* ---------- 7. Échantillon dans le sélecteur de palettes ---------- */
  --glpi-palette-color-1: #f4f6fa;
  --glpi-palette-color-2: #0b1526;
  --glpi-palette-color-3: #12ef70;
  --glpi-palette-color-4: #ffffff;
}

/* ============================================================
   Renforts ciblés : uniquement ce que les variables ne couvrent pas
   ============================================================ */
/* Sous-menus du menu latéral : GLPI les peint en bg-surface (blanc)
   avec le texte mainmenu-fg (clair). On les garde en bleu nuit. */
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-menu,
:root[data-glpi-theme=wallit-light] .navbar-collapsed #navbar-menu .nav-item .nav-link + .dropdown-menu {
  background-color: var(--wallit-night-2) !important;
  border-color: var(--wallit-night-border) !important;
  color: var(--wallit-text-light) !important;
}

:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-item,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-menu a {
  color: var(--wallit-text-light) !important;
}

:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-item:hover,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-item.active {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--wallit-accent) !important;
}

/* Menu latéral : item actif en vert */
:root[data-glpi-theme=wallit-light] .navbar-vertical .nav-link.active,
:root[data-glpi-theme=wallit-light] .navbar-vertical .nav-item.active > .nav-link {
  color: var(--wallit-accent) !important;
}

/* Barre du haut : bleu nuit, texte clair, hover vert.
   Scope étroit : .navbar-nav > .nav-item > .nav-link, pas de header a global. */
:root[data-glpi-theme=wallit-light] header,
:root[data-glpi-theme=wallit-light] .navbar:not(.navbar-vertical) {
  background: var(--wallit-night) !important;
  border-bottom: 1px solid var(--wallit-night-border) !important;
}

:root[data-glpi-theme=wallit-light] header .navbar-nav > .nav-item > .nav-link,
:root[data-glpi-theme=wallit-light] .navbar:not(.navbar-vertical) .navbar-nav > .nav-item > .nav-link {
  color: var(--wallit-text-light) !important;
}

:root[data-glpi-theme=wallit-light] header .navbar-nav > .nav-item > .nav-link:hover,
:root[data-glpi-theme=wallit-light] header .navbar-nav > .nav-item > .nav-link.active {
  color: var(--wallit-accent) !important;
}

/* Menus déroulants de la barre du haut (utilisateur, entités, notifications) :
   ils s'ouvrent sur fond blanc, donc texte sombre obligatoire. */
:root[data-glpi-theme=wallit-light] header .dropdown-menu,
:root[data-glpi-theme=wallit-light] .navbar:not(.navbar-vertical) .dropdown-menu {
  background-color: var(--wallit-card) !important;
  border-color: var(--wallit-border) !important;
  color: var(--wallit-text) !important;
}

:root[data-glpi-theme=wallit-light] header .dropdown-menu .dropdown-item,
:root[data-glpi-theme=wallit-light] header .dropdown-menu a,
:root[data-glpi-theme=wallit-light] header .dropdown-menu span,
:root[data-glpi-theme=wallit-light] header .dropdown-menu .dropdown-header {
  color: var(--wallit-text) !important;
}

:root[data-glpi-theme=wallit-light] header .dropdown-menu .dropdown-item:hover {
  background-color: var(--wallit-hover) !important;
  color: #020814 !important;
}

:root[data-glpi-theme=wallit-light] header .dropdown-menu .dropdown-item.disabled,
:root[data-glpi-theme=wallit-light] header .dropdown-menu .text-muted {
  color: var(--wallit-text-2) !important;
}

/* Avatar du header : pastille verte, initiales sombres */
:root[data-glpi-theme=wallit-light] header .avatar {
  background-color: var(--wallit-accent) !important;
  color: #05130a !important;
  font-weight: 600;
}

/* Boutons primaires : vert vif, texte sombre ; hover vert foncé, texte blanc */
:root[data-glpi-theme=wallit-light] .btn-primary {
  --tblr-btn-bg: var(--wallit-accent);
  --tblr-btn-border-color: var(--wallit-accent);
  --tblr-btn-color: #05130a;
  --tblr-btn-hover-bg: var(--wallit-accent-2);
  --tblr-btn-hover-border-color: var(--wallit-accent-2);
  --tblr-btn-hover-color: #ffffff;
  --tblr-btn-active-bg: var(--wallit-accent-2);
  --tblr-btn-active-color: #ffffff;
  font-weight: 600;
}

/* Focus des champs : halo vert */
:root[data-glpi-theme=wallit-light] .form-control:focus,
:root[data-glpi-theme=wallit-light] .form-select:focus {
  border-color: var(--wallit-accent-2);
  box-shadow: 0 0 0 0.2rem rgba(18, 239, 112, 0.25);
}

:root[data-glpi-theme=wallit-light] .form-control::placeholder {
  color: #8a94aa;
  opacity: 1;
}

/* Menu latéral : tout texte en clair, y compris sous-menus dépliés.
   Les variables Tabler sont redéfinies dans ce périmètre seulement. */
:root[data-glpi-theme=wallit-light] .navbar-vertical {
  --tblr-dropdown-bg: var(--wallit-night-2);
  --tblr-dropdown-border-color: var(--wallit-night-border);
  --tblr-dropdown-link-color: var(--wallit-text-light);
  --tblr-dropdown-link-hover-bg: rgba(255, 255, 255, .06);
  --tblr-dropdown-link-hover-color: var(--wallit-accent);
  --tblr-dropdown-link-active-bg: rgba(18, 239, 112, .14);
  --tblr-dropdown-link-active-color:var(--wallit-accent);
  --tblr-nav-link-color: var(--wallit-text-light);
  --tblr-nav-link-hover-color: #ffffff;
  --tblr-body-color: var(--wallit-text-light);
  --tblr-muted: rgba(223, 228, 238, .6);
}

:root[data-glpi-theme=wallit-light] .navbar-vertical .nav-link,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-menu a,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-menu span,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-menu li,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-item {
  color: var(--wallit-text-light) !important;
}

:root[data-glpi-theme=wallit-light] .navbar-vertical .nav-link:hover,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-menu a:hover,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-menu a:hover span {
  color: #ffffff !important;
}

:root[data-glpi-theme=wallit-light] .navbar-vertical .nav-link.active,
:root[data-glpi-theme=wallit-light] .navbar-vertical .nav-item.active > .nav-link,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-item.active,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-item.active span {
  color: var(--wallit-accent) !important;
}

/* Menu latéral : pas de bordure claire entre le menu et le contenu */
:root[data-glpi-theme=wallit-light] .navbar-vertical {
  border-right: 0 !important;
  box-shadow: none !important;
}

:root[data-glpi-theme=wallit-light] header,
:root[data-glpi-theme=wallit-light] .navbar:not(.navbar-vertical) {
  border-left: 0 !important;
}

/* Infobulles : on retire la pointe, on garde le texte sur fond bleu nuit */
:root[data-glpi-theme=wallit-light] .tooltip .tooltip-arrow {
  display: none !important;
}

:root[data-glpi-theme=wallit-light] .tooltip .tooltip-inner {
  background-color: var(--wallit-night-2);
  color: var(--wallit-text-light);
  border: 1px solid var(--wallit-night-border);
}

/* Menu latéral : intitulés en blanc pur, graisse moyenne pour la netteté */
:root[data-glpi-theme=wallit-light] .navbar-vertical .nav-link,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-item,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-menu a {
  font-weight: 500;
}

:root[data-glpi-theme=wallit-light] .navbar-vertical .nav-link .icon,
:root[data-glpi-theme=wallit-light] .navbar-vertical .dropdown-item .icon {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Fil d'Ariane dans la barre du haut : blanc, item courant vert */
:root[data-glpi-theme=wallit-light] header,
:root[data-glpi-theme=wallit-light] .navbar:not(.navbar-vertical) {
  --tblr-breadcrumb-color: #ffffff;
  --tblr-breadcrumb-link-color: #ffffff;
  --tblr-breadcrumb-active-color: var(--wallit-accent);
  --tblr-breadcrumb-divider-color: rgba(255, 255, 255, .5);
}

:root[data-glpi-theme=wallit-light] header .breadcrumb,
:root[data-glpi-theme=wallit-light] header .breadcrumb-item,
:root[data-glpi-theme=wallit-light] header .breadcrumb-item a,
:root[data-glpi-theme=wallit-light] header .breadcrumb-item a span,
:root[data-glpi-theme=wallit-light] header .breadcrumb-item .icon,
:root[data-glpi-theme=wallit-light] header .page-title,
:root[data-glpi-theme=wallit-light] header .page-pretitle {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 500;
}

:root[data-glpi-theme=wallit-light] header .breadcrumb-item.active,
:root[data-glpi-theme=wallit-light] header .breadcrumb-item.active a {
  color: var(--wallit-accent) !important;
}

/* Fil d'Ariane et icônes du header : vert Wall-IT au survol */
:root[data-glpi-theme=wallit-light] header .breadcrumb-item a:hover,
:root[data-glpi-theme=wallit-light] header .breadcrumb-item a:hover span,
:root[data-glpi-theme=wallit-light] header .breadcrumb-item a:hover .icon,
:root[data-glpi-theme=wallit-light] header .navbar-nav > .nav-item > .nav-link:hover .icon {
  color: var(--wallit-accent) !important;
  transition: color 0.15s ease;
}

/* Menu utilisateur : avatar vert et menu blanc, quelle que soit la largeur d'écran */
:root[data-glpi-theme=wallit-light] .user-menu .avatar,
:root[data-glpi-theme=wallit-light] .navbar-nav .avatar,
:root[data-glpi-theme=wallit-light] #navbar-menu .avatar,
:root[data-glpi-theme=wallit-light] .navbar-vertical .avatar {
  background-color: var(--wallit-accent) !important;
  background-image: none !important;
  color: #05130a !important;
  font-weight: 600;
}

:root[data-glpi-theme=wallit-light] .user-menu .dropdown-menu,
:root[data-glpi-theme=wallit-light] .navbar-nav.user-menu .dropdown-menu,
:root[data-glpi-theme=wallit-light] .navbar-vertical .user-menu .dropdown-menu {
  background-color: var(--wallit-card) !important;
  border-color: var(--wallit-border) !important;
  color: var(--wallit-text) !important;
}

:root[data-glpi-theme=wallit-light] .user-menu .dropdown-menu .dropdown-item,
:root[data-glpi-theme=wallit-light] .user-menu .dropdown-menu a,
:root[data-glpi-theme=wallit-light] .user-menu .dropdown-menu span,
:root[data-glpi-theme=wallit-light] .user-menu .dropdown-menu .dropdown-header,
:root[data-glpi-theme=wallit-light] .user-menu .dropdown-menu .icon {
  color: var(--wallit-text) !important;
}

:root[data-glpi-theme=wallit-light] .user-menu .dropdown-menu .dropdown-item:hover {
  background-color: var(--wallit-hover) !important;
  color: var(--wallit-accent-text) !important;
}

:root[data-glpi-theme=wallit-light] .user-menu .dropdown-menu .select2-container .select2-selection,
:root[data-glpi-theme=wallit-light] .user-menu .dropdown-menu .form-select {
  background-color: var(--wallit-card) !important;
  border: 1px solid var(--wallit-border) !important;
  color: var(--wallit-text) !important;
}

/* ---------- 9. Timeline : distinction client / Wall-IT ---------- */
.timeline-item:not(.new-item) .timeline-content.t-left {
  background: #ffffff !important;
  border: 1px solid #d3dce7 !important;
  border-left: 5px solid #0b1526 !important;
}

.timeline-item:not(.new-item) .timeline-content.t-right {
  background: #c2d9ee !important;
  border: 1px solid #b9cde8 !important;
  border-left: 5px solid #12ef70 !important;
}

.timeline-item:not(.new-item) .timeline-content.t-right .card-header,
.timeline-content.t-right .timeline-header {
  background: #b0cbea !important;
  color: #0b1526 !important;
}

.timeline-content.t-right .card-header .badge,
.timeline-content.t-right .timeline-header .badge {
  background: rgba(11, 21, 38, 0.1) !important;
  color: #0b1526 !important;
}

.timeline-item.private-item .timeline-content {
  background: #f2f4f8 !important;
  border-left: 5px solid #9fb0c8 !important;
}

/* Formulaire de saisie : neutre, jamais aux couleurs d'un auteur */
[data-testid^=new-][data-testid] .timeline-content.t-left.card,
[data-testid^=new-][data-testid] .timeline-content.t-right.card {
  background: #ffffff !important;
  border: 1px solid #d3dce7 !important;
  border-left: 1px solid #d3dce7 !important;
}

[data-testid^=new-][data-testid] .timeline-content.t-right.card .card-header {
  background: transparent !important;
}

/* ---------- 10. Liens des listes : sobres au repos, verts au survol ---------- */
table a,
.table a,
.search-results a,
td a {
  color: #1a2332 !important;
  text-decoration: none;
}

table a:hover,
.table a:hover,
.search-results a:hover,
td a:hover {
  color: #12ef70 !important;
}

/* ========================================================= */
/* 11. Mise en avant de la description initiale du ticket    */
/* ========================================================= */
/* La carte de description est la seule à contenir un titre .card-title.card-header */
.timeline-content.card:has(.card-title.card-header) {
  border: 1px solid #0b1526;
  box-shadow: 0 2px 8px rgba(11, 21, 38, 0.12);
  margin-bottom: 2.5rem;
}

/* Bandeau titre : bleu nuit, texte blanc, filet vert (rappel du modèle mail) */
.timeline-content.card:has(.card-title.card-header) .card-title.card-header {
  background: #0b1526;
  color: #ffffff;
  border-bottom: 3px solid #12ef70;
  font-weight: 600;
}

/* Libellé au-dessus du titre */
.timeline-content.card:has(.card-title.card-header) .card-title.card-header::before {
  content: "Description du ticket";
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #12ef70;
  margin-bottom: 0.25rem;
}

/* 11b. Espace entre la ligne de badges et le bandeau titre */
.timeline-content.card:has(.card-title.card-header) .card-title.card-header {
  margin-top: 0.4rem !important;
}