/*
Layout e pagine Staff PSC
*/

/* ---------------------------
HEADER STAFF
---------------------------- */

/* Contenitore del menu in alto al centro */
body.psc-theme #header-constrain {
    max-width: /*var(--page-max-width)*/ 100% !important;  /* OsTicket per evitare dispersione mette larghezza massima 1264px e io lo cambio */    
    display: flex;
    align-items: center;        
    justify-content: space-between; 
    height: 100%;     
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.psc-theme.staff-side #pjax-container{
  padding-top: 0 !important;
}

/* ---------------------------
FINE HEADER STAFF
---------------------------- */




/* ---------------------------
   STRUTTURA PAGINE - STAFF
---------------------------- */

/* Content base */
/* IMPORTANTISSIMO – gestisce larghezza delle pagine */
body.psc-theme.staff-side #content {
  background: var(--color-primary-bg) !important;
  width: 100% !important;
  max-width: var(--page-max-width) !important;
  min-height: 0 !important;
  margin-top: 45px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0px !important;
  padding: 0px !important;
  box-sizing: border-box;
  flex: 1 1 auto;
}

body.psc-theme.staff-side #pjax-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff !important;
  position: relative; 
}

/* Footer PSC */
body.psc-theme.staff-side .psc-footer-wrapper {
  flex: 0 0 auto;
}
/* Evita clear che aggiungono spazio */
body.psc-theme.staff-side .clear {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Linea sotto la voce selezionata "Aspetto"*/
body.psc-theme.staff-side.psc_appearance-page #nav.pull-right > li > a[href*="appearance"]::before,
body.psc-theme.staff-side.psc_appearance-page #nav.pull-right > li > a[href*="appearance"]::after {
  border: 0 !important;
}

body.psc-theme.staff-side.psc_appearance-page #nav.pull-right > li > a[href*="appearance"] {
  position: relative !important;
  border-bottom: 0 !important;
}

body.psc-theme.staff-side.psc_appearance-page #nav.pull-right > li > a[href*="appearance"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 2px;
  background: var(--color-accent) !important;
}
/* Fine Linea sotto la voce selezionata "Aspetto"*/

/* Sottomenu */

/* Questi permettono ai menu dropdown di aprirsi verso il basso e non tagliarsi */
body.psc-theme.staff-side #nav > li {
  position: relative; 
}

body.psc-theme.staff-side #nav > li > ul {
  top: 100% !important;     /* sotto al li */
  bottom: auto !important;  /* annulla aperture “verso l’alto” */
  left: 0 !important;
  margin-top: 0 !important; /* azzerato: il gap causava la perdita del hover */
  padding-top: 8px !important; /* spazio visivo spostato dentro la ul */
  border-radius: 10px !important;
}

body.psc-theme.staff-side #nav.pull-right li.inactive > ul {
  background: var(--color-bg-layout-header-hover) !important;
}

body.psc-theme.staff-side #nav.pull-right li.inactive > ul a:hover {
  color: var(--color-text-on-brand) !important;
  background: var(--color-bg-layout-header-hover) !important;
}

/* Separatore */
body.psc-theme.staff-side #nav.pull-right > li > ul > li:not(:last-child) {
  border-bottom: 3px solid var(--color-bg-layout-header);
}

/* Freccia */
body.psc-theme.staff-side #nav.pull-right > li > ul > li > a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;

  padding: 16px 44px 16px 20px !important; /* dx per freccia */
  margin: 0 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

body.psc-theme.staff-side #nav.pull-right > li > ul > li > a::after {
  content: "" !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;

  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid var(--color-text-on-brand) !important;
  border-bottom: 2px solid var(--color-text-on-brand) !important;

  transform: translateY(-50%) rotate(45deg) !important;
  pointer-events: none !important;
  opacity: 0.9 !important;
  display: block !important;
}
/* Fine Freccia*/



