/* custom.css */
:root {
  --bs-primary: #96c11f;
  --bs-secondary: #D9F2D0;
  --bs-primary-rgb: 150, 193, 31;
  --bs-secondary-rgb: 217, 242, 208;


  /* Colori del menu */
  --bs-menu-active-bg: #D9F2D0;
  --bs-menu-active-color: #004459;

  /* Colori di enfasi del testo */
  --bs-primary-text-emphasis: #004459;
  --bs-secondary-text-emphasis: #2c2f32;

  /* Sfondi sottili */
  --bs-primary-bg-subtle: #ccf2ff;
  --bs-secondary-bg-subtle: #e2e3e5;

  /* Bordi sottili */
  --bs-primary-border-subtle: #99e6ff;
  --bs-secondary-border-subtle: #c4c8cb;

  /* Colore link */
  --bs-link-color: #00A9E3;
  --bs-link-hover-color: #0087b8;
  --bs-link-color-rgb: 0, 169, 227;
  --bs-link-hover-color-rgb: 0, 135, 184;

  /* Colori SM2CARE*/
  --custom-green-water: #91B6A4;


  --bs-menu-sub-active-bg: #4a5c0f;
  --bs-menu-hover-bg: #4a5c0f;

  --bs-menu-active-color: #4a5c0f;

}

/* Per il tema dark */
[data-bs-theme=dark] {
  --bs-primary: #33b8e8;
  --bs-secondary: #6c757d;
  --bs-primary-rgb: 51, 184, 232;
  --bs-secondary-rgb: 108, 117, 125;

  /* Colori di enfasi del testo per dark mode */
  --bs-primary-text-emphasis: #80d4f0;
  --bs-secondary-text-emphasis: #a7acb1;

  /* Sfondi sottili per dark mode */
  --bs-primary-bg-subtle: #1a4a5c;
  --bs-secondary-bg-subtle: #3a3d41;

  /* Bordi sottili per dark mode */
  --bs-primary-border-subtle: #2d7a94;
  --bs-secondary-border-subtle: #54585d;

  /* Link per dark mode */
  --bs-link-color: #33b8e8;
  --bs-link-hover-color: #66c9ed;
  --bs-link-color-rgb: 51, 184, 232;
  --bs-link-hover-color-rgb: 102, 201, 237;
}

.color-primary {
  color: var(--bs-primary) !important;
}

.bg-color-green-water {
  background-color: var(--custom-green-water) !important;
}

.text-green-water {
  color: var(--custom-green-water) !important;
}

.text-purple {
  color: #6f42c1 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-green-water {
  border-left: 2px solid var(--custom-green-water) !important;
}

/* Per bottoni con classe btn-green */
.btn-custom-green {
  background: #00B050;
  border-color: #00B050;
  color: white;
}

.btn-custom-green:hover,
.btn-custom-green:focus,
.btn-custom-green:active {
  background: #009045;
  border-color: #009045;
  color: white;
}

.btn-custom-gray {
  background: #6c757d;
  /* grigio neutro */
  border-color: #6c757d;
  color: white;
}

.btn-custom-gray:hover,
.btn-custom-gray:focus,
.btn-custom-gray:active {
  background: #5a6268;
  /* grigio più scuro */
  border-color: #5a6268;
  color: white;
}


/* Variante con colore #96c11f */
.btn-custom-green-ossola {
  background: #96c11f;
  border-color: #96c11f;
  color: white;
}

.btn-custom-green-ossola:hover,
.btn-custom-green-ossola:focus,
.btn-custom-green-ossola:active {
  background: #7fa319;
  border-color: #7fa319;
  color: white;
}

.custom-blue {
  color: #017CBF;
}

.custom-gray {
  color: #868e96 !important;
}

.custom-green {
  color: #00B050 !important;
}

.text-bold {
  font-weight: bold !important;
}

/* Per bottoni con classe btn-add */
.btn-custom-blue {
  background: #017CBF;
  border-color: #017CBF;
  color: white;
}

.btn-custom-blue:hover,
.btn-custom-blue:focus,
.btn-custom-blue:active {
  background: #016aa6;
  border-color: #016aa6;
  color: white;
}

