/*
 * Pannello del professionista: notifiche, annunci e account in alto a destra (CEO 10/10:
 * «non si capiscono, devono essere flat e chiare, se no non sanno se hanno notifiche o no»).
 *
 * Com'era: tre icone in rilievo senza scritta, con un «0» rosso sulla campana.
 * Ora: tre pulsanti piatti con icona a tratto e scritta. «Notifiche» è pieno e verde con il
 * numero quando ce ne sono da leggere; a zero resta un contorno chiaro con «0» in grigio.
 * Dentro @layer tbp-appearance, come le regole del tema che colorano questo pannello.
 */
@layer tbp-appearance {
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    float: right !important;
    flex: 0 0 auto !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a {
    --tbp-np-icona: none;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    float: none !important;
    width: auto !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
    padding: 0 14px 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(8, 72, 40, .18) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #084828 !important;
    -webkit-text-fill-color: #084828 !important;
    font: 600 14px/1 var(--tbp-font, Manrope, "Helvetica Neue", Arial, sans-serif) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
    animation: none !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a:is(:hover, :focus-visible) {
    background: #EEF6F1 !important;
    border-color: rgba(8, 72, 40, .34) !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a:focus-visible {
    outline: 2px solid #084828 !important;
    outline-offset: 2px !important;
  }
  /* Via le icone in rilievo, gli anelli animati e la foto piccola: resta un'icona a tratto. */
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a > :is(i, img, .notification-ring) {
    display: none !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a::before {
    content: "" !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    position: static !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: currentColor !important;
    -webkit-mask: var(--tbp-np-icona) center / 20px 20px no-repeat !important;
    mask: var(--tbp-np-icona) center / 20px 20px no-repeat !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a::after {
    content: attr(data-tip) !important;
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: none !important;
    color: inherit !important;
    font: inherit !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_messages {
    --tbp-np-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5a6 6 0 1 1 12 0c0 4.6 1.9 6 1.9 6H4.1S6 14.1 6 9.5z'/%3E%3Cpath d='M10 19a2.1 2.1 0 0 0 4 0'/%3E%3C/svg%3E");
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_notice {
    --tbp-np-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h3l8 4.2V5.8L7 10H4z'/%3E%3Cpath d='M18.2 9.2a4 4 0 0 1 0 5.6'/%3E%3Cpath d='M8 14.4V19'/%3E%3C/svg%3E");
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_profile {
    --tbp-np-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.6'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
  }

  /* Il numero: sempre dopo la scritta. A zero è grigio; da 1 in su il pulsante diventa pieno. */
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a .unread_notification_count {
    order: 3 !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    width: auto !important;
    height: 22px !important;
    margin: 0 -4px 0 0 !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #E9EEEB !important;
    box-shadow: none !important;
    color: #4A5D52 !important;
    -webkit-text-fill-color: #4A5D52 !important;
    font: 700 12px/1 var(--tbp-font, Manrope, "Helvetica Neue", Arial, sans-serif) !important;
    font-variant-numeric: tabular-nums !important;
    transform: none !important;
    animation: none !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a:has(.unread_notification_count:not(.is-zero)) {
    border-color: #084828 !important;
    background: #084828 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a:has(.unread_notification_count:not(.is-zero)):is(:hover, :focus-visible) {
    background: #0C6139 !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a .unread_notification_count:not(.is-zero) {
    background: #fff !important;
    color: #084828 !important;
    -webkit-text-fill-color: #084828 !important;
  }

  html[data-tbp-theme="dark"] body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a {
    border-color: #2C5A3E !important;
    background: #16261D !important;
    color: #E6F0EA !important;
    -webkit-text-fill-color: #E6F0EA !important;
  }
  html[data-tbp-theme="dark"] body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a .unread_notification_count.is-zero {
    background: #24342B !important;
    color: #A9BBB0 !important;
    -webkit-text-fill-color: #A9BBB0 !important;
  }
  html[data-tbp-theme="dark"] body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a:has(.unread_notification_count:not(.is-zero)) {
    border-color: #5FB585 !important;
    background: #2F8A57 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Telefono: icona e numero, senza scritta, così il titolo della pagina resta leggibile. */
  @media (max-width: 700px) {
    html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) { gap: 6px !important; }
    html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a {
      padding: 0 10px !important;
      justify-content: center !important;
      gap: 6px !important;
    }
    html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a::after {
      content: none !important;
    }
    html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a .unread_notification_count {
      margin: 0 -2px 0 0 !important;
    }
  }
}

/* CEO 10/10: «non serve annuncio». Il pulsante degli annunci sparisce dal pannello. */
@layer tbp-appearance {
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_notice {
    display: none !important;
  }
}

/*
 * CEO 10/10: le notifiche da leggere «in rosso, diverso dal rosso ToBePolo, e che si muovono».
 * Rosso lampone #E0245E (quello del marchio è #D0161A). La campana dondola e il pulsante
 * manda un'onda ogni 3 secondi. Fermo per chi ha chiesto meno movimento al sistema.
 */
@layer tbp-appearance {
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_messages:has(.unread_notification_count:not(.is-zero)) {
    border-color: #E0245E !important;
    background: #E0245E !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    animation: tbp-np-onda 3s ease-out infinite !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_messages:has(.unread_notification_count:not(.is-zero)):is(:hover, :focus-visible) {
    background: #C71B50 !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_messages:has(.unread_notification_count:not(.is-zero))::before {
    transform-origin: 50% 10% !important;
    animation: tbp-np-campana 3s ease-in-out infinite !important;
  }
  html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_messages .unread_notification_count:not(.is-zero) {
    background: #fff !important;
    color: #C71B50 !important;
    -webkit-text-fill-color: #C71B50 !important;
  }
  html[data-tbp-theme="dark"] body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_messages:has(.unread_notification_count:not(.is-zero)) {
    border-color: #F0457A !important;
    background: #E0245E !important;
  }
  @media (prefers-reduced-motion: reduce) {
    html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_messages:has(.unread_notification_count:not(.is-zero)),
    html body .wcfm_header_panel:not(#tbp-np-1):not(#tbp-np-2) > a.wcfm_header_panel_messages:has(.unread_notification_count:not(.is-zero))::before {
      animation: none !important;
    }
  }
}
@keyframes tbp-np-campana {
  0%, 62%, 100% { transform: rotate(0deg); }
  68% { transform: rotate(16deg); }
  74% { transform: rotate(-14deg); }
  80% { transform: rotate(10deg); }
  86% { transform: rotate(-7deg); }
  92% { transform: rotate(3deg); }
}
@keyframes tbp-np-onda {
  0%, 60% { box-shadow: 0 0 0 0 rgba(224, 36, 94, .45); }
  100% { box-shadow: 0 0 0 10px rgba(224, 36, 94, 0); }
}

/*
 * Fumetto di aiuto sulle scelte di «Nuovo mestiere» (Difficoltà, ecc.) — CEO 10/10.
 * Aveva lo sfondo trasparente (--tbp-page-bg in quella pagina vale «transparent»): il testo
 * finiva sopra il titolo del campo e le caselle. Ora ha un fondo pieno, chiaro o scuro.
 */
/* Dentro @layer tbp-appearance: è lì che il tema rende trasparente questo fumetto. */
@layer tbp-appearance {
  html body div#tbp-pill-tip-bubble.tbp-pill-tip-bubble,
  html body div#tbp-pill-tip-bubble.tbp-pill-tip-bubble::after {
    background: #fff !important;
  }
  html body div#tbp-pill-tip-bubble.tbp-pill-tip-bubble {
    border: 1px solid rgba(8, 72, 40, .18) !important;
    color: #0B3B24 !important;
    font-weight: 500 !important;
    box-shadow: 0 6px 18px rgba(8, 72, 40, .12) !important;
  }
  html[data-tbp-theme="dark"] body div#tbp-pill-tip-bubble.tbp-pill-tip-bubble,
  html[data-tbp-theme="dark"] body div#tbp-pill-tip-bubble.tbp-pill-tip-bubble::after {
    background: #16261D !important;
  }
  html[data-tbp-theme="dark"] body div#tbp-pill-tip-bubble.tbp-pill-tip-bubble {
    border-color: #2C5A3E !important;
    color: #E6F0EA !important;
  }
  html[data-tbp-theme="dark"] body div#tbp-pill-tip-bubble.tbp-pill-tip-bubble::after {
    border-color: #2C5A3E !important;
  }
}

/*
 * CEO 11/10: nel menu del pannello la voce «Notifiche» tiene la campana Lava, mostra a destra il numero
 * di quelle da leggere (lo stesso del pulsante in alto) e la campana dondola finché ce ne sono.
 */
@layer tbp-appearance {
  html body #wcfm_menu .wcfm_menu_wcfm-messages a.wcfm_menu_item:not(#tbp-np-1) {
    position: relative !important;
  }
  /* Il numero sta dentro la voce, a destra, sopra il testo: non allarga il menu e non esce dal bordo. */
  html body #wcfm_menu .wcfm_menu_wcfm-messages a.wcfm_menu_item:not(#tbp-np-1) .tbp-np-conta {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 26px !important;
    width: auto !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    background: #E0245E !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font: 700 13px/1 var(--tbp-font, Manrope, "Helvetica Neue", Arial, sans-serif) !important;
    font-variant-numeric: tabular-nums !important;
    float: none !important;
  }
  html body #wcfm_menu .wcfm_menu_wcfm-messages a.wcfm_menu_item:not(#tbp-np-1) .tbp-np-conta[hidden] {
    display: none !important;
  }
  html body #wcfm_menu .wcfm_menu_wcfm-messages a.wcfm_menu_item.tbp-np-ha:not(#tbp-np-1) > span.wcfmfa {
    transform-origin: 50% 12% !important;
    animation: tbp-np-campana 3s ease-in-out infinite !important;
  }
  @media (prefers-reduced-motion: reduce) {
    html body #wcfm_menu .wcfm_menu_wcfm-messages a.wcfm_menu_item.tbp-np-ha:not(#tbp-np-1) > span.wcfmfa {
      animation: none !important;
    }
  }
}