/*******************************
 * PrimeVue 3.46 ↔ 3.53 compat
 * Caricare DOPO i tuoi CSS
 *******************************/

/* ============================
   TOGGLEBUTTON
   3.46: .p-button.p-togglebutton (root = bottone)
   3.53: .p-togglebutton (root) + [data-pc-section="box"] (bottone)
   ============================ */

/* Root comune */
.toggle-portfolio-product[data-pc-name="togglebutton"],
.toggle-portfolio-product.p-togglebutton { /* 3.46 */
  width: 100%;
  height: 4em;
}

/* Area cliccabile (il “bottone”) */
.toggle-portfolio-product [data-pc-section="box"],         /* 3.53 */
.toggle-portfolio-product.p-togglebutton.p-button {        /* 3.46 */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Stili che avevi su .p-togglebutton.p-button */
  background: #ffffff;
  border: 1px solid #ced4da;
  color: #495057;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

/* Hover non evidenziato */
.toggle-portfolio-product:not([data-p-highlight="true"]) [data-pc-section="box"]:hover, /* 3.53 */
.toggle-portfolio-product.p-togglebutton.p-button:not(.p-highlight):hover {             /* 3.46 */
  background: #e9ecef;
  border-color: #ced4da;
  color: #495057;
}

/* Icone */
.toggle-portfolio-product [data-pc-section="icon"],                       /* 3.53 */
.toggle-portfolio-product.p-togglebutton.p-button .p-button-icon-left,   /* 3.46 */
.toggle-portfolio-product.p-togglebutton.p-button .p-button-icon-right { /* 3.46 */
  color: #6c757d;
}

/* Stato evidenziato (attivo) */
.toggle-portfolio-product[data-p-highlight="true"] [data-pc-section="box"], /* 3.53 */
.toggle-portfolio-product.p-togglebutton.p-button.p-highlight {             /* 3.46 */
  background: #43c3bf;
  border-color: #43c3bf;
  color: #ffffff;
}

/* Hover su attivo */
.toggle-portfolio-product[data-p-highlight="true"] [data-pc-section="box"]:hover, /* 3.53 */
.toggle-portfolio-product.p-togglebutton.p-button.p-highlight:hover {             /* 3.46 */
  background: rgb(57.0483870968, 178.7516129032, 174.9483870968);
  border-color: rgb(57.0483870968, 178.7516129032, 174.9483870968);
  color: #ffffff;
}

/* Icone su attivo */
.toggle-portfolio-product[data-p-highlight="true"] [data-pc-section="icon"],  /* 3.53 */
.toggle-portfolio-product.p-togglebutton.p-button.p-highlight .p-button-icon-left,
.toggle-portfolio-product.p-togglebutton.p-button.p-highlight .p-button-icon-right { /* 3.46 */
  color: #ffffff;
}

/* Stato focus (anello) – applicalo al box in 3.53, al root in 3.46 */
.toggle-portfolio-product [data-pc-section="box"]:focus,        /* 3.53 */
.toggle-portfolio-product.p-togglebutton.p-button:focus {       /* 3.46 */
  outline: 0 none;
  outline-offset: 0;
  box-shadow: 0 0 0 .2rem rgb(179.8, 231, 229.4);
}

/* Stato disabled */
.toggle-portfolio-product[data-p-disabled="true"] [data-pc-section="box"], /* 3.53 */
.toggle-portfolio-product.p-togglebutton.p-button.p-disabled {             /* 3.46 */
  cursor: not-allowed;
  opacity: .6;
}

/* Stato invalid (copriamo vari possibili flag) */
.toggle-portfolio-product.p-invalid [data-pc-section="box"],
.toggle-portfolio-product[aria-invalid="true"] [data-pc-section="box"],
.toggle-portfolio-product[data-p-invalid="true"] [data-pc-section="box"],  /* 3.53 */
.toggle-portfolio-product.p-togglebutton.p-button.p-invalid {              /* 3.46 */
  border-color: #f44336;
}

/* Label (coerente tra versioni) */
.toggle-portfolio-product [data-pc-section="label"] { /* 3.53 */
  /* qui puoi mettere tipografia/spacing della label se ti servono */
}

/* Input nascosto/visibile – nessuno stile visivo (evita di “ancorarti” al ripple) */
.toggle-portfolio-product .p-ink { /* evita side effects tra versioni */}
/* ============================
   FINE TOGGLEBUTTON
   ============================ */


/* ============================
   FOCUS RING GENERICO (3.53 sezioni interne)
   Mantiene il tuo stile focus quando PrimeVue 3.53 sposta il focus
   su elementi interni (es. [data-pc-section="box"]).
   ============================ */
:where(
  [data-pc-section="box"],
  [data-pc-section="content"],
  [data-pc-section="item"],
  [data-pc-section="input"],
  .p-component /* fallback 3.46 */
):focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgb(179.8, 231, 229.4);
}