.validation-error-text {
  color: #ff4c4c;
  /* rosso simile a quello dell'immagine */
  font-size: 14px;
  font-family: sans-serif;
  margin-top: 4px;
}

.validation-error-field {
  border: 2px solid #ff4c4c;
  /* rosso simile all’immagine */
  border-radius: 8px;
  /* angoli arrotondati */
  padding: 0px;
  /* spazio interno */
  outline: none;
  /* rimuove contorno blu su focus */
}

.validation-error-field:focus {
  border-color: #ff4c4c;
  /* mantiene rosso anche a focus */
  box-shadow: 0 0 0 2px rgba(255, 76, 76, 0.2);
  /* leggero alone rosso */
}

/* Acoordion styles manuale */
.accordion-content {
  display: none;
}

.accordion-content.show {
  display: table-row;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.accordion-toggle {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.accordion-toggle:hover {
  background-color: #b8d9f0 !important;
}

.accordion-icon {
  transition: transform 0.3s ease;
  margin-left: 10px;
}

.accordion-icon.rotated {
  transform: rotate(90deg);
}


.form-control.custom-validator-error {
  border-color: #e74c3c !important;
}

label.custom-validator-error,
label span.custom-validator-error {
  color: #e74c3c;
  margin: 5px 0 0 0;
  font-weight: 400;
}

label span.custom-validator-error {
  margin-left: 5px;
}


/* Card/box degli eventi */
.fc .sm-event {
  transition: transform .08s ease, box-shadow .12s ease;
  border-radius: .5rem;
  /* arrotonda leggermente */
}

/* Hover gradevole */
.fc .sm-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
}

/* Timed events: dot + bordo sinistro colorato */
.fc .sm-event--timed {
  position: relative;
}

/* Pallino colorato prima del titolo */
.fc .sm-event .sm-event-dot {
  display: inline-block;
  width: .6em;
  height: .6em;
  border-radius: 9999px;
  margin-right: .45em;
  vertical-align: middle;
}

/* Testo chiaro se background scuro */
.fc .sm-event--light-text,
.fc .sm-event--light-text a,
.fc .sm-event--light-text .fc-event-title,
.fc .sm-event--light-text .fc-event-time {
  color: #ffffff !important;
}

/* Vista list: migliora leggibilità del titolo con il dot */
.fc-list .sm-event .sm-event-dot {
  margin-right: .6em;
}

/* Vista dayGrid: un po' di padding interno */
.fc-daygrid-event {
  padding: 2px 6px;
}

.fc-toolbar-chunk:first-child {
  margin-right: 20px;
  /* spazio extra tra prev/next e il titolo */
}

.fc-toolbar-title {
  text-transform: capitalize;
  /* rende la prima lettera di ogni parola maiuscola */
  margin-left: 10px !important;
}

.sm-cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}


/* ========== DZ ESITO — STILI UNIFICATI ========== */

/* Contenitore base */
#dz-esito {
  border: 2px dashed #cbd5e1;
  border-radius: 25px !important;
  background: #fafafa;
  min-height: 200px;
  padding: 20px;
  text-align: center;
  transition: background .2s, border-color .2s, box-shadow .2s;
}

/* Hover */
#dz-esito:hover {
  background: #f5f5f5;
  border-color: #94a3b8;
}

/* Stato VUOTO (nessun file): centra il messaggio */
#dz-esito:not(.dz-started) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Messaggio iniziale */
#dz-esito .dz-message {
  margin: 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.5;
  width: 100%;
}

#dz-esito .dz-message i {
  font-size: 42px !important;
  color: #3b82f6;
  margin-bottom: 12px;
  display: block;
}

#dz-esito .dz-message .text-primary {
  font-weight: 600;
  cursor: pointer;
}

#dz-esito .dz-message small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #9ca3af;
}

/* Stato CON FILE (griglia di card) */
#dz-esito.dz-started {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
}

#dz-esito.dz-started .dz-message {
  display: none !important;
}

/* Card preview */
#dz-esito .dz-preview.card {
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  transition: transform .12s ease, box-shadow .12s ease;
  background: #fff;
}

#dz-esito .dz-preview.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
}