/* Bridge hover: copre il gap tra li e ul per non perdere il focus */
body.psc-theme.staff-side #nav > li:hover::after {
  content: ‘’;
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 8px;
  display: block;
}

body.psc-theme.staff-side .jb-overflowmenu-menu-primary div.customQ-dropdown {
  top: 100% !important;
  padding-top: 0 !important;
  background: var(--color-bg-surface-highlight) !important;
}

body.psc-theme.staff-side .jb-overflowmenu-menu-primary div.customQ-dropdown a,
body.psc-theme.staff-side .jb-overflowmenu-menu-primary div.customQ-dropdown li {
  color: var(--color-text-on-brand) !important;
}

body.psc-theme.staff-side .jb-overflowmenu-menu-primary div.customQ-dropdown ul li:not(.personalQ):hover {
  background-color: var(--color-bg-surface-highlight) !important;
}

body.psc-theme.staff-side .jb-overflowmenu-menu-primary div.customQ-dropdown ul li:hover > a {
  color: var(--color-text-on-brand) !important;
}

/* "Aggiungi vista personalizzata" */
body.psc-theme.staff-side .jb-overflowmenu-menu-primary div.customQ-dropdown .add-queue a,
body.psc-theme.staff-side .jb-overflowmenu-menu-primary div.customQ-dropdown .add-queue a span {
  color: var(--subnav-text) !important;
  opacity: 1 !important;
}

body.psc-theme.staff-side .jb-overflowmenu-menu-primary div.customQ-dropdown .add-queue a:hover {
  background-color: var(--color-bg-surface-highlight) !important;
}

body.psc-theme.staff-side .jb-overflowmenu-menu-primary div.customQ-dropdown .add-queue a:hover span {
  color: var(--subnav-text) !important;
}

/* Fine Sottomenu */
/* ---------------------------
   FINE STRUTTURA PAGINE - STAFF
---------------------------- */




/* ---------------------------
   STRUTTURA PAGINE - STAFF CON SUBNAV
---------------------------- */
/* Barra subnav: full width (sfondo + border) */
body.psc-theme #sub_nav-wrap,
body.psc-theme #sub_nav_wrap {
  background: var(--color-bg-surface-highlight) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: var(--subnav-height) !important;
}
/* Wrapper UL esterno: deve essere full width e "neutro" */
body.psc-theme #sub_nav-wrap > ul#sub_nav,
body.psc-theme #sub_nav_wrap > ul#sub_nav,
body.psc-theme #sub_nav_wrap > ul {
  max-width: var(--page-max-width) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
  height: var(--subnav-height) !important;
  background: var(--color-bg-surface-highlight) !important;
}
/* Il "container" della subnav: stesso di #content (1120 + gutter) */
/* Caso 1: c'è jb-overflowmenu */
body.psc-theme #sub_nav-wrap > ul#sub_nav > nav.jb-overflowmenu,
body.psc-theme #sub_nav_wrap > ul#sub_nav > nav.jb-overflowmenu {
  max-width: var(--page-max-width) !important;
  margin: 0 auto !important;
  /*padding: 0 var(--page-gutter-x) !important;*/
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  min-height: 56px !important;

  background: transparent !important;
  border: 0 !important;
  position: relative !important;
}



