html{--mat-sys-background: #faf9fd;--mat-sys-error: #ba1a1a;--mat-sys-error-container: #ffdad6;--mat-sys-inverse-on-surface: #f2f0f4;--mat-sys-inverse-primary: #abc7ff;--mat-sys-inverse-surface: #2f3033;--mat-sys-on-background: #1a1b1f;--mat-sys-on-error: #ffffff;--mat-sys-on-error-container: #93000a;--mat-sys-on-primary: #ffffff;--mat-sys-on-primary-container: #00458f;--mat-sys-on-primary-fixed: #001b3f;--mat-sys-on-primary-fixed-variant: #00458f;--mat-sys-on-secondary: #ffffff;--mat-sys-on-secondary-container: #3e4759;--mat-sys-on-secondary-fixed: #131c2b;--mat-sys-on-secondary-fixed-variant: #3e4759;--mat-sys-on-surface: #1a1b1f;--mat-sys-on-surface-variant: #44474e;--mat-sys-on-tertiary: #ffffff;--mat-sys-on-tertiary-container: #0000ef;--mat-sys-on-tertiary-fixed: #00006e;--mat-sys-on-tertiary-fixed-variant: #0000ef;--mat-sys-outline: #74777f;--mat-sys-outline-variant: #c4c6d0;--mat-sys-primary: #005cbb;--mat-sys-primary-container: #d7e3ff;--mat-sys-primary-fixed: #d7e3ff;--mat-sys-primary-fixed-dim: #abc7ff;--mat-sys-scrim: #000000;--mat-sys-secondary: #565e71;--mat-sys-secondary-container: #dae2f9;--mat-sys-secondary-fixed: #dae2f9;--mat-sys-secondary-fixed-dim: #bec6dc;--mat-sys-shadow: #000000;--mat-sys-surface: #faf9fd;--mat-sys-surface-bright: #faf9fd;--mat-sys-surface-container: #efedf0;--mat-sys-surface-container-high: #e9e7eb;--mat-sys-surface-container-highest: #e3e2e6;--mat-sys-surface-container-low: #f4f3f6;--mat-sys-surface-container-lowest: #ffffff;--mat-sys-surface-dim: #dbd9dd;--mat-sys-surface-tint: #005cbb;--mat-sys-surface-variant: #e0e2ec;--mat-sys-tertiary: #343dff;--mat-sys-tertiary-container: #e0e0ff;--mat-sys-tertiary-fixed: #e0e0ff;--mat-sys-tertiary-fixed-dim: #bec2ff;--mat-sys-neutral-variant20: #2d3038;--mat-sys-neutral10: #1a1b1f}html{--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)}html{--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: 0.031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: 0.875rem;--mat-sys-body-medium-tracking: 0.016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 0.75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: 0.75rem;--mat-sys-body-small-tracking: 0.025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto;--mat-sys-display-large-font: Roboto;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -0.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;--mat-sys-display-medium-font: Roboto;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;--mat-sys-display-small-font: Roboto;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto;--mat-sys-headline-large-font: Roboto;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;--mat-sys-headline-medium-font: Roboto;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto;--mat-sys-headline-small-font: Roboto;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: 0.875rem;--mat-sys-label-large-tracking: 0.006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 0.75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: 0.75rem;--mat-sys-label-medium-tracking: 0.031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 0.688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: 0.688rem;--mat-sys-label-small-tracking: 0.031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;--mat-sys-title-large-font: Roboto;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: 0.009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: 0.875rem;--mat-sys-title-small-tracking: 0.006rem;--mat-sys-title-small-weight: 500}html{--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px}html{--mat-sys-dragged-state-layer-opacity: 0.16;--mat-sys-focus-state-layer-opacity: 0.12;--mat-sys-hover-state-layer-opacity: 0.08;--mat-sys-pressed-state-layer-opacity: 0.12}

@charset "UTF-8";
/* =========================================================
   GESTIONE DI CHI SCROLLA — styles.scss (fonte unica)
   - MOBILE  (<=768px): scorre il DOCUMENTO (html/body)
   - DESKTOP (>=769px): scorre .mat-sidenav-content / .mat-drawer-content
   - Niente “sticky killers” (overflow/transform) sui wrapper
   - Evito scroll-chaining e stabilizzo la scrollbar su desktop
   - ATTENZIONE: colori/skin del sidenav NON qui (li metto in AppComponent)
   ========================================================= */
/* ——— BASE (sempre) ——— */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch; /* inerzia iOS */
  background: #fff !important; /* status bar iOS chiara */
}