/* Area thumb */
#dz-esito .dz-thumb-wrap {
  position: relative;
  height: 140px;
  background: #f8f9fb;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dz-esito .dz-image {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#dz-esito .dz-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* Icona fallback per file non-immagine */
#dz-esito .dz-file-icon {
  position: absolute;
  font-size: 40px;
  color: #9aa3b2;
}

#dz-esito .dz-image:not(:has(img))~.dz-file-icon {
  display: block;
}

#dz-esito .dz-image:has(img)~.dz-file-icon {
  display: none;
}

/* Pulsante rimuovi (nostro) */
#dz-esito .dz-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1;
  border: 1px solid rgba(0, 0, 0, .05);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

#dz-esito .dz-remove-btn:hover {
  filter: brightness(0.98);
}

/* Testi card */
#dz-esito .dz-filename {
  font-weight: 500;
}

#dz-esito .dz-meta {
  opacity: .8;
}

#dz-esito .dz-error-message {
  min-height: 1.2em;
}

/* Responsive: griglia più compatta su mobile */
@media (max-width: 576px) {
  #dz-esito.dz-started {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  #dz-esito {
    min-height: 160px;
    padding: 16px;
  }
}


/* wrapper: sfondo grigino + scroll */
.sm-attach-wrap {
  max-height: 400px;
  /* più alto */
  overflow: auto;
  background: #dedede;
  /* grigino chiaro */
  border: 1px dashed #919292;
  border-radius: 16px;
  padding: 12px;
}

/* griglia responsive */
.sm-attach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  /* card più larghe */
  gap: 14px;
}

/* card bianche con shadow e radius */
.sm-attach-card {
  background: #ffffff;
  /* bianco per risalto */
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
  border: 1px solid rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
  min-height: 250px;
  /* più alta */
  margin: 20px;
}

/* hover */
.sm-attach-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

/* top preview area */
.sm-attach-top {
  position: relative;
  background: white;
  min-height: 150px;
  /* più alta */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* thumbnail immagini */
.sm-attach-thumb {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}

/* icone Font Awesome (dimensione grande) */
.sm-attach-fa {
  font-size: 40px;
  opacity: .95;
}

/* tasto remove */
.sm-attach-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sm-attach-remove i {
  color: #ef4444;
  font-size: 18px;
}

/* body content */
.sm-attach-body {
  padding: 14px 16px 16px 16px;
  background: #f8fafc;
  height: 100%;
}

.sm-attach-name {
  font-weight: 500;
  font-size: .98rem;
  margin: 0 0 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sm-attach-name a {
  color: #111827;
  text-decoration: none;
}

.sm-attach-name a:hover {
  text-decoration: underline;
}

.sm-attach-meta {
  font-size: .82rem;
  color: #6b7280;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sm-attach-badges {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sm-attach-badge {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
}

/* piccolo badge estensione */
.sm-ext-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #111827;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  opacity: .9;
}


.pac-container {
  background-color: #FFF;
  z-index: 9999;
  position: fixed;
  display: inline-block;
  float: left;
}


/* wrapper che si estende per tutta la riga */
.s2-option-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

/* tooltip */
.s2-tooltip {
  display: none;
  position: absolute;
  right: -5px;
  /* a destra del testo */
  top: 50%;
  transform: translateY(-50%);
  background: #333;
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 9999;
}

/* appare quando passo sopra tutta la riga */
.select2-results__option:hover .s2-tooltip {
  display: inline-block;
}

/* stile disabilitato */
.s2-disabled .s2-text {
  color: #999 !important;
  cursor: not-allowed;
}

.bs-stepper.wizard-vertical-icons.vertical .bs-stepper-header .step.active #id_step_evento_delete_icon {
  background-color: red !important;
  box-shadow: var(--bs-box-shadow-xs);
  color: var(--bs-primary-contrast);
}


.local-suggest-menu {
  position: absolute;
  z-index: 2000;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, .12);
  border-top: none;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  border-radius: 0 0 .5rem .5rem
}

.local-suggest-sec {
  padding: .375rem .75rem;
  border-top: 1px solid rgba(0, 0, 0, .06)
}

.local-suggest-sec:first-child {
  border-top: none
}