/* Caso 2: NON c'è jb-overflowmenu (sub_nav è una <ul> diretta di <li>) */
body.psc-theme #sub_nav-wrap > ul#sub_nav > ul,
body.psc-theme #sub_nav_wrap > ul#sub_nav > ul,
body.psc-theme #sub_nav_wrap > ul {
  max-width: var(--page-max-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--page-gutter-x) !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 56px !important;
}
/* Menu interno (UL di jb-overflowmenu) — resetta padding/margini “storici” */
body.psc-theme #sub_nav-wrap nav.jb-overflowmenu > ul,
body.psc-theme #sub_nav_wrap nav.jb-overflowmenu > ul,
body.psc-theme #sub_nav-wrap nav.jb-overflowmenu ul.jb-overflowmenu-menu,
body.psc-theme #sub_nav_wrap nav.jb-overflowmenu ul.jb-overflowmenu-menu {
  /*display: flex !important;*/
  align-items: center !important;
  gap: 18px !important;

  margin: 0 !important;
  /*padding: 20px !important;*/
  list-style: none !important;

  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  height: var(--subnav-height) !important;
}
/* Link subnav */
body.psc-theme #sub_nav-wrap #sub_nav a,
body.psc-theme #sub_nav_wrap #sub_nav a,
body.psc-theme #sub_nav_wrap a {
   display: inline-flex !important;
  align-items: center !important;

  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  color: var(--subnav-text, #0b0f14) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
/* Active: niente underline, solo weight */
body.psc-theme #sub_nav-wrap #sub_nav li.active > a,
body.psc-theme #sub_nav_wrap #sub_nav li.active > a,
body.psc-theme #sub_nav-wrap #sub_nav a.active,
body.psc-theme #sub_nav_wrap #sub_nav a.active {
  font-weight: 700 !important;
}
body.psc-theme #sub_nav-wrap #sub_nav li.active > a::after,
body.psc-theme #sub_nav_wrap #sub_nav li.active > a::after,
body.psc-theme #sub_nav-wrap #sub_nav a.active::after,
body.psc-theme #sub_nav_wrap #sub_nav a.active::after {
  content: none !important;
}
/* Container destro jb-overflowmenu (ellipsis/azioni) spinto a destra */
body.psc-theme #sub_nav-wrap nav.jb-overflowmenu .jb-overflowmenu-container,
body.psc-theme #sub_nav_wrap nav.jb-overflowmenu .jb-overflowmenu-container {
  margin-left: auto !important;
  background: transparent !important;
  border: 0 !important;
}
/* Se vuoi: nascondi ellipsis */
body.psc-theme #sub_nav-wrap nav.jb-overflowmenu .jb-overflowmenu-menu-secondary-handle,
body.psc-theme #sub_nav_wrap nav.jb-overflowmenu .jb-overflowmenu-menu-secondary-handle,
body.psc-theme #sub_nav-wrap nav.jb-overflowmenu .icon-ellipsis-vertical,
body.psc-theme #sub_nav_wrap nav.jb-overflowmenu .icon-ellipsis-vertical {
  display: none !important;
}
#sub_nav {
  background: var(--color-bg-surface-highlight) !important;
}


/*
* NON jb-overflowmenu
*/
/* Caso NON jb-overflowmenu: il contenuto della subnav va nella colonna pagina */
body.psc-theme #sub_nav-wrap > ul#sub_nav > :not(nav.jb-overflowmenu){
  max-width: var(--page-max-width) !important;
  /*margin-left: auto !important;*/
  /*margin-right: auto !important;*/
  /*padding-left: var(--page-gutter-x) !important;
  padding-right: var(--page-gutter-x) !important;*/
  box-sizing: border-box !important;
}


/* reset dell'UL interno solo nel caso NON jb-overflowmenu */
body.psc-theme #sub_nav-wrap > ul#sub_nav > :not(nav.jb-overflowmenu) ul{
  margin: 0 !important;
  /*padding: 20px !important;*/
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  height: var(--subnav-height) !important;
}
body.psc-theme #sub_nav-wrap > ul#sub_nav > :not(nav.jb-overflowmenu) a{
  height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  margin-left: 0px !important;

  font-family: Inter, var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--subnav-text, #0b0f14) !important;
}
body.psc-theme #sub_nav-wrap > ul#sub_nav > :not(nav.jb-overflowmenu) li.active > a,
body.psc-theme #sub_nav-wrap > ul#sub_nav > :not(nav.jb-overflowmenu) a.active{
  font-weight: 700 !important;
}
/* ---------------------------
  FINE STRUTTURA PAGINE STAFF CON SUBNAV
---------------------------- */




