/* =========================================
   PSC - Client New Ticket (open.php)
   File: psc_new-ticket-client.css
   Scope: form#ticketForm (core-safe)
   ========================================= */

/* === Nasconde info client (Email/Cliente) === */
body.psc-theme.client-side form#ticketForm tr.client-deets{
  display: none !important;
}

/* === Nascondi header "Motivo della richiesta / Help Topic" + hr === */
/*body.psc-theme.client-side form#ticketForm td[colspan="2"] > hr{
  display: none !important;
}

body.psc-theme.client-side form#ticketForm td[colspan="2"] > .form-header{
  display: none !important;
}


/* === Nascondi anche Select2 === */
/*body.psc-theme.client-side form#ticketForm .select2-selection--single{
  display: none !important;
}*/

/* Titolo e sottotitolo coerenti con Register/Profile */
body.psc-theme.client-side #content > h1{
  line-height: 1.15;
  margin: 18px 0 6px;
}

body.psc-theme.client-side #content > p{
  margin: 0 0 26px;
  color: var(--color-text-secondary, #6b7280);
  font-size: 14px;
}

/* Info client (Email/Client) - restano semplici */
body.psc-theme.client-side form#ticketForm tr.client-deets td:first-child{
  font-weight: 600;
  color: var(--color-text-secondary, #6b7280);
  width: 160px;
}

/* Rimuovi look legacy (senza rompere struttura) */
body.psc-theme.client-side form#ticketForm table[width="800"]{
  width: 100% !important;
  max-width: 100%;
}

/* Nascondiamo il select come fallback accessibile quando la griglia è attiva */
body.psc-theme.client-side form#ticketForm #topicId.psc-is-enhanced{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Contenitore griglia */
body.psc-theme.client-side form#ticketForm .psc-topic-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 12px 0 22px;
}

/* Mobile */
@media (max-width: 860px){
  body.psc-theme.client-side form#ticketForm .psc-topic-grid{
    grid-template-columns: 1fr;
  }

  body.psc-theme.client-side #content {
    padding: 20px 20px 20px 20px !important;
  }
}

/* Card */
body.psc-theme.client-side form#ticketForm .psc-topic-card{
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;

  border-radius: 12px;
  padding: 30px 30px;

  /*border: 1px solid color-mix(in srgb, var(--color-accent, #22c55e) 18%, transparent);*/
  background: color-mix(in srgb, var(--color-accent, #22c55e) 8%, white);

  cursor: pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;

   min-height: 64px;
}

body.psc-theme.client-side form#ticketForm .psc-topic-card:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-accent, #22c55e) 28%, transparent);
  background: color-mix(in srgb, var(--color-accent, #22c55e) 10%, white);
}

body.psc-theme.client-side form#ticketForm .psc-topic-card[aria-current="true"]{
  border-color: color-mix(in srgb, var(--color-accent, #22c55e) 45%, transparent);
  background: color-mix(in srgb, var(--color-accent, #22c55e) 13%, white);
}

body.psc-theme.client-side form#ticketForm .psc-topic-card:focus{
  outline: 2px solid color-mix(in srgb, var(--color-accent, #22c55e) 55%, transparent);
  outline-offset: 2px;
}

/* Icon wrapper */
body.psc-theme.client-side form#ticketForm .psc-topic-card__icon{
  flex: 0 0 auto;
  width: 45px !important;
  height: 45px !important;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-right: 20px;

  /*background: color-mix(in srgb, var(--color-accent, #22c55e) 14%, white);
  border: 1px solid color-mix(in srgb, var(--color-accent, #22c55e) 22%, transparent);*/
}

/* Label */
body.psc-theme.client-side form#ticketForm .psc-topic-card__label{
    flex: 1 1 auto;
    min-width: 0;                /* fondamentale per evitare overflow in flex */
    white-space: normal;         /* wrap */
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;      /* parole lunghe */
    hyphens: auto;

    /* fondamentale per evitare overflow in flex */
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 25px */
}

body.psc-theme.client-side form#ticketForm p.buttons{
  margin-top: 18px;
}

body.psc-theme.client-side.psc-open-no-topic form#ticketForm tbody#dynamic-form{
  display: none !important;
}

body.psc-theme.client-side.psc-open-no-topic form#ticketForm p.buttons,
body.psc-theme.client-side.psc-open-no-topic form#ticketForm hr{
  display: none !important;
}

/* Pagina dedicata (con topicId): nascondi griglia */
body.psc-theme.client-side.psc-open-has-topic form#ticketForm .psc-topic-grid{
  display: none !important;
}



