/*
Componenti PSC "miei": bottoni .psc-btn-*, form field PSC, layout grid PSC, footer PSC , home components, ecc.
*/

/* =========================================================
Struttura pagina
========================================================= */






/* ============================================================
HEADER
============================================================ */
body.psc-theme #header {
  height: var(--header-height) !important; /* Altezza Header di Figma */
  background: var(--color-bg-layout-header);
  color: #fff;
  z-index: 1000;
  position: relative !important;
  top: auto !important;
  padding-left: 48px;
  padding-right: 48px;
}

/* Logo sx header */
body.psc-theme #header-logo img,
body.psc-theme #header-logo svg {
  max-height: none !important;   /* rimuove il cap a 40px */
  max-width: 180px !important;   
  height: 48px !important;       
  width: auto !important;
  margin: 0px !important;
}

body.psc-theme #header-logo #left-logo {
  max-height: none !important;   /* rimuove il cap a 40px */
  max-width: 180px !important;   
  height: 48px !important;       
  width: auto !important;
  margin: 0px !important;
}



/* -- NAV -- MENU CENTRALE IN ALTO */
body.psc-theme #nav {
  order: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  float: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding: 0px !important;
  top: 0px !important;
}
body.psc-theme #nav::before {
  content: "";
  order: 1;
  flex: 1 1 0;
}
body.psc-theme #nav::after {
  content: "";
  order: 3;
  flex: 1 1 0;
}
/* Menu centrale */
body.psc-theme #nav li {
  order: 2;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
/* Icone/azpxioni a destra */
body.psc-theme #nav > a,
body.psc-theme #nav > span {
  order: 4;
  flex: 0 0 auto;
  color: #fff;

  display: inline-flex;
  align-items: center;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 135px;
}
/* Menu header - stato normale */
body.psc-theme #nav li a {
  display: inline-flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 64px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-on-brand) !important;
}
/* Menu header - stato attivo */
body.psc-theme #nav li.active a {
  font-size: 18px;
  font-weight:700;
  color: var(--color-text-on-brand);
  position: relative;
}
body.psc-theme #nav li.active a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}
/* Icon alignment */
body.psc-theme #nav svg,
body.psc-theme #nav i {
  display: block;
}
/* Safety reset: evita offset strani */
body.psc-theme #nav a,
body.psc-theme #nav span {
  position: static !important;
  top: auto !important;
}
/* Override font header menu (core osTicket) */
body.psc-theme #nav a {
  font-family: var(--font-body) !important;
  color:var(--color-text-on-brand);
}
body.psc-theme #nav.pull-right svg {
  fill:var(--color-text-on-brand); 
}
/* -- NAV -- FINE MENU CENTRALE IN ALTO */
/* ============================================================
FINE HEADER
============================================================ */







/* =========================================================
Fine Struttura pagina
========================================================= */


















body.psc-theme h1{
  color: var(--color-text-brand);
  font-family: var(--font-heading);
  font-size: 44px;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 125%; /* 55px */
  padding: 0 0;
  margin-bottom:0px;
}

body.psc-theme h1 b{
  color: var(--color-text-brand);
  font-family: var(--font-heading);
  font-size: 44px;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 125%; /* 55px */
  padding: 0 0;
  margin-bottom:0px;
}

body.psc-theme :where(a) {
  color: var(--color-primary);
  font-family: var(--font-body);
}

body.psc-theme :where(a:hover, a:focus) {
  color: var(--color-accent, var(--color-primary));
  font-family: var(--font-body);
}




/* =========================================================
   Upload File
  ========================================================= */