html {
  -webkit-text-size-adjust: 100%;
}

:root {
  color-scheme: light;
}

/* Wrapper Material: NON deve clippar e NON deve trasformare
   (transform crea stacking context e rompe molti sticky) */
mat-sidenav-container {
  overflow: visible !important;
  transform: none !important;
  will-change: auto !important;
}

/* Content wrappers: niente transform/sticky-killers */
.mat-sidenav-content,
.mat-drawer-content,
.cdkScrollable {
  transform: none !important;
  will-change: auto !important;
}

/* Desktop “qualità vita”: niente jump quando appare la scrollbar
   Se vuoi anche “spazio” lato sinistro/destro attorno alla barra,
   cambia in `stable both-edges`. */
@media (hover: hover) and (pointer: fine) {
  .sidenav-container .mat-sidenav-content {
    scrollbar-gutter: stable;
  }
}
/* =========================================================
   MOBILE (<= 768px) — scorre il DOCUMENTO (html/body)
   - Voglio l’header subito sotto il notch
   - Tolgo sticky-killers dai wrapper
   - Il PANNELLO del sidenav è opaco (ma il COLORE si setta in AppComponent)
   ========================================================= */
@media (max-width: 768px) {
  /* 1) Il documento è lo scroller */
  html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top, 0); /* header “attaccato” al notch */
    background: #fff;
  }
}
/* =========================================================
   DESKTOP (>= 769px) — scorre il CONTENT
   - Qui blocco html/body e faccio scorrere .mat-sidenav-content/.mat-drawer-content
   - Niente skin: il colore della sidenav sta in AppComponent
     (variabile: `--sidenav-bg-desktop`)
   ========================================================= */
@media (min-width: 769px) {
  /* 1) Il documento NON scorre (evito doppi scroll) */
  html, body {
    overflow: hidden !important;
    height: 100% !important;
  }
  /* 2) Mantengo il container a tutta viewport (utile per sticky & height) */
  .mat-sidenav-container,
  .sidenav-container {
    height: 100dvh;
  }
  /* 3) Unico scroller = content; niente padding/margini forzati qui */
  .mat-sidenav-container .mat-sidenav-content,
  .mat-sidenav-content,
  .mat-drawer-content {
    height: 100vh !important;
    height: 100dvh !important; /* preferibile su browser moderni */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable; /* se vuoi “aria” anche a sinistra: stable both-edges */
    padding: 0 !important;
  }
}
/* =========================================================
   EDGE CASES ANGULAR MATERIAL
   ========================================================= */
/* MatDialog: il CDK blocca lo scroll del body quando è aperto (giusto così) */
.cdk-global-scrollblock {
  overflow: hidden !important;
}