.local-suggest-title {
  font-size: .75rem;
  color: #6c757d;
  margin: .25rem 0 .25rem
}

.local-suggest-item {
  padding: .5rem .75rem;
  cursor: pointer
}

.local-suggest-item small {
  color: #6c757d;
  display: block
}

.local-suggest-item:hover,
.local-suggest-item.active {
  background: #f5f5f5
}

.local-suggest-empty {
  padding: .5rem .75rem;
  color: #9aa0a6;
  font-style: italic
}


.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  background-color: #ccc !important;
  /* grigio chiaro */
  border-color: #ccc !important;
  color: #666 !important;
  /* testo grigio scuro */
  cursor: not-allowed !important;
  /* cursore "divieto" */
  opacity: 1 !important;
  /* opzionale: evita che diventi trasparente */
  pointer-events: auto !important;
  /* serve per mantenere il cursore anche se disabled */
}


.bs-stepper.wizard-vertical-icons.vertical .bs-stepper-header .step.crossed .avatar-initial {
  background-color: rgba(var(--bs-primary-rgb), 0.16);
  color: grey !important;

}


/* Contenitore verde per le KPI cards */
.legend-wrapper {
  background: #ecfdf5;
  /* verdino chiaro */
  border: 1px solid #bbf7d0;
  /* verde pastello */
  border-radius: 16px;
  /* arrotondato */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  height: 550px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Se vuoi padding uniforme anche per le card interne */
.legend-wrapper .card {
  border: 1px solid #d1fae5;
  /* verde ancora più tenue */
  border-radius: 12px;
  background: #ffffff;
  /* restano bianche */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  transition: transform .15s ease;
}

.legend-wrapper .card:hover {
  transform: translateY(-2px);
}


/* ----- KPI Cards ----- */

.kpi-card {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .10);
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
}

.kpi-title {
  font-size: .75rem;
  text-transform: uppercase;
  color: #6b7280;
  letter-spacing: .3px;
}

.kpi-value {
  font-weight: 800;
  font-size: 1.35rem;
  color: #111827;
}

/* ----- Legend chips ----- */
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-size: .85rem;
  cursor: pointer;
  user-select: none;
  transition: background .2s ease, opacity .2s ease;
}

.legend-chip:hover {
  background: #e5e7eb;
}

.legend-chip.is-disabled {
  opacity: .45;
  text-decoration: line-through;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Tooltip più fine su light */
.echarts-tooltip {
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08) !important;
}

/* PowerBI embed enhancements */
.powerbi-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .75rem;
  background: rgba(255, 255, 255, .92);
  border-radius: 12px;
  z-index: 2;
  transition: opacity .25s ease, visibility .25s ease;
}

.powerbi-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.powerbi-loading .loading-logo {
  width: 64px;
  height: 64px;
  animation: pbi-bounce 1.2s infinite ease-in-out;
}

.powerbi-loading .loading-text {
  color: #4b5563;
  font-weight: 600;
  letter-spacing: .02em;
}

@keyframes pbi-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.toolbar-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  width: 100%;
  background-color: var(--bs-primary);
  border-radius: 1rem;
  padding: 1.25rem .85rem;
  font-family: var(--bs-body-font-family, var(--bs-font-sans-serif, "Helvetica Neue", Arial, sans-serif));
}

@media (min-width: 1200px) {
  .toolbar-wrapper {
    flex-shrink: 0;
    max-width: 110px;
  }
}

.toolbar-wrapper button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  width: 100%;
  min-width: 0;
  text-align: center;
  white-space: normal;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

.toolbar-wrapper button:focus {
  outline: none;
}

.toolbar-wrapper button:focus-visible {
  outline: 2px solid rgba(1, 124, 191, .4);
  outline-offset: 4px;
}

.toolbar-toggle .toolbar-icon {
  background-color: rgba(255, 255, 255, .25);
  color: #fff;
}

.toolbar-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform-origin: top center;
  transition: max-height .3s ease, opacity .25s ease;
  width: 100%;
  padding-bottom: .25rem;
}

.toolbar-panel.is-open {
  max-height: 1000px;
  opacity: 1;
  overflow: visible;
}