/* ===========================
   OPEN.PHP - PAGINA CATEGORIE
   =========================== */
body.psc-theme.client-side.psc-open-no-topic form#ticketForm td[colspan="2"] > hr{
  display: none !important;
}

body.psc-theme.client-side.psc-open-no-topic form#ticketForm td[colspan="2"] > .form-header{
  display: none !important;
}

/* Nascondi SOLO il Select2 del topic (quello sopra la griglia) */
body.psc-theme.client-side.psc-open-no-topic form#ticketForm #topicId{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Il Select2 “visibile” associato a #topicId è subito dopo il select */
body.psc-theme.client-side.psc-open-no-topic form#ticketForm #topicId + .select2{
  display: none !important;
}

/* ===========================
   OPEN.PHP - PAGINA FORM
   =========================== */




body.psc-theme.client-side.psc-open-has-topic form#ticketForm #topicId{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.psc-theme.client-side.psc-open-has-topic form#ticketForm #topicId + .select2{
  display: none !important;
}

body.psc-theme.client-side.psc-open-no-topic
form#ticketForm tr.captchaRow,
body.psc-theme.client-side.psc-open-no-topic
form#ticketForm tr.captchaRow + tr {
  display: none !important;
}

body.psc-theme.client-side .tickets-showing{
  display: block;            /* caption fuori dal flusso tabella */
  margin: 6px 0 16px;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;

  color: var(--color-text-secondary, #6b7280);
}


/* ===========================
   OPEN.PHP - PAGINA FORM DINAMICA
   =========================== */

/* DATI UTENTE*/
/* Campi utente se non sei loggato compaiono solo dopo aver selezionato il form */
body.psc-theme.client-side.psc-open-no-topic form#ticketForm > table > tbody:first-of-type{
  display: none !important;
}


body.psc-theme.client-side.open-page .psc-contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 0 0 16px 0;
}

body.psc-theme.client-side.open-page .psc-contact-item.is-header{
  grid-column: 1 / -1;
}

@media (max-width: 640px){
  body.psc-theme.client-side.open-page .psc-contact-grid{
    grid-template-columns: 1fr;
  }
}

body.psc-theme.client-side.open-page .psc-contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

body.psc-theme.client-side.open-page .psc-contact-item.is-header{
  grid-column: 1 / -1;
}

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

body.psc-theme.client-side.open-page #ticketForm div label {
  margin:0px;
}

/* =========================================================
   BANDA BIANCA E SFONDO GRIGIO
   ========================================================= */

body.psc-theme.client-side.open-page.psc-open-has-topic #content{
  position: relative;
  background: transparent !important; /* lascia vedere gli pseudo-elementi */
  margin-bottom: 0px !important;
}

/* 1) Banda bianca full-width sotto la navbar (dietro al titolo) */
body.psc-theme.client-side.open-page.psc-open-has-topic #content::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 200px;              /* <-- regola questa altezza */
  background: #fff;
  z-index: -1;
}

/* 2) Sfondo grigio full-width per TUTTA la zona del form */
body.psc-theme.client-side.open-page.psc-open-has-topic #content form#ticketForm{
  position: relative;
  z-index: 0;
  margin: 0;                  /* evita “buchi” */
  padding-bottom: 80px;       /* aria sotto al form (come vuoi) */
    padding-top: 45px;
}