/* ---------------------------
TABLE
---------------------------- */

body.psc-theme.staff-side table.list {
  margin: 20px auto 0;
  border-collapse: separate !important;
  border-spacing: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
  border: 1px solid color-mix(in srgb, var(--color-text, #111827) 8%, transparent);
}

/* Header bianco */
body.psc-theme.staff-side table.list thead th{
  background: #fff !important;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 800;
  color: color-mix(in srgb, var(--color-text, #111827) 55%, #6b7280);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text, #111827) 8%, transparent);
  white-space: nowrap;
}

/* Titoli colonne */
body.psc-theme.staff-side table.list thead th a{
  color: var(--color-text-primary) !important;
  text-decoration: none;
  font-family: var(--font-body) !important;

  overflow: hidden;
  text-overflow: ellipsis;

  /* UI/Table Header */
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px; /* 112.5% */

  margin: 24px 20px 24px 20px !important;
  padding: 0 !important;

  height: auto !important;
}
body.psc-theme.staff-side table.list thead th a:hover{
  text-decoration: underline;
}

/* Celle */
body.psc-theme.staff-side table.list tbody td{
  padding: 24px 20px;
  color: var(--color-text-primary) !important;
  vertical-align: middle;
  /*text-align: center;*/
  font-family: var(--font-body);
  color: var(--color-neutri-900, #1B1B1B);
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 112.5% */
}

body.psc-theme.staff-side table.list .checkbox-cell {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

body.psc-theme.staff-side table.list tbody a{
  color: var(--color-text-primary) !important;
  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 112.5% */
}

body.psc-theme.staff-side table.list tbody a.preview{
  color: var(--color-primary-700) !important;
  font-family: var(--font-body);
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 18px; /* 112.5% */
  border:none !important;

}

body.psc-theme.staff-side table.list tbody tr:last-child td{
  border-bottom: none;
}

/* Numero ticket cliccabile */
body.psc-theme.staff-side table.list td.ticket-number a{
  color: #2563eb;
  text-decoration: none;
  font-weight: 800;
}
body.psc-theme.staff-side table.list td.ticket-number a:hover{
  text-decoration: underline;
}

body.psc-theme.staff-side table.list a.Icon.Ticket, a.Icon.emailTicket, a.Icon.phoneTicket, a.Icon.webTicket
{
  border: none !important;
}

body.psc-theme.staff-side table.list .Icon.overdueTicket
{
  display: none !important;
}

/* Oggetto: rendilo “testo link” senza comportamenti strani */
body.psc-theme.staff-side table.list td.ticket-subject .link.truncate{
  color: var(--color-text-primary) !important;
  font-weight: 600;
}

body.psc-theme.staff-side table.list tbody tr:nth-child(2n+1) td {
  background-color: var(--color-bg-surface-highlight) !important;
}

body.psc-theme.staff-side table.list span.dot {
  display: none;
}
/* =========================
   Paginazione - pageNav (usa <b>1</b> per corrente)
   ========================= */

body.psc-theme.staff-side table.list tfoot tr td{
  padding: 20px 24px;
}

/* "Pagina:" */
body.psc-theme.staff-side table.list #table-foot-options{
  letter-spacing: .01em;
}


body.psc-theme.staff-side table.list .padding-slider-container {
  display: none;
}

body.psc-theme.staff-side table.list #resize-buttons-container {
  display: none;
}

/* Link pagine */
body.psc-theme.staff-side table.list #table-foot-options a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  margin: 0 5px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-text, #111827) 10%, transparent);
  background: #fff;
  text-decoration: none;
  color: color-mix(in srgb, var(--color-text, #111827) 70%, #6b7280);
  font-weight: 800;
}

/* Pagina corrente (il tuo <b>) */
body.psc-theme.staff-side table.list #table-foot-options b{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  margin: 0 5px;
  border-radius: 10px;

  border: 2px solid color-mix(in srgb, var(--color-accent, #22c55e) 65%, transparent);
  background: #fff;
  color: color-mix(in srgb, var(--color-accent, #22c55e) 85%, #000);
  font-weight: 900;
}

/* Hover dei link */
body.psc-theme.staff-side table.list #table-foot-options a:hover{
  border-color: color-mix(in srgb, var(--color-accent, #22c55e) 45%, transparent);
}

/* Nasconde le parentesi quadre [ ] */
body.psc-theme.staff-side table.list #table-foot-options{
  font-size: 0;   /* azzera il testo: [ ] e "Pagina:" */
}

/* Ripristina il box con il numero */
body.psc-theme.staff-side table.list #table-foot-options b{
  font-size: 14px;          /* o quello che avevi */
  font-weight: 700;
  line-height: 1;

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

  min-width: 34px;
  height: 34px;
  padding: 0 10px;

  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #22c55e) 60%, transparent);

  color: color-mix(in srgb, var(--color-accent, #22c55e) 85%, #000);
  background: #fff;
}

/* icone nere */
body.psc-theme.staff-side i.icon-flag,
body.psc-theme.staff-side i.icon-search,
body.psc-theme.staff-side i.icon-user,
body.psc-theme.staff-side i.icon-fixed-width.icon-share,
body.psc-theme.staff-side i.icon-trash,
body.psc-theme.staff-side i.icon-sort-by-attributes-alt 
{
  filter: brightness(0);
}

body.psc-theme.staff-side a#tickets-transfer,
body.psc-theme.staff-side a#tasks-transfer i.icon-share,
body.psc-theme.staff-side a#ticket-transfer i.icon-share,
body.psc-theme.staff-side a.task-action i.icon-share,
body.psc-theme.staff-side a[href="#tasks/mass/transfer"] i.icon-fixed-width.icon-share { /* Tickets, Tasks = "Transfer" icon */
filter: brightness(0);
  }

body.psc-theme.staff-side .button-text.advanced-search svg
{
  fill:#000000;
}

body.psc-theme.staff-side table.list thead th a {

    /*background: url(/images/asc_desc.gif) 100% 50% no-repeat;*/
}


/* ---------------------------
FINE TABLE
---------------------------- */



/* ---------------------------
FASCIA BIANCA IN ALTO
---------------------------- */


/* Banda bianca full-width dietro al titolo+data */
body.psc-theme.staff-side.kb-page .psc-cat-title-row::before, /* Pagina Kb Macrocategorie */
body.psc-theme.staff-side.faq-page .has_bottom_border::before /* Pagina Faq */
{
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #ffffff;
}

/* Sottotitolo */
body.psc-theme.staff-side #breadcrumbs a {
    color: var(--Color-text-secondary, #595959);
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

/* Bottoni in alto a destra */
body.psc-theme.staff-side .action-button,
body.psc-theme.staff-side .action-button.muted,
body.psc-theme.staff-side .action-button .advanced-search
{
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    height: 40px !important;
    padding: 0 14px 0 14px !important;
    border: none /*1px solid var(--border-default, #d1d5db)*/ !important;
    border-radius: 10px !important;

    cursor: pointer;
    white-space: nowrap;
    box-shadow: none !important;
    position: relative !important;
    background: var(--color-bg-button-secondary) !important;
    background-color: var(--color-bg-button-secondary) !important;
    background-blend-mode: multiply !important;

    color: var(--color-text-button-secondary, #1959A6) !important;

    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
}

body.psc-theme.staff-side a.green.button {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 10px;
  background: var(--color-bg-button-primary);
  color: #FFF;
  font-family: var(--font-body) !important;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 1 !important;
  height: 40px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* Chevron – stesso stile del select2 della piattaforma */
body.psc-theme.staff-side .action-button::after:not(.advanced-search) {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-text-secondary, #9ca3af);
    border-bottom: 2px solid var(--color-text-secondary, #9ca3af);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

/* Nasconde icone originali (caret e filter) */
body.psc-theme.staff-side .action-button .icon-caret-down,
body.psc-theme.staff-side .action-button .icon-filter {
    display: none !important;
}

/* ---------------------------
FINE FASCIA BIANCA IN ALTO
---------------------------- */

/* ---------------------------
SFONDO GRIGIO IN ALTO
---------------------------- */

/* Banda highlight full-width — copre tutto (cat-desc, #faq, spazio a footer)
   Il ::before della title-row (bianco) si sovrappone correttamente grazie
   ai rispettivi stacking context isolati. */
body.psc-theme.staff-side.kb-page.kb-category-page .faq-category::before, /* Pagina Kb Macrocategorie */
body.psc-theme.staff-side.faq-page #content::before /* Pagina Faq */
 {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--color-bg-surface-highlight);
}

/* ---------------------------
FASCIA SFONDO GRIGIO
---------------------------- */




/* ========================================
   #BASIC_SEARCH: search + Ordine sulla stessa riga, a DESTRA

   Selettore doppio-ID (#content #basic_search) per battere qualsiasi regola upstream.
   Float-based: entrambi i figli float: right, DOM-first (Ordine) va all'estrema destra,
   DOM-second (form/search) va a sinistra di Ordine.
   BFC con display: flow-root evita collasso e non taglia il dropdown.

   Layout risultante:
   [.........spazio.........] [search input 🔍] [Ordine ▼]
======================================== */

body.psc-theme.staff-side #content #basic_search {
    display: flow-root !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: visible !important;
    float: none !important;
    position: static !important;
}

/* form (search): float right → si posiziona a SINISTRA di Ordine */
body.psc-theme.staff-side #content #basic_search form {
    float: right !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 44px;
}

/* div.pull-right (Ordine): già float:right, manteniamo e resettiamo height */
body.psc-theme.staff-side #content #basic_search .pull-right {
    float: right !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 44px;
    display: block !important;
}

/* .attached.input: layout interno del campo ricerca */
body.psc-theme.staff-side #content #basic_search .attached.input {
    display: flex !important;
    align-items: center !important;
    width: 250px !important;
    height: 36px !important;
    box-sizing: border-box !important;
}

body.psc-theme.staff-side #content #basic_search .attached.input input {
    flex: 1 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 34px !important;
    border-radius: 10px !important;
}


/* ============================================================
   MOBILE: tabella ticket → layout a card
   Breakpoint 760px: allineato al matchMedia nel template JS.

   Il layout label::before (pos. absolute) + padding-left: 41% è già
   gestito da osta/css/staff-mobile.css. Le label in italiano vengono
   da osta/css/staff-mobile.css (linee ~3152-3164).

   Qui aggiungiamo SOLO:
   • card visual styling sul tr
   • label.wrapper block (default: inline → causa overflow)
   • reset strisce PSC (nth-child bg) troppo specifico per OSTA
   • colori priorità
============================================================ */
@media only screen and (max-width: 760px) {

    /* label.wrapper (iniettato dal JS) deve essere block, non inline */
    body.psc-theme table.list.queue.tickets tbody tr label.wrapper {
        display: block !important;
    }

    /* tr = card */
    body.psc-theme table.list.queue.tickets tbody tr {
        background: #ffffff !important;
        border-radius: 12px !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07) !important;
        overflow: hidden !important;
    }

    /* Reset strisce alternate PSC: il selettore PSC è più specifico di OSTA,
       quindi sovrascriveva il background trasparente di OSTA */
    body.psc-theme.staff-side table.list.queue.tickets tbody tr:nth-child(2n+1) td {
        background-color: transparent !important;
    }

    /* Indicatore priorità: bordo sinistro colorato */
    body.psc-theme table.list.queue.tickets tbody tr.priority-high     { border-left: 3px solid #f59e0b !important; }
    body.psc-theme table.list.queue.tickets tbody tr.priority-emerency { border-left: 3px solid #ef4444 !important; }
}