.toolbar-wrapper .toolbar-label {
  font-size: .75rem;
  line-height: 1.1;
  font-family: inherit;
  color: rgba(255, 255, 255, .85);
}

.toolbar-toggle .toolbar-label {
  color: #fff;
  font-weight: 600;
}

.toolbar-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, .18);
  color: #fff;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
  font-size: 1.1rem;
}

.toolbar-action:hover .toolbar-icon,
.toolbar-action:focus-visible .toolbar-icon {
  background-color: rgba(255, 255, 255, .32);
  color: #fff;
  transform: translateY(-1px);
}

.toolbar-toggle:hover .toolbar-icon,
.toolbar-toggle:focus-visible .toolbar-icon {
  background-color: rgba(255, 255, 255, .32);
  color: #fff;
  transform: translateY(-1px);
}

.toolbar-action .toolbar-label {
  color: rgba(255, 255, 255, .85);
}

.toolbar-wrapper button:disabled {
  cursor: default;
}

.toolbar-wrapper button:disabled .toolbar-icon {
  background-color: rgba(255, 255, 255, .32);
  color: #fff;
  transform: translateY(0);
}

.toolbar-wrapper button:disabled .toolbar-label {
  color: rgba(255, 255, 255, .85);
}

.toolbar-wrapper button:active .toolbar-icon {
  background-color: rgba(255, 255, 255, .32);
  color: #fff;
  transform: translateY(0);
}

.toolbar-wrapper button:active .toolbar-label {
  color: rgba(255, 255, 255, .85);
}

/* ===== Wrapper & campanella ===== */
.notification-wrapper { position: relative; }

/* L’anchor fa da riferimento per il badge */
#id_notifiche_bell_a { position: relative; }

/* ===== Badge contatore ===== */
#id_notifiche_counter {
  position: absolute;
  top: 2; left: 100%;
  transform: translate(-50%, -50%); /* centra sul bordo in alto a dx */
  min-width: 20px; height: 20px; line-height: 20px;
  padding: 0 .35rem;
  font-size: .75rem;
  text-align: center;
  margin-left: -5px;
  z-index: 2;
}

/* ===== Dropdown ===== */
.notification-dropdown {
  position: absolute;
  top: calc(100% + .75rem);
  right: 0;
  width: clamp(240px, 85vw, 360px);
  border-radius: .75rem;
  box-shadow: 0 8px 24px rgba(15, 30, 50, .12);
  display: none;           /* mostrato dalla classe .show */
  z-index: 1050;
  overflow: hidden;        /* bordi puliti tra header/list/footer */
  transform: none;         /* evita trasformazioni bootstrap che spostano il menu */
}

.notification-dropdown.show { display: block; }

/* ===== Lista ===== */
.notification-list {
  max-height: 320px;
  overflow: auto;
}

/* ===== Item ===== */
.notification-item {
  display: flex;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .05));
  cursor: pointer;
  transition: background-color .2s ease;
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover {
  background-color: var(--bs-light-bg-subtle, rgba(1, 124, 191, .08));
}

/* Avatar */
.notification-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #e5f4fb;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.notification-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Contenuto */
.notification-content { flex: 1; min-width: 0; }
.notification-title {
  font-weight: 600;
  color: #0f1e32;
  line-height: 1.2;
  margin-bottom: .25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px; /* evita che tocchi un eventuale dot a destra */
}
.notification-time {
  font-size: .8125rem;
  color: var(--bs-secondary-color, #6c757d);
  display: flex; align-items: center; gap: .35rem;
}

/* Puntino “non letto” (se lo usi nel markup) */
.unread-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bs-primary, #0d6efd);
  margin-left: auto; margin-top: .35rem;
  flex-shrink: 0;
}

/* Stato vuoto */
.notification-empty {
  font-size: .875rem;
  color: var(--bs-secondary-color, #6c757d);
  padding: 2rem 1.25rem;
  text-align: center;
}

/* Dark mode friendly (se usi data-bs-theme="dark") */
html[data-bs-theme="dark"] .notification-item:hover {
  background: rgba(255,255,255,.05);
}
html[data-bs-theme="dark"] .notification-dropdown {
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}