body.psc-theme.client-side.open-page.psc-open-has-topic #content form#ticketForm::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--color-bg-surface-highlight, #F5F7FA);
  z-index: -1;
}

/* 3) Il titolo resta sul bianco (non serve card) */
body.psc-theme.client-side.open-page.psc-open-has-topic #content > h1{
  margin-bottom: 45px;
  background: transparent;    /* lo sfondo lo fa la banda */
}

/* =========================================================
   FINE BANDA BIANCA E SFONDO GRIGIO
   ========================================================= */


/* Scritta select centrata */
body.psc-theme.client-side.psc-open-has-topic
.select2-container--default .select2-selection--multiple{
  min-height: 44px;
  display: flex;
  align-items: center;          /* centra verticalmente il contenuto */
  padding: 0 12px;              /* padding orizzontale */
}

/* La lista interna deve essere "in linea" e centrata */
body.psc-theme.client-side.psc-open-has-topic
.select2-container--default .select2-selection--multiple .select2-selection__rendered{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

/* Input interno (quello che crea cursore + placeholder) */
body.psc-theme.client-side.psc-open-has-topic
.select2-container--default .select2-search--inline .select2-search__field{
  height: 44px !important;      /* stessa altezza del box */
  line-height: 44px !important; /* placeholder centrato */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;

  caret-color: transparent !important; /* <-- toglie il cursore lampeggiante */
}

/* Se vuoi anche evitare che compaia il focus ring blu del browser */
body.psc-theme.client-side.psc-open-has-topic
.select2-container--default .select2-search--inline .select2-search__field:focus{
  outline: none !important;
}

body.psc-theme.client-side.psc-open-has-topic form#ticketForm .form-header {
  margin-top: 20px;
  margin-bottom: 0px !important;
}

body.psc-theme.client-side.psc-open-has-topic :where(td, th)
{
  padding-top: 0px !important;
}
/* Fine Scritta select centrata */

/* =========================================================
   Client – CREATE TICKET (form#ticketForm)
   Mobile: textarea non devono sbordare
   ========================================================= */
@media (max-width: 860px){

  /* 1) Contenitori: mai oltre viewport */
  body.psc-theme.client-side form#ticketForm,
  body.psc-theme.client-side form#ticketForm table,
  body.psc-theme.client-side form#ticketForm tbody,
  body.psc-theme.client-side form#ticketForm tr,
  body.psc-theme.client-side form#ticketForm td{
    max-width: 100% !important;
  }

  /* 2) Wrapper inline che spesso forza width */
  body.psc-theme.client-side form#ticketForm label,
  body.psc-theme.client-side form#ticketForm label > span,
  body.psc-theme.client-side form#ticketForm td > span,
  body.psc-theme.client-side form#ticketForm td > span[style]{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3) Textarea: ignora cols e riempie la riga */
  body.psc-theme.client-side form#ticketForm textarea,
  body.psc-theme.client-side form#ticketForm textarea[cols]{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    resize: vertical;
  }

  /* 4) (extra) anche input/select per coerenza */
  body.psc-theme.client-side form#ticketForm input,
  body.psc-theme.client-side form#ticketForm select{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   CREATE TICKET – Mobile: evita doppio box Redactor
   (nasconde la textarea sorgente, lascia visibile l'editor)
   ========================================================= */
@media (max-width: 860px){

  /* la textarea originale di redactor */
  body.psc-theme.client-side form#ticketForm textarea.redactor-source,
  body.psc-theme.client-side form#ticketForm textarea.richtext.redactor-source{
    display: none !important;
  }

  /* l'editor deve occupare tutta la larghezza */
  body.psc-theme.client-side form#ticketForm .redactor-box,
  body.psc-theme.client-side form#ticketForm .redactor-editor,
  body.psc-theme.client-side form#ticketForm .redactor-toolbar-wrapper{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}