body.psc-theme .filedrop {
  /* layout */
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;

  /* box */
  width: 100%;
  min-height: 74px;
  padding: 18px 20px !important;
  border-radius: 14px !important;

  /* look */
  background: var(--color-bg-surface-highlight, #F5F7FA) !important;
  border: 1px dashed color-mix(in srgb, var(--color-text, #111827) 18%, transparent) !important;

  box-shadow: none !important;

  margin-top:10px;
}

body.psc-theme .filedrop .dropzone {
  border: none !important;
  background-color: var(--color-bg-surface-highlight, #F5F7FA) !important;
  display: flex;
  align-items: center;      /* ← CENTRO VERTICALE */
  gap: 12px;                /* spazio tra icona e testo */
}

/* Icona a sinistra (cerchio verde come nello screen) */
body.psc-theme .filedrop .icon-upload {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px;
  height: 38px;
  border-radius: 999px;

  background: color-mix(in srgb, var(--color-bg-surface-highlight) 14%, transparent) !important;
  color: var(--color-primary, #16a34a) !important;

  /* se l’icona è font-based */
  font-size: 18px !important;
  line-height: 1 !important;
}

body.psc-theme .filedrop i.icon-upload{
  display:inline-block;
  width:55px;
  height:55px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'%3E%3Cpath fill='%2335A660' d='M45.1739 18.5814C44.562 13.9477 40.5419 10.3366 35.75 10.3366C33.9006 10.3366 32.1234 10.8711 30.6092 11.8628C27.995 9.09737 24.3169 7.48346 20.4875 7.48346C12.7634 7.48346 6.47969 13.7672 6.47969 21.4913C6.47969 22.11 6.51406 22.6875 6.58281 23.2324C3.66438 25.288 1.89062 28.6636 1.89062 32.285C1.89062 38.4158 6.87156 43.4053 12.9937 43.4053C13.848 43.4053 14.5406 42.7127 14.5406 41.8585C14.5406 41.0042 13.848 40.3116 12.9937 40.3116C8.57828 40.3116 4.98609 36.7108 4.98609 32.2867C4.98609 29.4044 6.53984 26.7403 9.04406 25.3327C9.64391 24.9958 9.94812 24.3014 9.79172 23.6328C9.64563 23.0072 9.57516 22.3077 9.57516 21.493C9.57516 15.4756 14.4719 10.5789 20.4892 10.5789C23.8769 10.5789 27.1133 12.2031 29.15 14.9239C29.413 15.2763 29.8152 15.4997 30.2552 15.5375C30.6677 15.5616 31.1266 15.4258 31.448 15.125C32.6133 14.0319 34.1395 13.4321 35.7517 13.4321C39.2305 13.4321 42.1077 16.2491 42.1627 19.7124C42.173 20.3741 42.6027 20.955 43.2317 21.1596C47.2897 22.4761 50.0156 26.2196 50.0156 30.4803C50.0156 35.9013 45.607 40.3116 40.1844 40.3116C39.3302 40.3116 38.6375 41.0042 38.6375 41.8585C38.6375 42.7127 39.3302 43.4053 40.1844 43.4053C47.3103 43.4053 53.1111 37.6063 53.1111 30.4786C53.1094 25.2296 49.9606 20.5717 45.1739 18.5814Z'/%3E%3Cpath fill='%2335A660' d='M28.5948 24.8256C27.9898 24.2206 27.0101 24.2206 26.4068 24.8256L19.0661 32.1664C18.4611 32.7714 18.4611 33.7511 19.0661 34.3544C19.6711 34.9577 20.6507 34.9594 21.254 34.3544L25.9514 29.6553V45.9697C25.9514 46.8239 26.644 47.5166 27.4982 47.5166C28.3525 47.5166 29.0451 46.8239 29.0451 45.9697V29.6553L33.7425 34.3544C34.045 34.6569 34.4403 34.8081 34.8373 34.8081C35.2343 34.8081 35.6296 34.6569 35.9321 34.3544C36.5371 33.7494 36.5371 32.7697 35.9321 32.1664L28.5948 24.8256Z'/%3E%3C/svg%3E")!important;
}



/* Testo: compatto, allineato, senza underline strane */
body.psc-theme .filedrop {
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: color-mix(in srgb, var(--color-text, #111827) 78%, transparent) !important;
}

body.psc-theme .filedrop a.manual {
  color: var(--color-link, #1d4ed8) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body.psc-theme .filedrop a.manual:hover {
  text-decoration: underline !important;
}

/* Hover “gentile” */
body.psc-theme .filedrop:hover {
  background: var(--color-bg-surface-highlight, #F5F7FA) !important;
  border-color: color-mix(in srgb, var(--color-primary, #16a34a) 35%, transparent) !important;
}

/* Evita che qualche stile legacy aggiunga bordi/outline interni */
body.psc-theme .filedrop * {
  box-shadow: none !important;
}

/* =========================================================
   Fine Upload File
   ========================================================= */

  /* =========================================================
  Text Area
========================================================= */

body.psc-theme .redactor-toolbar-wrapper-air {
  background: #FFFFFF !important;
}

body.psc-theme .redactor-box.redactor-styles-on {
    border: 1px solid #DEDEDE !important;
    border-radius: 10px !important;
}

body.psc-theme i, i[class^="icon-"]:before{
 fill: var(--color-neutri-700) !important;
 color: var(--color-neutri-700) !important;
}


  /* =========================================================
  Fine Text Area
========================================================= */

  body.psc-theme.client-side #content p em {
    color: var(--color-neutri-700) !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    margin-top: 6px !important;
    display: inline-block !important;
  }

/* =========================================================
Evita "quadrati dentro quadrati"
========================================================= */

/* ---- 1) REDACTOR: nascondi la textarea originale quando esiste l'editor ---- */
/* Redactor di solito wrappa tutto in .redactor-box */
body.psc-theme .redactor-box textarea,
body.psc-theme textarea.richtext {
  display: none !important;
}

/* (opzionale) arrotonda il box dell'editor per matchare i tuoi input */
body.psc-theme .redactor-box {
  border-radius: 10px;
  overflow: hidden;
}










/* ---------------------------
SELECT
---------------------------- */

/* select*/
body.psc-theme select {
  display: flex;
  padding: 8px 12px !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid var(--color-border-input-primary);
  background: var(--color-primary-bg);
  height: auto;
}
/* fine select*/

/* select2 */
body.psc-theme
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
  line-height: 40px !important;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  color: var(--color-text-input-primary) !important;
}

/* Disabled */
body.psc-theme
.select2-container--default.select2-container--disabled
.select2-selection--single {
  background: var(--color-background-input-inactive) !important;
  opacity: 0.85;
}

/* Valore selezionato: nero */
body.psc-theme
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
  color: var(--color-text-input-primary) !important;
}

/* Placeholder: grigio */
body.psc-theme
.select2-container--default
.select2-selection--single
.select2-selection__rendered .select2-selection__placeholder,
body.psc-theme
.select2-container--default
.select2-selection--single
.select2-selection__placeholder {
  color: var(--color-text-input-placeholder) !important;
  opacity: 1 !important;
}

/* 1) La selection deve lasciare spazio e NON tagliare la freccia */
body.psc-theme .select2-container--default .select2-selection--single
{
   height: 40px !important;
  border: 1px solid var(--color-border-input-primary) !important;
  border-radius: 10px !important;
  background: var(--color-primary-bg) !important;
  box-sizing: border-box;
  position: relative !important;
  overflow: visible !important;          /* se era hidden, tagliava la freccia */
  padding-right: 44px !important;        /* spazio freccia */
}

/* 2) Freccia: forza presenza e dimensioni */
body.psc-theme .select2-container--default .select2-selection--single .select2-selection__arrow{
  display: block !important;
  position: absolute !important;
  right: 12px !important;
  top: 0 !important;
  height: 100% !important;
  width: 24px !important;
  pointer-events: none !important;       /* evita click “strani” */
  z-index: 3 !important;
}

/* 3) Triangolino: ricostruzione robusta */
/* reset freccia nativa */
body.psc-theme
.select2-container--default
.select2-selection--single
.select2-selection__arrow b{
  display: none !important;
}

/* contenitore freccia */
body.psc-theme
.select2-container--default
.select2-selection--single
.select2-selection__arrow{
  width: 40px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  pointer-events: none;
}

/* chevron stile Figma */
body.psc-theme
.select2-container--default
.select2-selection--single
.select2-selection__arrow::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;

  width: 8px;
  height: 8px;

  border-right: 2px solid var(--color-text-input-placeholder);
  border-bottom: 2px solid var(--color-text-input-placeholder);

  transform: translateY(-50%) rotate(45deg);
}

body.psc-theme input[type="radio"] {
  accent-color: var(--color-control-active);
}


/* ---- 2) SELECT2 MULTIPLE: togli il “quadratino” dell’input interno ---- */
body.psc-theme .select2-container--default .select2-selection--multiple {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-text, #111827) 12%, transparent);
  padding: 8px 10px;
}

/* L’input interno (quello che sembra un quadratino) */
body.psc-theme .select2-container--default .select2-search--inline .select2-search__field {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 24px;
}

/* Se vedi “bordini” anche sui tag selezionati */
body.psc-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: 0 !important;
  box-shadow: none !important;
}

   /* =========================================================
   Fine Evita Select2 e TextArea "quadrati dentro quadrati"
   ========================================================= */

   /* =========================================================
   Select2 (multi) – allinea correttamente i chip selezionati
   ========================================================= */

body.psc-theme .select2-container--default
.select2-selection--multiple{
  display: block;
  width: 100% !important;
  min-height: 44px;
  padding: 6px 10px;
  box-sizing: border-box;
}

/* La UL che contiene i chip + input: reset layout */
body.psc-theme .select2-container--default
.select2-selection--multiple .select2-selection__rendered{
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  margin: 0 !important;
  padding: 0 !important;  /* important: evita offset */
  list-style: none !important;
}

/* Chip selezionato: niente offset a sinistra */
body.psc-theme .select2-container--default
.select2-selection--multiple .select2-selection__choice{
  margin: 4px 6px 4px 0 !important; /* solo a destra */
  padding: 4px 10px !important;

  border-radius: 10px;
  border: 1px solid rgba(17,24,39,.12);
  background: #f3f4f6;

  float: none !important;          /* Select2 vecchio usa float */
  position: static !important;     /* evita left/top strani */
}

/* L’input di ricerca dentro la multi: allineato */
body.psc-theme .select2-container--default
.select2-selection--multiple .select2-search--inline{
  margin: 4px 0 !important;
}
body.psc-theme .select2-container--default
.select2-selection--multiple .select2-search--inline .select2-search__field{
  margin: 0 !important;
  width: auto !important;
  min-width: 80px;
  height: 28px;
  line-height: 28px;
}

/* In alcuni temi, la X di rimozione spinge tutto: sistemiamola */
body.psc-theme .select2-container--default
.select2-selection--multiple .select2-selection__choice__remove{
  margin-right: 6px;
  border: 0 !important;
  background: transparent !important;
}


.select2-container--default .select2-selection--multiple {
      height: 40px !important;
    border: 1px solid var(--color-border-input-primary) !important;
    border-radius: 10px !important;
    background: var(--color-primary-bg) !important;
    box-sizing: border-box;
}


/* ---------------------------
FINE SELECT
---------------------------- */