/* ============================
   PASS-THROUGH (opzionale e sicuro)
   Se in alcuni ToggleButton puoi toccare il markup, assegna PT classes:
   :pt="{ root:{class:'tp-root'}, box:{class:'tp-box'} ... }"
   Queste regole non rompono nulla se le classi non esistono.
   ============================ */
.tp-root { width: 100%; height: 4em; }
.tp-box  {
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #ced4da; color:#495057;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.tp-root[data-p-highlight="true"] .tp-box {
  background:#43c3bf; border-color:#43c3bf; color:#fff;
}
.tp-box:focus {
  outline:0; box-shadow:0 0 0 .2rem rgb(179.8, 231, 229.4);
}

/* ============================
   PICCOLE NORMALIZZAZIONI UTILI
   (non toccano i tuoi stili esistenti ma coprono i cambi data-attr)
   ============================ */

/* Checkbox/Radio – mantieni hover/focus anche se il focus arriva sul box interno in 3.53 */
.p-checkbox .p-checkbox-box:focus,
.p-radiobutton .p-radiobutton-box:focus,
:where([data-pc-name="checkbox"] [data-pc-section="box"],
       [data-pc-name="radiobutton"] [data-pc-section="box"]):focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgb(179.8, 231, 229.4);
}

/* Dropdown, MultiSelect, Cascadeselect – preserva bordo focus quando il focus è sull’input interno 3.53 */
:where(
  [data-pc-name="dropdown"],
  [data-pc-name="multiselect"],
  [data-pc-name="cascadeselect"]
).p-focus,
:where(
  [data-pc-name="dropdown"] [data-pc-section="input"],
  [data-pc-name="multiselect"] [data-pc-section="input"],
  [data-pc-name="cascadeselect"] [data-pc-section="input"]
):focus {
  box-shadow: 0 0 0 .2rem rgb(179.8, 231, 229.4);
  border-color: #43c3bf;
}

/* Data attributes nuovi per stato “attivo/evidenziato” nei list items */
:where(
  [data-pc-section="item"].p-highlight,
  [data-pc-section="item"][data-p-highlight="true"]
) {
  background:#43c3bf; color:#fff;
}

/* Hover sugli item (copre vecchi e nuovi markup) */
:where(
  .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
  .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover,
  [data-pc-section="item"]:not(.p-highlight):not(.p-disabled):hover
){
  background:#e9ecef; color:#495057;
}


div.toggle-button .p-button {
    padding: 0.2em 0.5em 0.2em 0.5em !important;
    border-radius: 1em;
}

div.toggle-button.p-highlight .p-button {
    background: #43c3bf;
    border-color: #43c3bf;
    color: #fff
}

div.toggle-button .p-button {
    background: #fff;
    border: 1px solid #ced4da;
    color: #495057;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s
}

.p-multiselect-item[data-p-highlight="true"] {
    color: #fff;
    background: #43c3bf
}

li.p-multiselect-item[data-p-highlight="true"][data-pc-section="item"] {
    color: #fff !important;
    background: #43c3bf !important;
}

.p-multiselect-item[data-p-highlight="true"] .p-checkbox .p-checkbox-box {
    border-color: #fff;
    background: #43c3bf !important;
}


.p-inputswitch.p-highlight .p-inputswitch-slider {
    background: #43c3bf;
}

.p-togglebutton[data-p-highlight="false"] .p-button {
    background: white;
    color: black
}