/* GT-Heberg — webmail sans mot de passe : bouton de connexion et menu « Boîtes ».
   Indépendant du thème (fonctionne aussi sous Elastic seul) ; couleurs de la charte. */

/* ---- Page de connexion : bouton au-dessus du formulaire */
.gtsso-login { margin: 0 0 1.1rem; }
.gtsso-login__btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; box-sizing: border-box; padding: .85rem 1rem;
  border-radius: 12px; border: 0;
  background: linear-gradient(120deg, #4f46e5, #0ea5e9);
  color: #fff !important; font-weight: 600; font-size: 1rem; line-height: 1.3; text-align: center;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(14, 165, 233, .22);
  transition: filter .15s, transform .15s;
}
.gtsso-login__btn::before { font-family: 'Icons'; font-weight: 900; content: "\f2bd"; font-size: 1.1em; }
.gtsso-login__btn:hover, .gtsso-login__btn:focus-visible { filter: brightness(1.07); transform: translateY(-1px); }
.gtsso-login__btn:focus-visible { outline: 3px solid rgba(79, 70, 229, .35); outline-offset: 2px; }
.gtsso-login__or {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0 .2rem; color: #64748b; font-size: .8rem; text-align: center;
}
.gtsso-login__or::before, .gtsso-login__or::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
html.gtsso-opening #login-form { pointer-events: none; }
html.gtsso-opening #login-form table, html.gtsso-opening #login-form .formbuttons, html.gtsso-opening .gtsso-login__or { opacity: .35; }
html.gtsso-opening .gtsso-login__btn::before { content: "\f110"; display: inline-block; animation: gtsso-spin 1s linear infinite; }
@keyframes gtsso-spin { to { transform: rotate(360deg); } }

/* ---- Menu des tâches : bouton « Boîtes » */
#taskmenu a.gtsso-boxes:before { content: "\f362"; }

/* ---- Fenêtre « Mes boîtes e-mail » */
.gtsso-boxes { font-size: .95rem; }
.gtsso-boxes__account { margin: 0 0 .9rem; color: #64748b; font-size: .85rem; }
.gtsso-boxes__account strong { color: inherit; font-weight: 600; }
.gtsso-boxes__filter { width: 100%; margin: 0 0 .8rem; }
.gtsso-boxes__group[hidden], .gtsso-boxes li[hidden] { display: none; }
.gtsso-boxes__domain {
  display: flex; align-items: center; gap: .5rem;
  margin: .9rem 0 .35rem; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #64748b;
}
.gtsso-boxes__group:first-of-type .gtsso-boxes__domain { margin-top: 0; }
.gtsso-boxes__tag { padding: .05rem .45rem; border-radius: 999px; background: rgba(14, 165, 233, .14); color: #0369a1; letter-spacing: 0; text-transform: none; font-weight: 600; }
.gtsso-boxes ul { list-style: none; margin: 0; padding: 0; }
.gtsso-box {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .6rem; margin: 0 -.6rem; border-radius: 10px;
  color: inherit !important; text-decoration: none !important;
  transition: background .12s;
}
.gtsso-box:hover, .gtsso-box:focus-visible { background: rgba(79, 70, 229, .08); }
.gtsso-box.current { background: rgba(79, 70, 229, .12); cursor: default; }
.gtsso-box.loading { opacity: .7; pointer-events: none; }
.gtsso-box__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; color: #fff;
  background: hsl(var(--gtsso-h, 245), 55%, 47%);
}
.gtsso-box__email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.gtsso-box__state { flex: 0 0 auto; font-size: .75rem; font-weight: 600; color: #4338ca; }
.gtsso-boxes__more { margin: 1rem 0 0; font-size: .85rem; }

html.dark-mode .gtsso-boxes__account, html.dark-mode .gtsso-boxes__domain { color: #9aa4b8; }
html.dark-mode .gtsso-box:hover, html.dark-mode .gtsso-box:focus-visible { background: rgba(255, 255, 255, .06); }
html.dark-mode .gtsso-box.current { background: rgba(165, 180, 252, .16); }
html.dark-mode .gtsso-box__state { color: #a5b4fc; }
html.dark-mode .gtsso-boxes__tag { color: #7dd3fc; }

@media (prefers-reduced-motion: reduce) {
  .gtsso-login__btn, .gtsso-box { transition: none; }
  html.gtsso-opening .gtsso-login__btn::before { animation: none; }
}