/* (Opzionale) Verniciatura notch iOS
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: env(safe-area-inset-top, 0px);
  background: #fff;
  pointer-events: none;
  z-index: 1100;
}
*/
/* GESTIONE DEI POP UP E COME FUNZIONANO
Quando si applica un pop up

this.dialog.open(ComponentePopup, {
  data: { ... },
  panelClass: 'mia-classe-personalizzata'
});

viene generato nel dom

<div class="cdk-overlay-container">
  <div class="cdk-overlay-backdrop"></div>  <!-- Sfondo scuro (backdrop) -->

  <div class="cdk-global-overlay-wrapper">
    <div class="cdk-overlay-pane mia-classe-personalizzata">  <!-- Classe personalizzata -->
      <mat-dialog-container class="mat-mdc-dialog-container">
        <div class="mat-mdc-dialog-inner-container">
          <div class="mat-mdc-dialog-surface">
            <!-- Contenuto del TUO componente -->
            <app-mio-popup>
              <mat-dialog-content>
                <!-- Template del TUO componente -->
              </mat-dialog-content>
            </app-mio-popup>
          </div>
        </div>
      </mat-dialog-container>
    </div>
  </div>
</div>

.cdk-overlay-container
È il contenitore "globale" creato automaticamente da Angular CDK.

Viene aggiunto direttamente al body.

Non modificarlo manualmente se non in casi eccezionali.

.cdk-overlay-backdrop
È lo sfondo che rende scuro il resto della pagina quando un popup si apre.

Può essere personalizzato con classi specifiche, se necessario.

.cdk-overlay-pane
È il pannello vero e proprio che ospita il popup.

Qui puoi aggiungere una tua classe personalizzata tramite l’opzione panelClass nel metodo .open() del popup.

Subito dopo..

mat-dialog-container
È il contenitore diretto del tuo popup.

Ha classi predefinite Angular Material come .mat-mdc-dialog-container.

Puoi personalizzare sfondi, padding, ecc. tramite il tuo CSS.


app-mio-popup
Questo è il tuo componente Angular (es: ViewOrEditDescrizioneComponent).

Qui puoi definire il tuo template personalizzato e logica TypeScript.

e nel mio pop up uso
mat-dialog-content (opzionale ma consigliato)
È un wrapper di contenuto che offre Angular Material.

Consigliato perché ha stili predefiniti (padding automatico).

*/
/*
Ora nell editor quandro apro il pop up

  // Apertura del dialog Angular Material per il componente ViewMetadata
this.dialog.open(ViewMetadata, {
  data: { urlFrontale: url, context: context },
  panelClass: 'popup-view-dialog' // Questo collega lo stile alla .cdk-overlay-pane
});
}

nel dom avro <div id="cdk-overlay-1" class="cdk-overlay-pane popup-view-dialog mat-mdc-dialog-panel" style="position: static;">

e posso modificare qui il pop up come deve essere class="cdk-overlay-pane popup-view-dialog mat-mdc-dialog-panel
e o lo faccio globalmente, o lo faccio nella classe che apre il pop up ovvero nel padre
usando ng deep, invece qua lo sto facendo globale tanto sono sicuro che la modifica impatta solo li

Quando apro un pop up di material quel bordo grigio
e delle classi base di material
.mat-mdc-dialog-container
.mdc-dialog__surface

che nel dom 

<div id="cdk-overlay-1" class="cdk-overlay-pane popup-view-dialog mat-mdc-dialog-panel" style="position: static;">
	<div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"/>
	<mat-dialog-container tabindex="-1" class="mat-mdc-dialog-container mdc-dialog cdk-dialog-container mdc-dialog--open" id="mat-mdc-dialog-1" role="dialog" aria-modal="false" style="--mat-dialog-transition-duration: 150ms;">
		<div class="mat-mdc-dialog-inner-container mdc-dialog__container">
			<div class="mat-mdc-dialog-surface mdc-dialog__surface">

      sono figli di popup-view-dialog e faccio cosi

      .cdk-overlay-pane.popup-view-dialog .mat-mdc-dialog-surface {
  background-color: #25d366 !important; // Verde acceso
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

perche uso .cdk-overlay-pane.popup-view-dialog.mat-mdc-dialog-panel {
 tutto attaccato (perche sono della stessa classe)

 .cdk-overlay-pane.popup-view-dialog .mat-mdc-dialog-surface {
qua no perche surface è il figlio

Ora se ho due pop up come faccio a dire quello va sopra l'altro ? devo incidere sull asse z 

supponiamo faccio 
this.dialog.open(PopupBComponent, {
  panelClass: 'popup-b-zindex',
});


this.dialog.open(PopupAComponent, {
  panelClass: 'popup-a-zindex',
});

.cdk-overlay-pane.popup-b-zindex {
  z-index: 1000 !important;
}

.cdk-overlay-pane.popup-a-zindex {
  z-index: 1100 !important; // Questo sarà sopra
}

A SARA SOPRA A B
non uso .cdk-overlay-pane.popup-a-zindex.mat-mdc-dialog-panel { ... }
 ma direttamente il contenitore padre

 Se a un pop up voglio assegnare un altezza larghezza ecc ho due strade, o faccio 
 this.dialog.open(ViewOrEditMetadataComponent, {
  panelClass: 'popup-view-dialog',
  width: '600px',          // oppure '80vw'
  height: '400px',         // oppure 'auto', '90vh', ecc.
  data: { ... }
});

o cosi
.cdk-overlay-pane.popup-view-dialog.mat-mdc-dialog-panel {
  width: 600px !important;      // oppure '80vw'
  height: 400px !important;     // oppure 'auto' o '90vh'
  max-height: 90vh !important;  // utile per scroll
  max-width: 95vw !important;


  In generale si fa cosi:

  ::ng-deep .cdk-overlay-pane.popup-admin-editor  lo uso per indicare una dimensione del pop up bordi ecc
    Lo stai usando per stilizzare il contenitore principale del dialog Material (quello che gestisce larghezza, altezza, bordo, ombre, posizione, z-index del popup). Questo è esattamente il posto giusto dove agire per definire:
  width, height, max-width, max-height
  padding, margin
  border-radius
  box-shadow
  z-index
  pointer-events
  top, left

  ::ng-deep .popup-admin-editor .mat-mdc-dialog-content contenuto del pop pup scrollabile ecc..


  ::ng-deep .popup-admin-editor .mat-mdc-dialog-surface per indicare la superfice se trasparente o altro 
*/
/* Overlay principale del popup con panelClass: 'popup-view-dialog' */
.cdk-overlay-pane.popup-view-dialog.mat-mdc-dialog-panel {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Superficie interna del dialog Material */
.cdk-overlay-pane.popup-view-dialog .mat-mdc-dialog-surface {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ora da qui in po mettero tutti i pop up nelle classi padre senza intaccare lo style scss quindi xon ng deep */
/* Applica a TUTTI i dialog (popup) Angular Material */
.cdk-overlay-backdrop {
  background-color: rgba(0, 0, 0, 0.7) !important;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

/* Tooltip Angular Material (MDC) – versione grande, semi-trasparente */
/* MDC (Angular Material 15+) */
.tooltip-custom.mdc-tooltip .mdc-tooltip__surface {
  background-color: rgba(17, 17, 17, 0.65); /* prima 0.85 */
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
  max-width: 420px;
  white-space: normal;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
          backdrop-filter: blur(3px) saturate(120%); /* leggero boost di leggibilità */
  /* opzionale: un filo di text-shadow per contrasto su sfondi complessi */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.tooltip-custom.mdc-tooltip .mdc-tooltip__caret-surface {
  background-color: rgba(17, 17, 17, 0.65);
}

/* Legacy (pre-MDC), se serve */
.mat-tooltip.tooltip-custom {
  background-color: rgba(17, 17, 17, 0.65);
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
  max-width: 420px;
  white-space: normal;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
          backdrop-filter: blur(3px) saturate(120%);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/*──────────────────────────────────────────────────────────────
  ANIMAZIONI
──────────────────────────────────────────────────────────────*/
@keyframes snackIn {
  0% {
    transform: translateY(-30%) scale(0.95) rotateX(15deg);
    opacity: 0;
  }
  60% {
    transform: translateY(5%) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1) rotateX(0);
    opacity: 1;
  }
}
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
  }
}
@keyframes barDrain {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
/*──────────────────────────────────────────────────────────────
  STILE BASE (mixin-like via placeholder)
──────────────────────────────────────────────────────────────*/
.snackbar-ok, .snackbar-errore {
  position: relative;
  padding: 18px 30px 22px; /* spazio extra per progress-bar */
  width: fit-content;
  max-width: 480px;
  margin: 0 auto;
  color: #fff !important;
  font: 600 15px/1.4 "Inter", sans-serif;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 14px;
  overflow: hidden; /* clip-bar & glow */
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  animation: snackIn 0.4s ease-out;
  /* effetto glow pulsante sul container intero */
  /* rimuove superficie di default Material */
  /* testo */
  /* pulsante */
}
.snackbar-ok:hover, .snackbar-errore:hover {
  animation: pulseGlow 1.2s infinite linear;
}
.snackbar-ok .mdc-snackbar__surface, .snackbar-errore .mdc-snackbar__surface,
.snackbar-ok .mat-mdc-snackbar-surface,
.snackbar-errore .mat-mdc-snackbar-surface {
  background: transparent !important;
  box-shadow: none !important;
}
.snackbar-ok .mat-mdc-snack-bar-label, .snackbar-errore .mat-mdc-snack-bar-label {
  flex: 1;
}
.snackbar-ok .mat-mdc-snack-bar-action, .snackbar-errore .mat-mdc-snack-bar-action {
  color: inherit !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.snackbar-ok .mat-mdc-snack-bar-action:hover, .snackbar-errore .mat-mdc-snack-bar-action:hover {
  transform: scale(1.08);
  opacity: 0.9;
}
.snackbar-ok .mat-mdc-snack-bar-action:active, .snackbar-errore .mat-mdc-snack-bar-action:active {
  transform: scale(0.92);
  opacity: 0.8;
}

/*──────────────────────────────────────────────────────────────
  ERRORE
──────────────────────────────────────────────────────────────*/
.snackbar-errore {
  /* sfondo con glass-gradient rosso */
  background: rgba(255, 77, 79, 0.85);
  background: linear-gradient(135deg, rgba(255, 77, 79, 0.92) 0%, rgba(205, 25, 30, 0.88) 60%, rgba(155, 15, 18, 0.9) 100%);
  /* accent bar */
}
.snackbar-errore::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(to bottom, #ff9d9f, #ff4d4f 60%, #c4171a 100%);
}
.snackbar-errore::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: currentColor;
  animation: barDrain 1s linear forwards;
}

/*──────────────────────────────────────────────────────────────
  SUCCESSO
──────────────────────────────────────────────────────────────*/
.snackbar-ok {
  background: rgba(76, 175, 80, 0.85);
  background: linear-gradient(135deg, rgba(99, 214, 103, 0.94) 0%, rgba(76, 175, 80, 0.92) 60%, rgba(56, 142, 60, 0.88) 100%);
}
.snackbar-ok::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(to bottom, #b7f7ba, #4caf50 60%, #388e3c 100%);
}
.snackbar-ok::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: currentColor;
  animation: barDrain 0.5s linear forwards;
}

/* Rimuovi state layer e ripple dai mat-icon-button */
button.mat-mdc-icon-button .mat-mdc-button-persistent-ripple,
button.mat-mdc-icon-button .mdc-icon-button__ripple::before,
button.mat-mdc-icon-button .mdc-icon-button__ripple::after {
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* Disattiva le opacità ripple via variabili MDC */
button.mat-mdc-icon-button {
  --mdc-ripple-hover-opacity: 0 !important;
  --mdc-ripple-focus-opacity: 0 !important;
  --mdc-ripple-pressed-opacity: 0 !important;
}