/** * Portale client — open.php, view.php, login.php, tickets.php (lista loggata) e auth tickets-page * (accesso a tickets.php senza sessione). Schede #check-ticket: vetro, campi bianchi / testo scuro. * body.tickets-page:not(:has(#check-ticket)): stesso fondo / #content di open-view. * Stile allineato a client-index-glass (vetro scuro, contrasto, responsive). * Solo presentazione: non altera markup né logica osTicket. */ body.client-side.open-page, body.client-side.view-page, body.client-side.login-page, body.client-side.fiscal-calendar-page, body.client-side.guides-page, body.client-side.interventi-client-page, body.client-side.tickets-page:has(#check-ticket), body.client-side.tickets-page:not(:has(#check-ticket)) { --glass-bg: rgba(28, 45, 72, 0.88); --glass-bg-strong: rgba(34, 54, 82, 0.92); --glass-border: rgba(255, 255, 255, 0.42); --glass-border-soft: rgba(255, 255, 255, 0.22); --glass-shadow: 0 20px 56px rgba(0, 6, 20, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; --glass-blur: 20px; --glass-text: #f8fafc; --glass-text-muted: rgba(248, 250, 252, 0.92); --glass-text-label: #ffffff; --glass-accent: #a8dcff; --glass-accent-hover: #cfefff; --glass-field-bg: #ffffff; --glass-field-text: #0f172a; --glass-field-border: rgba(15, 23, 42, 0.22); --glass-field-placeholder: #64748b; --glass-radius: 22px; --glass-radius-sm: 14px; /* Larghezza comune: hint sopra + griglia #check-ticket (login / view / tickets guest) */ --glass-portal-login-stack-w: 960px; --glass-font-sans: "Montserrat", "Open Sans", system-ui, -apple-system, sans-serif; --glass-font-display: "Montserrat", Georgia, "Times New Roman", serif; /* Allineato all’index: ~15px base su desktop 1920×1080, rem leggermente più compatti */ font-size: 15px; min-height: 100vh; color: var(--glass-text); background-color: #070f1a; background-image: radial-gradient(ellipse 100% 80% at 8% 12%, rgba(38, 120, 220, 0.42), transparent 58%), radial-gradient(ellipse 80% 70% at 92% 8%, rgba(130, 90, 240, 0.22), transparent 52%), radial-gradient(ellipse 70% 55% at 48% 96%, rgba(0, 170, 165, 0.14), transparent 48%), linear-gradient(168deg, #0a1628 0%, #0e1b2e 38%, #121f33 100%); background-attachment: scroll; } body.client-side.open-page::before, body.client-side.view-page::before, body.client-side.login-page::before, body.client-side.fiscal-calendar-page::before, body.client-side.guides-page::before, body.client-side.interventi-client-page::before, body.client-side.tickets-page:has(#check-ticket)::before, body.client-side.tickets-page:not(:has(#check-ticket))::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.28; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E"); } body.client-side.open-page #container, body.client-side.view-page #container, body.client-side.login-page #container, body.client-side.fiscal-calendar-page #container, body.client-side.guides-page #container, body.client-side.interventi-client-page #container, body.client-side.tickets-page:has(#check-ticket) #container, body.client-side.tickets-page:not(:has(#check-ticket)) #container { position: relative; z-index: 1; } body.client-side.open-page #content, body.client-side.view-page #content, body.client-side.login-page #content, body.client-side.guides-page #content, body.client-side.interventi-client-page #content { position: relative; z-index: 1; max-width: 1180px; margin-left: auto !important; margin-right: auto !important; padding: 1.25rem clamp(1rem, 3vw, 2rem) 2.5rem !important; background: transparent !important; box-shadow: none !important; border: none !important; overflow: visible !important; border-radius: 0 !important; } /* * Calendario fiscale: stesso schema dei ticket — niente shorthand su padding-top. * Altrimenti questo file (caricato dopo client-portal-mobile) azzera l’offset per * #header / #nav-wrapper fixed e il contenuto finisce sotto la chrome. */ body.client-side.fiscal-calendar-page #content { position: relative; z-index: 1; max-width: 1180px; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(1rem, 3vw, 2rem) !important; padding-right: clamp(1rem, 3vw, 2rem) !important; padding-bottom: 2.5rem !important; padding-top: 1.25rem !important; background: transparent !important; box-shadow: none !important; border: none !important; overflow: visible !important; border-radius: 0 !important; } @media screen and (max-width: 768px) { body.client-side.fiscal-calendar-page #content { padding-top: calc( env(safe-area-inset-top, 0px) + clamp(6.85rem, 28vw, 9.25rem) + 10px ) !important; padding-left: max(12px, env(safe-area-inset-left, 0px)) !important; padding-right: max(12px, env(safe-area-inset-right, 0px)) !important; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important; } } @media screen and (min-width: 769px) and (max-width: 1024px) { body.client-side.fiscal-calendar-page #content { padding-top: calc( var(--portal-fixed-header-below-safe, 66px) + var(--portal-nav-strip-h, 50px) + env(safe-area-inset-top, 0px) + 12px ) !important; padding-left: max(12px, env(safe-area-inset-left, 0px)) !important; padding-right: max(12px, env(safe-area-inset-right, 0px)) !important; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important; } } /* Ticket: niente shorthand padding-top — client-portal-mobile tiene #header fisso fino a 1024px */ body.client-side.tickets-page:has(#check-ticket) #content, body.client-side.tickets-page:not(:has(#check-ticket)) #content { position: relative; z-index: 1; max-width: 1180px; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(1rem, 3vw, 2rem) !important; padding-right: clamp(1rem, 3vw, 2rem) !important; padding-bottom: 2.5rem !important; padding-top: 1.25rem !important; background: transparent !important; box-shadow: none !important; border: none !important; overflow: visible !important; border-radius: 0 !important; } /* --------------------------------------------------------------------------- * tickets.php?id=... (cliente loggato) — view ticket: rendi #ticketInfo e thread * coerenti col tema liquid glass (evita testo chiaro su box bianchi legacy). * ------------------------------------------------------------------------ */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo { width: 100% !important; max-width: 1180px !important; margin: 0 auto 1.25rem !important; border-collapse: separate !important; border-spacing: 0 !important; /* client-desktop.css imposta background bianco su .tickets-page #ticketInfo */ background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } /* view.inc.php: — larghezza CSS batte l'attributo; max-width resta 1180px sopra */ body.client-side.tickets-page:not(:has(#check-ticket)) table#ticketInfo { width: 100% !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo > tbody > tr > td { vertical-align: top; padding: 0.65rem 0.5rem !important; } /* Tabella 4 colonne (pair): niente fessura tra le due headline del thead */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair { border-spacing: 0 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: linear-gradient( 180deg, rgba(18, 34, 56, 0.72) 0%, rgba(18, 34, 56, 0.58) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: var(--glass-radius-sm) !important; box-shadow: 0 18px 56px rgba(0, 6, 20, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(175%) !important; backdrop-filter: blur(var(--glass-blur)) saturate(175%) !important; overflow: hidden; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo .headline { background: transparent !important; color: rgba(226, 232, 240, 0.92) !important; font-weight: 800 !important; letter-spacing: 0.01em; padding: 0.65rem 0.75rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo td { border: none !important; padding: 0.5rem 0.75rem !important; vertical-align: top !important; } /* Etichetta (th) vs valore (td): contrasto cromatico + tipografia */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo th { /*color: rgba(148, 163, 184, 0.96) !important;*/ font-weight: 600 !important; font-size: 0.78rem !important; line-height: 1.35 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; white-space: normal !important; background: rgba(255, 255, 255, 0.045) !important; border-left: 3px solid rgba(56, 189, 248, 0.55) !important; padding-left: calc(0.75rem - 3px) !important; width: 10rem; max-width: min(10rem, 38%); -webkit-font-smoothing: antialiased; } /* Due blocchi affiancati sulla stessa riga: 4 colonne, niente larghezze fisse da tabella 2-col */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair th { width: auto !important; max-width: none !important; } /* infoTable-pair — colore etichette + titoli sezione (sfondo invariato) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair tbody th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline.headline-pair-right { color: #d8ecff !important; -webkit-font-smoothing: antialiased; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo td { color: rgba(248, 250, 252, 0.98) !important; font-weight: 500 !important; font-size: 0.9375rem !important; line-height: 1.45 !important; background: transparent !important; -webkit-font-smoothing: antialiased; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo tr + tr th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.06) !important; } /* Tablet + desktop (≥601px): titoli infoTable-pair centrati nella cella (≤600px: marchiotto-additions) */ @media screen and (min-width: 601px) { body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline.headline-pair-right { text-align: center !important; vertical-align: middle !important; } } /* Desktop (≥1025px): due card affiancate a tutta larghezza, header e righe più curati */ @media screen and (min-width: 1025px) { body.client-side.tickets-page:not(:has(#check-ticket)) table#ticketInfo { table-layout: fixed !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo > tbody > tr:first-child > td { width: 50% !important; max-width: none !important; vertical-align: top !important; padding: 0 1rem 0 0 !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo > tbody > tr:first-child > td + td { padding: 0 0 0 1rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo > tbody > tr:not(:first-child) > td { padding-top: 1rem !important; padding-left: 0 !important; padding-right: 0 !important; } /* Titolo card (infoTable + custom-data) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable:not(.infoTable-pair) thead .headline, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data .headline { background: linear-gradient( 135deg, rgba(36, 62, 98, 0.82) 0%, rgba(18, 34, 56, 0.72) 55%, rgba(12, 26, 48, 0.68) 100% ) !important; color: rgba(248, 250, 252, 0.98) !important; font-size: clamp(0.98rem, 1.05vw, 1.08rem) !important; font-weight: 700 !important; letter-spacing: -0.015em !important; text-transform: none !important; padding: 0.95rem 1.1rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 0 !important; -webkit-font-smoothing: antialiased; } /* Due titoli affiancati: stesso gradiente continuo, solo un divisore centrale */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline:first-child { border-right: 1px solid rgba(255, 255, 255, 0.14) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline.headline-pair-right { border-left: none !important; box-shadow: none !important; } /* * Pair: un solo strato di gradiente su thead > tr (le td restano trasparenti). * Evita la sensazione di “due scatole” e il salto cromatico al confine tra le celle. */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead tr { background-image: linear-gradient( 135deg, rgba(36, 62, 98, 0.82) 0%, rgba(18, 34, 56, 0.72) 55%, rgba(12, 26, 48, 0.68) 100% ) !important; background-color: transparent !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline.headline-pair-right { background: transparent !important; background-image: none !important; box-shadow: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data { border-radius: var(--glass-radius-sm) !important; min-height: 0 !important; } /* Etichette: niente maiuscolo “gridato”, niente barra azzurra per riga */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable:not(.infoTable-pair) th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data th { width: 38% !important; max-width: none !important; min-width: 10.5rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data th { font-size: 0.8125rem !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0.01em !important; color: rgba(186, 201, 222, 0.96) !important; background: transparent !important; border-left: none !important; padding: 0.72rem 1.05rem !important; vertical-align: middle !important; white-space: normal !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable td:not(.headline), body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data td:not(.headline) { font-size: 1rem !important; font-weight: 500 !important; line-height: 1.5 !important; padding: 0.72rem 1.05rem !important; vertical-align: middle !important; color: rgba(248, 250, 252, 0.98) !important; } /* Righe dati: zebra leggero (infoTable ha thead + tbody implicito) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable tbody tr:nth-child(odd) th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.03) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable tbody tr:nth-child(even) th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.055) !important; } /* custom-data: prima riga = titolo */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data tr:not(:first-child):nth-child(even) th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data tr:not(:first-child):nth-child(even) td { background: rgba(255, 255, 255, 0.03) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data tr:not(:first-child):nth-child(odd) th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data tr:not(:first-child):nth-child(odd) td { background: rgba(255, 255, 255, 0.055) !important; } /* infoTable-pair: colore etichette + headline su desktop */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair tbody th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline.headline-pair-right { color: #d8ecff !important; } } /* Tablet: barra doppia headline (pair) — gradiente unico sulla riga, celle trasparenti */ @media screen and (min-width: 601px) and (max-width: 1024px) { body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead tr { background-image: linear-gradient( 135deg, rgba(36, 62, 98, 0.82) 0%, rgba(18, 34, 56, 0.72) 55%, rgba(12, 26, 48, 0.68) 100% ) !important; background-color: transparent !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline.headline-pair-right { background: transparent !important; background-image: none !important; box-shadow: none !important; color: #d8ecff !important; font-size: clamp(0.92rem, 1.15vw, 1.02rem) !important; font-weight: 700 !important; letter-spacing: -0.015em !important; text-transform: none !important; padding: 0.85rem 1rem !important; /*border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;*/ border-radius: 0 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable-pair thead td.headline:first-child { /*border-right: 1px solid rgba(255, 255, 255, 0.14) !important; */ } } /* Numero ticket in h1 — bianco (batte client-desktop) */ body.client-side.tickets-page:not(:has(#check-ticket)) #content > h1:not(#tickets-title) small, body.client-side.tickets-page:not(:has(#check-ticket)) h1:not(#tickets-title) small { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } /* Header azioni (stampa / edit): compatto, icona allineata al testo */ body.client-side.tickets-page:not(:has(#check-ticket)) h1 .action-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; background: rgba(12, 28, 52, 0.55) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 999px !important; box-shadow: 0 10px 30px rgba(0, 8, 22, 0.28) !important; font-size: 0.78rem !important; font-weight: 600 !important; line-height: 1.2 !important; padding: 0.42rem 0.85rem !important; min-height: 38px !important; box-sizing: border-box !important; } /* Icone SVG su (svg.css): non usare em legati al font piccolo del bottone — restavano ~14px e sgranavano */ body.client-side.tickets-page:not(:has(#check-ticket)) h1 .action-button i[class^="icon-"] { display: inline-block !important; flex-shrink: 0 !important; float: none !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; margin: 0 !important; line-height: 1 !important; vertical-align: middle !important; background-size: 20px 20px !important; background-position: center !important; background-repeat: no-repeat !important; filter: brightness(0) invert(1); opacity: 0.92; } body.client-side.tickets-page:not(:has(#check-ticket)) h1 .action-button:hover i[class^="icon-"], body.client-side.tickets-page:not(:has(#check-ticket)) h1 .action-button:focus-visible i[class^="icon-"] { opacity: 1; filter: brightness(0) invert(1); } body.client-side.tickets-page:not(:has(#check-ticket)) h1 .action-button:hover, body.client-side.tickets-page:not(:has(#check-ticket)) h1 .action-button:focus-visible { background: rgba(26, 111, 212, 0.35) !important; border-color: rgba(168, 220, 255, 0.38) !important; } /* Thread: card glass + timeline (template client: niente #thread-items — rail su #ticketThread::before) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread { /* Offset orizzontale connettori pill ↔ rail (theme: rail a ~74px) */ --portal-thread-rail-x: 74px; --portal-thread-event-indent: 74px; /* Inset rail = padding #ticketThread così il dotted non entra sopra/sotto le card */ --mp-thread-rail-inset-top: 0.35rem; --mp-thread-rail-inset-bottom: 0.85rem; position: relative; z-index: 0; max-width: 1180px; margin: 0 auto; padding: 0.35rem 0 0.85rem; box-sizing: border-box; } /* * Stesso schema del theme (#ticketThread::before in assets/default/css/theme.css): * box a tutta area + margin-left + solo border-left dotted; z-index -1 dietro le card. */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread::before { content: "" !important; position: absolute; border-left: 2px dotted #ddd !important; border-bottom-color: rgba(0, 0, 0, 0.1) !important; margin-left: 74px !important; z-index: -1 !important; top: var(--mp-thread-rail-inset-top) !important; /* bottom: var(--mp-thread-rail-inset-bottom) !important; */ right: 0 !important; left: 0 !important; pointer-events: none; } /* Se in futuro esiste #thread-items (preview / altro), evita doppia linea */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread #thread-items { position: relative; z-index: 0; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread #thread-items::before { content: none !important; display: none !important; border: 0 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event::before { content: ""; position: absolute; right: 100%; top: 50%; width: max(0px, calc(var(--portal-thread-event-indent) - var(--portal-thread-rail-x))); margin-right: 0.35rem; border-top: 2px solid rgba(255, 255, 255, 0.26); transform: translateY(-50%); pointer-events: none; z-index: 0; } body.client-side.tickets-page:not(:has(#check-ticket)) form#reply::before { content: ""; display: block; width: 100%; margin: 0.35rem 0 1rem; border-top: 1px solid rgba(255, 255, 255, 0.22); } /* * Ticket chiuso e non riapribile (#msg_warning.mp-ticket-warn--closed-locked): * la rail verticale resta visibile ma non prolunga la coda fino al fondo / border-bottom. * (Il ::before è position:absolute; theme + client: top + bottom:0 → altezza piena #ticketThread.) */ body.client-side.tickets-page:not(:has(#check-ticket)):has(#msg_warning.mp-ticket-warn--closed-locked) #ticketThread { /* Più basso = rail più lunga; troppo basso = coda verso l’avviso chiuso */ --mp-thread-rail-bottom-cut: 2.1rem; border-bottom: none !important; padding-bottom: 0.35rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)):has(#msg_warning.mp-ticket-warn--closed-locked) #ticketThread::before { bottom: calc(var(--mp-thread-rail-inset-bottom, 0.85rem) + var(--mp-thread-rail-bottom-cut, 2.1rem)) !important; height: auto !important; content: "" !important; display: block !important; visibility: visible !important; border-left: 2px dotted rgba(221, 221, 221, 0.88) !important; } body.client-side.tickets-page:not(:has(#check-ticket)):has(#msg_warning.mp-ticket-warn--closed-locked) #ticketThread + .clear { padding-bottom: 0 !important; min-height: 0 !important; } /* Colonna unica: chip eventi + messaggi in ordine DOM (niente affiancamento inline-flex) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread > strong { display: block !important; width: 100% !important; max-width: 100% !important; align-self: stretch !important; box-sizing: border-box !important; } /* Qualsiasi profondità (es. #ticketThread > strong > #thread-entry-…) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread [id^="thread-entry-"] { align-self: stretch !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Thread events (azioni timeline): render modern liquid-glass */ /* staff-desktop.css forza width/float sulla description e allarga la pill — qui serve !important */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event { position: relative; z-index: 1; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0.55rem; width: fit-content !important; max-width: 100%; margin: 0 0 14px 60px !important; padding: 0.5rem 0.75rem !important; border-radius: 14px; float: none !important; overflow: visible !important; clear: both !important; background: linear-gradient( 180deg, rgba(18, 34, 56, 0.62) 0%, rgba(10, 22, 40, 0.48) 100% ); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 14px 38px rgba(0, 6, 20, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; /* niente backdrop-filter: la rail #ticketThread::before è dietro e finisce nel campionamento */ -webkit-backdrop-filter: none; backdrop-filter: none; color: rgba(236, 244, 255, 0.92); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.action { background: linear-gradient( 180deg, rgba(20, 44, 78, 0.66) 0%, rgba(10, 26, 48, 0.52) 100% ); border-color: rgba(168, 220, 255, 0.22); } /* Colore bolla per tipo evento (state); stessa specificità di .action così vince l’ordine sotto */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--created { background: linear-gradient(180deg, rgba(7, 70, 72, 0.55) 0%, rgba(6, 30, 44, 0.42) 100%); border-color: rgba(45, 212, 191, 0.28); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--closed { background: linear-gradient(180deg, rgba(38, 34, 90, 0.55) 0%, rgba(18, 16, 56, 0.42) 100%); border-color: rgba(99, 102, 241, 0.28); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--self-resolved { background: linear-gradient( 180deg, rgba(18, 116, 79, 0.58) 0%, rgba(10, 72, 50, 0.50) 100% ); border-color: rgba(74, 222, 128, 0.46); box-shadow: 0 10px 24px rgba(8, 74, 52, 0.34), 0 0 0 1px rgba(187, 247, 208, 0.12) inset, 0 0 16px rgba(34, 197, 94, 0.14); color: rgba(236, 253, 245, 0.98); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--self-resolved .type-icon { background: rgba(74, 222, 128, 0.17) !important; border-color: rgba(134, 239, 172, 0.42) !important; color: rgba(236, 253, 245, 0.98) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--self-resolved .description { color: rgba(236, 253, 245, 0.98) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--self-resolved .description strong { color: #ffffff; font-weight: 650; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--reopened { background: linear-gradient(180deg, rgba(12, 54, 40, 0.52) 0%, rgba(8, 32, 28, 0.40) 100%); border-color: rgba(52, 211, 153, 0.30); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--edited { background: linear-gradient(180deg, rgba(78, 60, 12, 0.48) 0%, rgba(40, 28, 8, 0.36) 100%); border-color: rgba(234, 179, 8, 0.30); } /* Presa in carico: arancio/rosso molto visibile (attenzione positiva) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--assigned { background: linear-gradient( 180deg, rgba(185, 55, 15, 0.62) 0%, rgba(110, 28, 12, 0.52) 100% ); border-color: rgba(251, 146, 60, 0.55); box-shadow: 0 12px 32px rgba(124, 28, 8, 0.45), 0 0 0 1px rgba(255, 200, 150, 0.12) inset, 0 0 24px rgba(249, 115, 22, 0.22); color: rgba(255, 247, 237, 0.98); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--assigned .type-icon { background: rgba(255, 120, 50, 0.18) !important; border-color: rgba(253, 186, 116, 0.45) !important; color: rgba(255, 237, 213, 0.98) !important; } /* .faded sul imposta #666 (theme): riallinea al vetro arancio della chip */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--assigned .type-icon i, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--assigned .type-icon i.faded { color: rgba(255, 230, 200, 0.98) !important; opacity: 1 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--assigned .type-icon i::before { opacity: 1 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--assigned .type-icon i[class*="icon-"] { font-size: 1.15rem !important; line-height: 1 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--assigned .description { color: rgba(255, 247, 237, 0.98) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--assigned .description strong { color: rgba(255, 255, 255, 0.98); font-weight: 650; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--transferred, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--referred { background: linear-gradient(180deg, rgba(20, 52, 88, 0.52) 0%, rgba(12, 28, 52, 0.38) 100%); border-color: rgba(56, 189, 248, 0.26); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--collab { background: linear-gradient(180deg, rgba(48, 32, 88, 0.50) 0%, rgba(22, 16, 48, 0.38) 100%); border-color: rgba(167, 139, 250, 0.26); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--overdue { background: linear-gradient(180deg, rgba(80, 28, 24, 0.48) 0%, rgba(44, 16, 14, 0.36) 100%); border-color: rgba(248, 113, 113, 0.28); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--merged, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--linked, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event.thread-event--unlinked { background: linear-gradient(180deg, rgba(30, 38, 66, 0.50) 0%, rgba(14, 20, 40, 0.38) 100%); border-color: rgba(148, 163, 184, 0.26); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event .type-icon { float: none !important; position: relative !important; left: auto !important; top: auto !important; flex: 0 0 auto; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: rgba(236, 244, 255, 0.92) !important; border-radius: 12px !important; padding: 0.35rem 0.55rem !important; margin: 0 !important; vertical-align: middle !important; } /* Rimuovi il riquadro bianco legacy dietro l'icona evento */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event .type-icon::after { content: none !important; display: none !important; border: 0 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event .description { color: rgba(236, 244, 255, 0.92) !important; opacity: 1 !important; width: max-content !important; max-width: 100% !important; min-width: 0 !important; flex: 0 1 auto !important; margin: 0 !important; padding: 0 !important; margin-top: 0 !important; padding-top: 0 !important; padding-left: 0 !important; float: none !important; display: block !important; line-height: 1.35 !important; align-self: center !important; white-space: normal !important; overflow-wrap: anywhere; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry { position: relative; z-index: 1; width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; --thread-accent: rgba(148, 163, 184, 0.65); --thread-header-bg: rgba(8, 16, 28, 0.55); /* Sfondo più distintivo per tipo (cliente/assistenza/nota) */ --thread-bg1: rgba(28, 45, 72, 0.90); --thread-bg2: rgba(18, 30, 54, 0.72); --thread-sheen: rgba(255, 255, 255, 0.06); background: radial-gradient(120% 90% at 12% 18%, var(--thread-sheen) 0%, rgba(255, 255, 255, 0.00) 55%), linear-gradient(180deg, var(--thread-bg1) 0%, var(--thread-bg2) 100%) !important; border: 1px solid var(--glass-border-soft) !important; border-left: 6px solid var(--thread-accent) !important; border-radius: var(--glass-radius-sm) !important; box-shadow: 0 22px 64px rgba(0, 6, 20, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 0 22px rgba(148, 163, 184, 0.10) !important; /* niente backdrop-filter: la rail #ticketThread::before finirebbe nel campionamento */ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: hidden; } /* scp.css aggiunge linee bianche via .thread-entry::before/::after — rimuovi nel portale client */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry::before, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry::after { content: none !important; display: none !important; border: 0 !important; } /* Differenziazione mittente: cliente vs tecnico (coerente col glass) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry.message { /* Cliente — Opzione A (teal office-friendly) */ --thread-accent: rgba(45, 212, 191, 0.92); --thread-header-bg: rgba(5, 28, 34, 0.64); --thread-bg1: rgba(7, 70, 72, 0.78); --thread-bg2: rgba(6, 30, 44, 0.70); --thread-sheen: rgba(153, 246, 228, 0.14); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry.response { /* Assistenza — Opzione A (indigo office-friendly) */ --thread-accent: rgba(99, 102, 241, 0.92); --thread-header-bg: rgba(18, 14, 56, 0.60); --thread-bg1: rgba(38, 34, 110, 0.78); --thread-bg2: rgba(18, 16, 64, 0.70); --thread-sheen: rgba(199, 210, 254, 0.14); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry.note { /* Nota — Opzione A (gold soft office-friendly) */ --thread-accent: rgba(234, 179, 8, 0.92); --thread-header-bg: rgba(40, 26, 8, 0.56); --thread-bg1: rgba(78, 60, 12, 0.72); --thread-bg2: rgba(40, 28, 8, 0.66); --thread-sheen: rgba(254, 240, 138, 0.14); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .header { background: linear-gradient( 180deg, var(--thread-header-bg) 0%, rgba(8, 16, 28, 0.40) 100% ) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; padding: 0.85rem 1.1rem !important; } /* Badge tipo (più marcato) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .header { position: relative; } /* Sostituito: badge con nome reale utente (in markup) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry.message .header::after, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry.response .header::after, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry.note .header::after { content: none !important; display: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .portal-thread-poster-badge { position: absolute; right: 1.05rem; top: 50%; padding: 0.32rem 0.78rem; border-radius: 999px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.015em; /* Forza contrasto: la regola .header * mette testo chiaro con !important */ color: rgba(7, 10, 18, 0.98) !important; -webkit-text-fill-color: rgba(7, 10, 18, 0.98) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); /* Base neutra (sarà sovrascritta per tipo con tinta coerente) */ background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.58); box-shadow: 0 22px 56px rgba(0, 6, 20, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.34) inset, 0 0 22px rgba(168, 220, 255, 0.14); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); max-width: min(26rem, 62%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); } /* Ancora più specifico: batte .thread-entry .header * { color: ... !important } */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .header .portal-thread-poster-badge { color: rgba(7, 10, 18, 0.98) !important; -webkit-text-fill-color: rgba(7, 10, 18, 0.98) !important; opacity: 1 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .portal-thread-poster-badge::after { content: none !important; display: none !important; } /* Tint badge leggermente diverso per tipo */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry.message .portal-thread-poster-badge { /* Coerente col thread cliente (teal) */ background: linear-gradient(180deg, rgba(228, 255, 250, 0.98), rgba(150, 255, 235, 0.94)); border-color: rgba(45, 212, 191, 0.45); box-shadow: 0 22px 56px rgba(0, 6, 20, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.30) inset, 0 0 24px rgba(45, 212, 191, 0.22); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry.response .portal-thread-poster-badge { /* Coerente col thread assistenza (indigo) */ background: linear-gradient(180deg, rgba(242, 243, 255, 0.98), rgba(202, 206, 255, 0.94)); border-color: rgba(99, 102, 241, 0.45); box-shadow: 0 22px 56px rgba(0, 6, 20, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.30) inset, 0 0 24px rgba(99, 102, 241, 0.20); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry.note .portal-thread-poster-badge { /* Coerente col thread nota (gold) */ background: linear-gradient(180deg, rgba(255, 252, 240, 0.98), rgba(255, 231, 170, 0.94)); border-color: rgba(234, 179, 8, 0.48); box-shadow: 0 22px 56px rgba(0, 6, 20, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.30) inset, 0 0 24px rgba(234, 179, 8, 0.20); } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .header, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .header * { color: rgba(248, 250, 252, 0.96) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body * { color: rgba(236, 244, 255, 0.96) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body a:not(.button) { color: var(--glass-accent) !important; } /* thread.css imposta .thread-body { background:#fff; color:#333 } → override per glass */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body { background: transparent !important; color: rgba(236, 244, 255, 0.96) !important; opacity: 1 !important; /* Allinea larghezza e “peso” al box header */ padding: 1rem 1.1rem !important; margin: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; display: block !important; border: none !important; outline: none !important; box-shadow: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body p, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body div, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body li { opacity: 1 !important; } /* Evita "blocco piccolo dentro blocco grande": il wrapper del body deve espandersi */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body > div { width: 100% !important; max-width: none !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; } /* Se il contenuto HTML del messaggio porta background/border inline, neutralizza nel dettaglio ticket */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body * { box-shadow: none; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body code, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body pre { background: rgba(2, 8, 18, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: rgba(248, 250, 252, 0.96) !important; } /* Banner messaggi (warning / notice / error) nel dettaglio ticket: evita sovrapposizioni */ body.client-side.tickets-page:not(:has(#check-ticket)) #msg_warning, body.client-side.tickets-page:not(:has(#check-ticket)) #msg_notice, body.client-side.tickets-page:not(:has(#check-ticket)) #msg_error, body.client-side.tickets-page:not(:has(#check-ticket)) #msg_info { position: relative !important; z-index: 2 !important; /* Spazio di respiro rispetto al thread / separatori */ margin-top: 1.65rem !important; margin-bottom: 1.4rem !important; } /* msg_warning: look liquid glass (warning) */ body.client-side.tickets-page:not(:has(#check-ticket)) #msg_warning { padding: 0.9rem 1.1rem !important; border-radius: var(--glass-radius-sm) !important; color: rgba(15, 23, 42, 0.96) !important; background: linear-gradient(180deg, rgba(255, 246, 226, 0.94), rgba(255, 230, 188, 0.92)) !important; border: 1px solid rgba(255, 255, 255, 0.55) !important; box-shadow: 0 18px 46px rgba(0, 6, 20, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.35) inset !important; max-width: 1180px; margin-left: auto; margin-right: auto; } body.client-side.tickets-page:not(:has(#check-ticket)) #msg_warning::before { content: ""; position: absolute; left: 10px; top: 14%; bottom: 14%; width: 7px; border-radius: 999px; background: linear-gradient(180deg, rgba(251, 191, 36, 0.98), rgba(245, 158, 11, 0.96)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38) inset, 0 0 16px rgba(245, 158, 11, 0.35); pointer-events: none; } body.client-side.tickets-page:not(:has(#check-ticket)) #msg_warning { padding-left: calc(1.1rem + 12px) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread { padding-bottom: 1rem; } /* Tablet/smartphone: niente colonne fisse legacy (330/290px) — infoTable a tutta larghezza sezione */ @media screen and (max-width: 1024px) { body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo { max-width: 100% !important; } body.client-side.tickets-page:not(:has(#check-ticket)) table#ticketInfo, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo > tbody, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo > tbody > tr { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Batte client-mobile.css: table#ticketInfo tr { display: table } */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo tr { /* display: block !important; */ width: 100% !important; max-width: 100% !important; } /* Batte attributi HTML width="800" e td width="50%" */ body.client-side.tickets-page:not(:has(#check-ticket)) table#ticketInfo { width: 100% !important; max-width: 100% !important; min-width: 0 !important; table-layout: fixed !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo > tbody > tr > td, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo td#infoTable1, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo td#infoTable2, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo td#infoTable3 { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; box-sizing: border-box !important; padding: 0.5rem 0 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } } /* Tablet+smartphone: badge autore non utile, libera spazio */ @media screen and (max-width: 1024px) { body.client-side:is(.tickets-page, .view-page) #ticketThread .portal-thread-poster-badge, body.client-side:is(.tickets-page, .view-page) #ticketThread .thread-entry .header .portal-thread-poster-badge { display: none !important; } body.client-side #msg_warning { font-size: 0.9rem !important; line-height: 1.4 !important; } body.client-side #msg_warning * { font-size: inherit !important; line-height: inherit !important; } /* Titoli portale: centrati e proporzionati su tablet / smartphone (escluso titolo auth unificato) */ body.client-side:is(.view-page, .login-page) h1:not(.glass-portal-auth-title), body.client-side.tickets-page:has(#check-ticket) h1:not(.glass-portal-auth-title), body.client-side.open-page:has(#check-ticket) h1:not(.glass-portal-auth-title) { text-align: center !important; text-wrap: balance; max-width: min(920px, 94vw); margin-left: auto !important; margin-right: auto !important; padding-left: max(0.65rem, env(safe-area-inset-left, 0px)); padding-right: max(0.65rem, env(safe-area-inset-right, 0px)); box-sizing: border-box; font-size: clamp(1.12rem, 2.65vw, 1.58rem) !important; line-height: 1.22 !important; } } /* Tablet: titolo ticket centrato e più compatto */ @media screen and (max-width: 1024px) and (min-width: 769px) { body.client-side.tickets-page:not(:has(#check-ticket)) h1 { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; text-wrap: balance; gap: 0.45rem !important; line-height: 1.28 !important; padding-left: max(0.65rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(0.65rem, env(safe-area-inset-right, 0px)) !important; font-size: clamp(1.1rem, 2.35vw, 1.48rem) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) h1 > b { width: 100% !important; text-align: center !important; min-width: 0 !important; word-break: break-word; overflow-wrap: anywhere; } body.client-side.tickets-page:not(:has(#check-ticket)) h1 .pull-right { float: none !important; width: 100% !important; max-width: min(640px, 100%) !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.5rem !important; margin-top: 0.35rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) h1 .action-button { flex: 0 1 auto !important; min-width: min(120px, 36vw) !important; } } /* Vista ticket su smartphone: leggibilità e niente overflow orizzontale */ @media screen and (max-width: 768px) { body.client-side.tickets-page:not(:has(#check-ticket)) #content { max-width: 100% !important; width: 100% !important; padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important; box-sizing: border-box !important; overflow-x: clip; -webkit-overflow-scrolling: touch; } body.client-side.tickets-page:not(:has(#check-ticket)) { font-size: 16px; } body.client-side.tickets-page:not(:has(#check-ticket)) h1 { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; text-align: center !important; text-wrap: balance; gap: 0.45rem !important; line-height: 1.28 !important; padding-left: max(0.5rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(0.5rem, env(safe-area-inset-right, 0px)) !important; font-size: clamp(1rem, 4vw, 1.28rem) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) h1 > b { flex: none !important; width: 100% !important; text-align: center !important; min-width: 0 !important; word-break: break-word; overflow-wrap: anywhere; } body.client-side.tickets-page:not(:has(#check-ticket)) h1 .pull-right { float: none !important; width: 100% !important; max-width: min(560px, 100%) !important; display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; justify-content: center !important; margin-top: 0.35rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) h1 .action-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 calc(50% - 0.35rem) !important; min-width: max(44px, min(140px, 42vw)) !important; min-height: 44px !important; max-width: 100% !important; text-align: center !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo { display: block !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo > tbody > tr { display: block !important; width: 100% !important; } /* Batte client-mobile float su th/td delle infoTable (esclusa infoTable-pair: layout grid in marchiotto-additions) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable:not(.infoTable-pair) th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable:not(.infoTable-pair) td, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data td { float: none !important; width: 100% !important; max-width: 100% !important; display: block !important; text-align: left !important; box-sizing: border-box !important; word-break: break-word; overflow-wrap: anywhere; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable:not(.infoTable-pair) th, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data th { padding-bottom: 0.2rem !important; margin-bottom: 0; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable:not(.infoTable-pair) td, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data td { padding-top: 0.1rem !important; padding-bottom: 0.75rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.infoTable:not(.infoTable-pair) tr, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketInfo table.custom-data tr { display: block !important; width: 100% !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread { max-width: 100% !important; width: 100% !important; min-width: 0 !important; overflow-x: clip; --portal-thread-rail-x: 74px; --portal-thread-event-indent: 74px; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread::before { margin-left: 22px !important; } /* Timeline mobile: variabili su #ticketThread (il client non usa #thread-items) */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event { margin-left: 12px !important; margin-right: 0 !important; max-width: calc(100% - 0.5rem) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event .description { width: auto !important; max-width: 100% !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .header { display: block !important; padding: 0.75rem 0.85rem !important; overflow: visible !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .header .pull-right { float: none !important; display: block !important; width: 100% !important; text-align: right !important; margin-bottom: 0.35rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .portal-thread-poster-badge { display: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .portal-thread-poster-badge::after { display: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .header .title { display: block !important; max-width: 100% !important; margin-top: 0.35rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body { padding: 0.85rem 0.85rem !important; font-size: 0.95rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body img, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body table { max-width: 100% !important; height: auto !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #msg_warning, body.client-side.tickets-page:not(:has(#check-ticket)) #msg_notice, body.client-side.tickets-page:not(:has(#check-ticket)) #msg_error, body.client-side.tickets-page:not(:has(#check-ticket)) #msg_info { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply { max-width: 100% !important; box-sizing: border-box !important; padding: clamp(0.85rem, 3vw, 1.05rem) max(0.45rem, env(safe-area-inset-left, 0px)) 1rem max(0.45rem, env(safe-area-inset-right, 0px)) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply textarea, body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="text"], body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="email"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-height: 44px; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply textarea#message:not(.redactor-source) { min-height: 160px; font-size: 16px !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .reply-actions { flex-direction: column !important; align-items: stretch !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="submit"], body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="reset"], body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="button"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .reply-actions__tail { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; width: 100% !important; max-width: 100% !important; gap: 0.5rem !important; align-items: stretch !important; justify-content: stretch !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .reply-actions__tail input[type="button"], body.client-side.tickets-page:not(:has(#check-ticket)) #reply .reply-actions__tail button.reply-actions__self-resolved { flex: 1 1 calc(50% - 0.25rem) !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; } body.client-side #msg_warning { font-size: 0.8125rem !important; line-height: 1.34 !important; } } /* * Tablet 901–1024: header + nav fixed (client-portal-mobile). * 601–900: nav nel drawer → offset solo sotto header. */ @media screen and (min-width: 901px) and (max-width: 1024px) { body.client-side.tickets-page:not(:has(#check-ticket)) #content { padding-top: calc(48px + 36px + env(safe-area-inset-top, 0px) + 10px) !important; } } @media screen and (min-width: 601px) and (max-width: 900px) { body.client-side.tickets-page:not(:has(#check-ticket)) #content { padding-top: calc( var(--portal-fixed-header-below-safe, 66px) + env(safe-area-inset-top, 0px) + 12px ) !important; } } @media screen and (min-width: 601px) and (max-width: 1024px) { body.client-side.tickets-page:has(#check-ticket) #content { padding-top: calc(clamp(5.75rem, 32vw, 9rem) + env(safe-area-inset-top, 0px)) !important; } } /* * Smartphone: lista ticket — meno vuoto sopra al menubar; stesso offset sicuro sotto header vetro * (clamp leggermente più basso + 6px gap). Guest / check-ticket: riserva invariata. */ @media screen and (max-width: 600px) { body.client-side.tickets-page:not(:has(#check-ticket)) #content { padding-top: calc(env(safe-area-inset-top, 0px) + clamp(6.05rem, 24vw, 7.85rem) + 6px) !important; } body.client-side.tickets-page:has(#check-ticket) #content { padding-top: calc(env(safe-area-inset-top, 0px) + clamp(6.85rem, 28vw, 9.25rem)) !important; } } /* Titoli: battere h1/h2 tema (#475260) — escluso .glass-portal-auth-title (regola dedicata sotto) */ body.client-side.open-page h1:not(.glass-portal-auth-title), body.client-side.view-page h1:not(.glass-portal-auth-title), body.client-side.login-page h1:not(.glass-portal-auth-title), body.client-side.tickets-page:has(#check-ticket) h1:not(.glass-portal-auth-title), body.client-side.tickets-page:not(:has(#check-ticket)) h1:not(.glass-portal-auth-title) { font-family: var(--glass-font-display); color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 700 !important; font-size: clamp(1.28rem, 2.6vw, 1.72rem) !important; line-height: 1.2 !important; margin: 0 0 1rem !important; background: none !important; text-shadow: 0 2px 16px rgba(0, 10, 24, 0.35); } /* * Titolo accesso (login.inc + accesslink): stessa scala visiva di open.php — “Apri un ticket” * (body.client-side.open-page #content > h1) così il passaggio open → login non salta gerarchia tipografica. */ body.client-side #content > h1.glass-portal-auth-title:first-of-type { box-sizing: border-box !important; width: 100%; max-width: min(920px, 94vw); margin: 0 auto 1rem !important; padding-left: max(0.65rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(0.65rem, env(safe-area-inset-right, 0px)) !important; text-align: center !important; text-wrap: balance; font-family: var(--glass-font-display) !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important; letter-spacing: -0.02em !important; font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important; line-height: 1.2 !important; text-shadow: 0 2px 20px rgba(0, 12, 28, 0.55) !important; } body.client-side.open-page #content > p:first-of-type:not(.glass-portal-hint), body.client-side.view-page .subtitle + *:not(.glass-portal-hint), body.client-side.open-page #content > p:not(.glass-portal-hint) { color: var(--glass-text-muted) !important; font-size: clamp(0.93rem, 1.45vw, 1rem); line-height: 1.65; font-weight: 500; max-width: min(960px, 94vw); margin-left: auto; margin-right: auto; } body.client-side.open-page #content > p:not(.glass-portal-hint) { color: rgba(236, 244, 255, 0.96) !important; } /* open.php (cliente loggato): titolo, incipit e hint — contrasto e larghezza utili come in home hero */ body.client-side.open-page #content > h1:first-of-type, body.client-side.open-page h1 { text-align: center !important; text-wrap: balance; letter-spacing: -0.02em; font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important; text-shadow: 0 2px 20px rgba(0, 12, 28, 0.55) !important; } body.client-side.open-page #content > p:first-of-type { text-align: center !important; text-wrap: balance; max-width: 100% !important; width: 100%; font-weight: 600 !important; font-size: clamp(0.98rem, 1.35vw, 1.06rem) !important; line-height: 1.62 !important; color: rgba(240, 248, 255, 0.98) !important; } /* open.php (loggato): titolo, lead, hint e guida — stessa colonna centrata del form (960px) */ body.client-side.open-page .portal-open-stack { --glass-portal-gap: clamp(1rem, 3vw, 1.5rem); box-sizing: border-box !important; width: 100% !important; max-width: min(var(--glass-portal-login-stack-w, 960px), 100%) !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: var(--glass-portal-gap) !important; } body.client-side.open-page .portal-open-stack .portal-open-page-heading { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 0 1rem !important; padding: 0 !important; text-align: center !important; text-wrap: balance; font-family: var(--glass-font-display) !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important; background-color: transparent !important; letter-spacing: -0.02em !important; font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important; line-height: 1.2 !important; text-shadow: 0 2px 20px rgba(0, 12, 28, 0.55) !important; } body.client-side.open-page .portal-open-stack .portal-open-stack__lead { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 0 1rem !important; padding: 0 !important; text-align: center !important; text-wrap: balance; font-weight: 600 !important; font-size: clamp(0.98rem, 1.35vw, 1.06rem) !important; line-height: 1.62 !important; color: rgba(240, 248, 255, 0.98) !important; } body.client-side.view-page .subtitle, body.client-side.login-page .subtitle, body.client-side.open-page .subtitle, body.client-side.tickets-page:has(#check-ticket) .subtitle { color: var(--glass-text-muted) !important; font-size: clamp(0.93rem, 1.45vw, 1rem) !important; line-height: 1.65 !important; font-weight: 500 !important; text-align: center !important; max-width: min(var(--glass-portal-login-stack-w, 960px), 100%) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 1rem !important; box-sizing: border-box !important; } /* Specificità #content > p.glass-portal-hint: batte #content > p su open-page e .subtitle + * su view-page */ body.client-side.view-page #content > p.glass-portal-hint, body.client-side.login-page #content > p.glass-portal-hint, body.client-side.open-page #content > p.glass-portal-hint, body.client-side.open-page .portal-open-stack .glass-portal-hint, body.client-side.tickets-page:has(#check-ticket) #content > p.glass-portal-hint, body.client-side.tickets-page:not(:has(#check-ticket)) #content > p.glass-portal-hint { position: relative; isolation: isolate; contain: paint; box-sizing: border-box !important; max-width: min(var(--glass-portal-login-stack-w, 960px), 100%) !important; width: 100% !important; margin: 0 auto 1.75rem !important; padding: clamp(0.95rem, 2.2vw, 1.1rem) clamp(1.05rem, 2.4vw, 1.25rem) !important; text-align: center !important; text-wrap: balance; font-family: var(--glass-font-sans) !important; font-size: clamp(0.88rem, 1.35vw, 0.94rem) !important; line-height: 1.62 !important; color: rgba(248, 250, 252, 0.94) !important; font-weight: 500 !important; -webkit-font-smoothing: antialiased; background: linear-gradient( 165deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(12, 28, 52, 0.72) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: var(--glass-radius) !important; box-shadow: var(--glass-shadow) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(175%); backdrop-filter: blur(var(--glass-blur)) saturate(175%); } body.client-side.view-page #content > p.glass-portal-hint strong, body.client-side.login-page #content > p.glass-portal-hint strong, body.client-side.open-page #content > p.glass-portal-hint strong, body.client-side.open-page .portal-open-stack .glass-portal-hint strong, body.client-side.tickets-page:has(#check-ticket) #content > p.glass-portal-hint strong, body.client-side.tickets-page:not(:has(#check-ticket)) #content > p.glass-portal-hint strong { color: #ffffff !important; font-weight: 700 !important; } /* open.php: hint intro ticket — leggermente più grande del login (stesso stack del lead) */ body.client-side.open-page .portal-open-stack .glass-portal-hint { font-size: clamp(0.94rem, 1.45vw, 1rem) !important; } /* open.php: guida accordion — stessa skin del banner interventi fatturabili */ body.client-side.open-page .portal-open-stack .mp-guide--open-ticket { border: 1.5px solid rgba(250, 204, 21, 0.85) !important; background: linear-gradient( 165deg, rgba(254, 240, 138, 0.32) 0%, rgba(245, 158, 11, 0.26) 48%, rgba(146, 64, 14, 0.42) 100% ) !important; box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.28) inset, 0 0 22px rgba(245, 158, 11, 0.38), 0 6px 18px rgba(69, 26, 3, 0.28) !important; } body.client-side.open-page .portal-open-stack .mp-guide--open-ticket summary { background: transparent !important; border-bottom: 1px solid rgba(250, 204, 21, 0.42) !important; box-shadow: none !important; color: #fef9c3 !important; } body.client-side.open-page .portal-open-stack .mp-guide--open-ticket:not([open]) summary { border-bottom: none !important; } body.client-side.open-page .portal-open-stack .mp-guide--open-ticket summary:hover { background: rgba(245, 158, 11, 0.14) !important; box-shadow: none !important; } body.client-side.open-page .portal-open-stack .mp-guide--open-ticket[open] summary { border-bottom-color: rgba(250, 204, 21, 0.38) !important; } body.client-side.open-page .portal-open-stack .mp-guide--open-ticket summary::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23facc15' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") !important; } body.client-side.open-page .portal-open-stack .mp-guide--open-ticket summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23facc15' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") !important; } body.client-side.open-page .portal-open-stack .mp-guide--open-ticket .mp-guide__body { padding: 0.75rem 1.25rem 1.15rem calc(1.25rem + 32px + 1rem) !important; border-top: none !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; color: #fef9c3 !important; } body.client-side.open-page .portal-open-stack .mp-guide--open-ticket .mp-guide__body p:first-child { color: #fef9c3 !important; } body.client-side.open-page .portal-open-stack .mp-guide--open-ticket .mp-guide__body li strong { color: #fde047 !important; } @media screen and (max-width: 600px) { body.client-side.open-page .portal-open-stack .mp-guide--open-ticket .mp-guide__body { padding: 0.75rem 1.25rem 1.15rem 1.25rem !important; } } @media (prefers-reduced-transparency: reduce) { body.client-side.open-page .portal-open-stack .mp-guide--open-ticket { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(120, 53, 15, 0.88) !important; } } /* Dettaglio ticket: hint sopra h1 — margine verso il titolo (marchiotto sez. 22) */ body.client-side.tickets-page:not(:has(#check-ticket)) #content > p.glass-portal-hint { margin-bottom: 2rem !important; } @media screen and (max-width: 600px) { body.client-side.tickets-page:not(:has(#check-ticket)) #content > p.glass-portal-hint { margin-bottom: 1.5rem !important; } } @media (prefers-reduced-transparency: reduce) { body.client-side.view-page #content > p.glass-portal-hint, body.client-side.login-page #content > p.glass-portal-hint, body.client-side.open-page #content > p.glass-portal-hint, body.client-side.open-page .portal-open-stack .glass-portal-hint, body.client-side.tickets-page:has(#check-ticket) #content > p.glass-portal-hint, body.client-side.tickets-page:not(:has(#check-ticket)) #content > p.glass-portal-hint { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(16, 32, 56, 0.94) !important; } } body.client-side.view-page .subtitle a, body.client-side.login-page .subtitle a, body.client-side.open-page .subtitle a, body.client-side.tickets-page:has(#check-ticket) .subtitle a { color: var(--glass-accent) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; } body.client-side.view-page .subtitle b, body.client-side.login-page .subtitle b, body.client-side.open-page .subtitle b, body.client-side.tickets-page:has(#check-ticket) .subtitle b { color: #ffffff !important; font-weight: 700; } /* Form nuovo ticket — open.php: stesso linguaggio del login (campi bianchi, focus blu), testi ad alto contrasto */ body.client-side.open-page #ticketForm { display: block; box-sizing: border-box !important; width: 100% !important; max-width: min(var(--glass-portal-login-stack-w, 960px), 100%) !important; margin-top: 0.5rem; margin-left: auto !important; margin-right: auto !important; padding: clamp(1.25rem, 3vw, 1.85rem); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); --open-field-bg: #ffffff; --open-field-text: #0f172a; --open-field-border: rgba(15, 23, 42, 0.22); --open-field-placeholder: #64748b; --open-field-radius: 16px; --open-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.42); --open-input-pad-x: 2.25rem; } /* Banner “centro chiuso” inserito dopo il primo campo dinamico (open.php) */ body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__support-closed-cell { padding-top: 0.5rem !important; vertical-align: top; } body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__support-closed-cell .mp-pending-banner { margin: 0.25rem 0 0; max-width: 100%; box-sizing: border-box; } /* Banner tariffazione oraria — sopra il campo messaggio (Redactor) */ body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__billable-notice-cell { padding-top: 0.35rem !important; padding-bottom: 0.15rem !important; vertical-align: top; } body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__billable-notice-cell .mp-pending-banner { margin: 0.15rem 0 0.65rem; max-width: 100%; box-sizing: border-box; } body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__billable-notice-cell .mp-open-ticket__billable-banner { border-color: rgba(250, 204, 21, 0.85) !important; background: linear-gradient( 165deg, rgba(254, 240, 138, 0.32) 0%, rgba(245, 158, 11, 0.26) 48%, rgba(146, 64, 14, 0.42) 100% ) !important; box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.28) inset, 0 0 22px rgba(245, 158, 11, 0.38), 0 6px 18px rgba(69, 26, 3, 0.28) !important; } body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__billable-notice-cell .mp-open-ticket__billable-banner .mp-pending-banner__icon svg { fill: #facc15 !important; } body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__billable-notice-cell .mp-open-ticket__billable-banner .mp-pending-banner__body, body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__billable-notice-cell .mp-open-ticket__billable-banner .mp-pending-banner__body strong { color: #fef9c3 !important; } body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__billable-notice-cell .mp-open-ticket__billable-banner .mp-pending-banner__body strong { color: #fde047 !important; } body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__advance-notice-cell { padding-top: 0.35rem !important; padding-bottom: 0.15rem !important; vertical-align: top; } body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__advance-notice-cell .mp-support-advance-notices-wrap { margin: 0.15rem 0 0.35rem; } body.client-side.open-page #ticketForm #dynamic-form .mp-open-ticket__advance-notice-cell .mp-support-advance-notices__item .mp-pending-banner { margin: 0; max-width: 100%; box-sizing: border-box; } /* Risposta ticket (tickets.php?id=): stesso involucro vetro e token “campo chiaro” di open.php */ body.client-side.tickets-page:not(:has(#check-ticket)) #reply { display: block; margin-top: 1.25rem; padding: clamp(1.25rem, 3vw, 1.85rem); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); --open-field-bg: #ffffff; --open-field-text: #0f172a; --open-field-border: rgba(15, 23, 42, 0.22); --open-field-placeholder: #64748b; --open-field-radius: 16px; --open-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.42); --open-input-pad-x: 2.25rem; max-width: 100%; box-sizing: border-box; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply h2 { color: #ffffff !important; font-family: var(--glass-font-display); font-weight: 700 !important; font-size: clamp(1.05rem, 1.4vw, 1.18rem) !important; margin: 0 0 0.65rem !important; line-height: 1.3 !important; background: none !important; -webkit-text-fill-color: #ffffff !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply > div > p, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .reply-intro { color: rgba(224, 234, 250, 0.95) !important; font-size: 0.92rem !important; line-height: 1.58 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply p em { color: rgba(210, 224, 242, 0.94) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply font.error, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .error:not(input):not(select):not(textarea) { color: #fecaca !important; font-weight: 600 !important; background: transparent !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply font.error:before { content: none !important; display: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .warning-banner { background: rgba(251, 191, 36, 0.15) !important; border: 1px solid rgba(251, 191, 36, 0.45) !important; color: #fef3c7 !important; padding: 0.75rem 1rem !important; border-radius: var(--open-field-radius) !important; margin: 0.75rem 0 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply > p:last-of-type, body.client-side.tickets-page:not(:has(#check-ticket)) #reply p.reply-actions { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; justify-content: center !important; align-items: center !important; margin-top: 1.25rem !important; padding-top: 0.5rem !important; text-align: center !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="submit"], body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="reset"], body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="button"] { margin: 0 !important; padding: 0.7rem 1.35rem !important; min-height: 48px !important; border-radius: var(--open-field-radius) !important; font-weight: 700 !important; font-size: 0.95rem !important; cursor: pointer; border: 1px solid rgba(140, 200, 255, 0.55) !important; background: linear-gradient(155deg, #1a6fd4 0%, #2b4fd8 48%, #3d6ae0 100%) !important; color: #fff !important; box-shadow: 0 4px 0 rgba(5, 40, 90, 0.45), 0 8px 20px rgba(0, 40, 100, 0.28) !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="reset"] { background: linear-gradient( 155deg, rgba(255, 247, 237, 0.95) 0%, rgba(254, 243, 199, 0.88) 52%, rgba(253, 230, 138, 0.8) 100% ) !important; color: #7c2d12 !important; border-color: rgba(251, 191, 36, 0.52) !important; box-shadow: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="button"] { background: linear-gradient( 155deg, rgba(241, 245, 249, 0.95) 0%, rgba(226, 232, 240, 0.88) 52%, rgba(203, 213, 225, 0.8) 100% ) !important; color: #0f172a !important; border-color: rgba(148, 163, 184, 0.55) !important; box-shadow: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="reset"]:hover { filter: brightness(1.03); border-color: rgba(245, 158, 11, 0.66) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="button"]:hover { filter: brightness(1.03); border-color: rgba(100, 116, 139, 0.65) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="reset"]:focus-visible { outline: 2px solid rgba(251, 191, 36, 0.9); outline-offset: 2px; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply input[type="button"]:focus-visible { outline: 2px solid rgba(148, 163, 184, 0.95); outline-offset: 2px; } /* Annulla + «risolto in autonomia» affiancati (stile come Annulla, verde chiaro sul secondo) */ body.client-side.tickets-page:not(:has(#check-ticket)) #reply .reply-actions__tail { display: inline-flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; align-items: center !important; justify-content: center !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply button.reply-actions__self-resolved { margin: 0 !important; padding: 0.7rem 1.35rem !important; min-height: 48px !important; border-radius: var(--open-field-radius) !important; font-weight: 700 !important; font-size: 0.95rem !important; font-family: var(--glass-font-sans) !important; line-height: 1.25 !important; cursor: pointer; -webkit-appearance: none; appearance: none; border: 1px solid rgba(134, 239, 172, 0.45) !important; background: linear-gradient( 155deg, rgba(240, 253, 244, 0.95) 0%, rgba(220, 252, 231, 0.9) 42%, rgba(187, 247, 208, 0.82) 100% ) !important; color: #14532d !important; box-shadow: none !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply button.reply-actions__self-resolved:hover { filter: brightness(1.04); border-color: rgba(74, 222, 128, 0.65) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply button.reply-actions__self-resolved:focus-visible { outline: 2px solid rgba(134, 239, 172, 0.85); outline-offset: 2px; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply button.reply-actions__self-resolved:active { filter: brightness(0.98); } @media (prefers-reduced-transparency: reduce) { body.client-side.tickets-page:not(:has(#check-ticket)) #reply button.reply-actions__self-resolved { background: #dcfce7 !important; } } /* Solo textarea “nuda” se il rich text è disattivato */ body.client-side.tickets-page:not(:has(#check-ticket)) #reply textarea#message:not(.redactor-source) { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-height: 200px !important; padding: 0.75rem 1rem !important; border-radius: var(--open-field-radius) !important; border: 1px solid var(--open-field-border) !important; background: var(--open-field-bg) !important; color: var(--open-field-text) !important; font-size: 15px !important; line-height: 1.55 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 1px 4px rgba(0, 10, 30, 0.07) !important; color-scheme: light; } body.client-side.open-page #ticketForm table, body.client-side.open-page #ticketForm table.open-ticket-main-table { width: 100% !important; max-width: 100% !important; border-collapse: separate; border-spacing: 0; color: var(--glass-text); /* auto: colonne si adattano; campi corti non occupano tutta la riga */ table-layout: auto; min-width: 0; } body.client-side.open-page #ticketForm td, body.client-side.open-page #ticketForm th { color: rgba(248, 250, 252, 0.98) !important; font-size: 0.9375rem !important; padding: 0.5rem 0 !important; vertical-align: top; } body.client-side.open-page #ticketForm .form-header b { color: #ffffff !important; font-weight: 700 !important; font-size: 1rem !important; } body.client-side.open-page #ticketForm .form-header h3 { color: #ffffff !important; font-family: var(--glass-font-display); font-weight: 700 !important; font-size: clamp(1.05rem, 1.4vw, 1.18rem) !important; margin: 0 0 0.4rem !important; line-height: 1.3 !important; } body.client-side.open-page #ticketForm .form-header > div:not(:empty) { color: rgba(224, 234, 250, 0.95) !important; font-size: 0.9rem !important; line-height: 1.58 !important; font-weight: 500 !important; } body.client-side.open-page #ticketForm label { color: #ffffff !important; font-weight: 600 !important; display: block; width: fit-content; max-width: 100%; font-size: clamp(0.9rem, 1.1vw, 0.97rem); line-height: 1.35; margin-bottom: 0.2rem; } /* Hint sotto label: batte dynamic-form.tmpl.php inline color:gray */ body.client-side.open-page #ticketForm label em, body.client-side.open-page #ticketForm td em { color: rgba(255, 255, 255, 1) !important; font-style: normal !important; font-weight: 500 !important; font-size: 0.875rem !important; line-height: 1.5 !important; margin-top: 0.3rem !important; display: inline-block !important; max-width: 100%; } /* Hint con HTML (p/strong da topic): stessa dimensione dell'em monoriga (0.875rem) */ body.client-side.open-page #ticketForm #dynamic-form label em p, body.client-side.open-page #ticketForm #dynamic-form label em strong { font-size: inherit !important; line-height: inherit !important; } body.client-side.open-page #ticketForm #dynamic-form label em p { margin: 0 !important; color: rgba(255, 255, 255, 1) !important; font-weight: 200 !important; } body.client-side.open-page #ticketForm #dynamic-form label > span { font-weight: 600 !important; } body.client-side.open-page #ticketForm #dynamic-form label em strong { font-weight: 600 !important; } body.client-side.open-page #ticketForm .required, body.client-side.open-page #ticketForm label span.required { color: #ffffff !important; font-weight: 600 !important; } /* Input su una riga: larghezza proporzionata (no strip full-width se il campo è corto) */ body.client-side.open-page #ticketForm input[type="text"], body.client-side.open-page #ticketForm input[type="email"], body.client-side.open-page #ticketForm input[type="tel"], body.client-side.open-page #ticketForm input[type="password"], body.client-side.open-page #ticketForm input[type="number"], body.client-side.open-page #ticketForm input[type="date"], body.client-side.open-page #ticketForm input[type="url"], body.client-side.open-page #ticketForm #dynamic-form input[type="text"], body.client-side.open-page #ticketForm #dynamic-form input[type="email"], body.client-side.open-page #ticketForm #dynamic-form input[type="tel"], body.client-side.open-page #ticketForm #dynamic-form input[type="number"], body.client-side.open-page #ticketForm #dynamic-form input[type="date"] { width: auto !important; min-width: min(100%, 10ch) !important; max-width: min(100%, calc(52ch + var(--open-input-pad-x))) !important; box-sizing: border-box !important; padding: 0.75rem 1rem !important; min-height: 48px !important; border-radius: var(--open-field-radius) !important; border: 1px solid var(--open-field-border) !important; background: var(--open-field-bg) !important; color: var(--open-field-text) !important; font-size: 15px !important; line-height: 1.4 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 1px 4px rgba(0, 10, 30, 0.07) !important; color-scheme: light; transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* maxlength dal form dinamico osTicket (TextboxWidget): larghezza ≈ N caratteri */ body.client-side.open-page #ticketForm input[maxlength="1"], body.client-side.open-page #ticketForm input[maxlength="2"], body.client-side.open-page #ticketForm input[maxlength="3"], body.client-side.open-page #ticketForm input[maxlength="4"], body.client-side.open-page #ticketForm input[maxlength="5"], body.client-side.open-page #ticketForm input[maxlength="6"], body.client-side.open-page #ticketForm input[maxlength="7"], body.client-side.open-page #ticketForm input[maxlength="8"], body.client-side.open-page #ticketForm input[maxlength="9"] { max-width: min(100%, calc(10ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="10"], body.client-side.open-page #ticketForm input[maxlength="11"], body.client-side.open-page #ticketForm input[maxlength="12"] { max-width: min(100%, calc(12ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="13"], body.client-side.open-page #ticketForm input[maxlength="14"], body.client-side.open-page #ticketForm input[maxlength="15"], body.client-side.open-page #ticketForm input[maxlength="16"] { max-width: min(100%, calc(16ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="17"], body.client-side.open-page #ticketForm input[maxlength="18"], body.client-side.open-page #ticketForm input[maxlength="19"], body.client-side.open-page #ticketForm input[maxlength="20"] { max-width: min(100%, calc(20ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="21"], body.client-side.open-page #ticketForm input[maxlength="22"], body.client-side.open-page #ticketForm input[maxlength="23"], body.client-side.open-page #ticketForm input[maxlength="24"], body.client-side.open-page #ticketForm input[maxlength="25"] { max-width: min(100%, calc(25ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="26"], body.client-side.open-page #ticketForm input[maxlength="27"], body.client-side.open-page #ticketForm input[maxlength="28"], body.client-side.open-page #ticketForm input[maxlength="29"], body.client-side.open-page #ticketForm input[maxlength="30"], body.client-side.open-page #ticketForm input[maxlength="31"], body.client-side.open-page #ticketForm input[maxlength="32"] { max-width: min(100%, calc(32ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="33"], body.client-side.open-page #ticketForm input[maxlength="34"], body.client-side.open-page #ticketForm input[maxlength="35"], body.client-side.open-page #ticketForm input[maxlength="36"], body.client-side.open-page #ticketForm input[maxlength="37"], body.client-side.open-page #ticketForm input[maxlength="38"], body.client-side.open-page #ticketForm input[maxlength="39"], body.client-side.open-page #ticketForm input[maxlength="40"] { max-width: min(100%, calc(40ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="41"], body.client-side.open-page #ticketForm input[maxlength="42"], body.client-side.open-page #ticketForm input[maxlength="43"], body.client-side.open-page #ticketForm input[maxlength="44"], body.client-side.open-page #ticketForm input[maxlength="45"], body.client-side.open-page #ticketForm input[maxlength="46"], body.client-side.open-page #ticketForm input[maxlength="47"], body.client-side.open-page #ticketForm input[maxlength="48"], body.client-side.open-page #ticketForm input[maxlength="49"], body.client-side.open-page #ticketForm input[maxlength="50"] { max-width: min(100%, calc(50ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="51"], body.client-side.open-page #ticketForm input[maxlength="52"], body.client-side.open-page #ticketForm input[maxlength="53"], body.client-side.open-page #ticketForm input[maxlength="54"], body.client-side.open-page #ticketForm input[maxlength="55"], body.client-side.open-page #ticketForm input[maxlength="56"], body.client-side.open-page #ticketForm input[maxlength="57"], body.client-side.open-page #ticketForm input[maxlength="58"], body.client-side.open-page #ticketForm input[maxlength="59"], body.client-side.open-page #ticketForm input[maxlength="60"], body.client-side.open-page #ticketForm input[maxlength="61"], body.client-side.open-page #ticketForm input[maxlength="62"], body.client-side.open-page #ticketForm input[maxlength="63"], body.client-side.open-page #ticketForm input[maxlength="64"] { max-width: min(100%, calc(64ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="65"], body.client-side.open-page #ticketForm input[maxlength="66"], body.client-side.open-page #ticketForm input[maxlength="67"], body.client-side.open-page #ticketForm input[maxlength="68"], body.client-side.open-page #ticketForm input[maxlength="69"], body.client-side.open-page #ticketForm input[maxlength="70"], body.client-side.open-page #ticketForm input[maxlength="71"], body.client-side.open-page #ticketForm input[maxlength="72"], body.client-side.open-page #ticketForm input[maxlength="73"], body.client-side.open-page #ticketForm input[maxlength="74"], body.client-side.open-page #ticketForm input[maxlength="75"], body.client-side.open-page #ticketForm input[maxlength="76"], body.client-side.open-page #ticketForm input[maxlength="77"], body.client-side.open-page #ticketForm input[maxlength="78"], body.client-side.open-page #ticketForm input[maxlength="79"], body.client-side.open-page #ticketForm input[maxlength="80"] { max-width: min(100%, calc(80ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="81"], body.client-side.open-page #ticketForm input[maxlength="82"], body.client-side.open-page #ticketForm input[maxlength="83"], body.client-side.open-page #ticketForm input[maxlength="84"], body.client-side.open-page #ticketForm input[maxlength="85"], body.client-side.open-page #ticketForm input[maxlength="86"], body.client-side.open-page #ticketForm input[maxlength="87"], body.client-side.open-page #ticketForm input[maxlength="88"], body.client-side.open-page #ticketForm input[maxlength="89"], body.client-side.open-page #ticketForm input[maxlength="90"], body.client-side.open-page #ticketForm input[maxlength="91"], body.client-side.open-page #ticketForm input[maxlength="92"], body.client-side.open-page #ticketForm input[maxlength="93"], body.client-side.open-page #ticketForm input[maxlength="94"], body.client-side.open-page #ticketForm input[maxlength="95"], body.client-side.open-page #ticketForm input[maxlength="96"] { max-width: min(100%, calc(96ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="97"], body.client-side.open-page #ticketForm input[maxlength="98"], body.client-side.open-page #ticketForm input[maxlength="99"], body.client-side.open-page #ticketForm input[maxlength="100"], body.client-side.open-page #ticketForm input[maxlength="101"], body.client-side.open-page #ticketForm input[maxlength="102"], body.client-side.open-page #ticketForm input[maxlength="103"], body.client-side.open-page #ticketForm input[maxlength="104"], body.client-side.open-page #ticketForm input[maxlength="105"], body.client-side.open-page #ticketForm input[maxlength="106"], body.client-side.open-page #ticketForm input[maxlength="107"], body.client-side.open-page #ticketForm input[maxlength="108"], body.client-side.open-page #ticketForm input[maxlength="109"], body.client-side.open-page #ticketForm input[maxlength="110"], body.client-side.open-page #ticketForm input[maxlength="111"], body.client-side.open-page #ticketForm input[maxlength="112"], body.client-side.open-page #ticketForm input[maxlength="113"], body.client-side.open-page #ticketForm input[maxlength="114"], body.client-side.open-page #ticketForm input[maxlength="115"], body.client-side.open-page #ticketForm input[maxlength="116"], body.client-side.open-page #ticketForm input[maxlength="117"], body.client-side.open-page #ticketForm input[maxlength="118"], body.client-side.open-page #ticketForm input[maxlength="119"], body.client-side.open-page #ticketForm input[maxlength="120"], body.client-side.open-page #ticketForm input[maxlength="121"], body.client-side.open-page #ticketForm input[maxlength="122"], body.client-side.open-page #ticketForm input[maxlength="123"], body.client-side.open-page #ticketForm input[maxlength="124"], body.client-side.open-page #ticketForm input[maxlength="125"], body.client-side.open-page #ticketForm input[maxlength="126"], body.client-side.open-page #ticketForm input[maxlength="127"], body.client-side.open-page #ticketForm input[maxlength="128"] { max-width: min(100%, calc(128ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="129"], body.client-side.open-page #ticketForm input[maxlength="130"], body.client-side.open-page #ticketForm input[maxlength="131"], body.client-side.open-page #ticketForm input[maxlength="132"], body.client-side.open-page #ticketForm input[maxlength="133"], body.client-side.open-page #ticketForm input[maxlength="134"], body.client-side.open-page #ticketForm input[maxlength="135"], body.client-side.open-page #ticketForm input[maxlength="136"], body.client-side.open-page #ticketForm input[maxlength="137"], body.client-side.open-page #ticketForm input[maxlength="138"], body.client-side.open-page #ticketForm input[maxlength="139"], body.client-side.open-page #ticketForm input[maxlength="140"], body.client-side.open-page #ticketForm input[maxlength="141"], body.client-side.open-page #ticketForm input[maxlength="142"], body.client-side.open-page #ticketForm input[maxlength="143"], body.client-side.open-page #ticketForm input[maxlength="144"], body.client-side.open-page #ticketForm input[maxlength="145"], body.client-side.open-page #ticketForm input[maxlength="146"], body.client-side.open-page #ticketForm input[maxlength="147"], body.client-side.open-page #ticketForm input[maxlength="148"], body.client-side.open-page #ticketForm input[maxlength="149"], body.client-side.open-page #ticketForm input[maxlength="150"], body.client-side.open-page #ticketForm input[maxlength="151"], body.client-side.open-page #ticketForm input[maxlength="152"], body.client-side.open-page #ticketForm input[maxlength="153"], body.client-side.open-page #ticketForm input[maxlength="154"], body.client-side.open-page #ticketForm input[maxlength="155"], body.client-side.open-page #ticketForm input[maxlength="156"], body.client-side.open-page #ticketForm input[maxlength="157"], body.client-side.open-page #ticketForm input[maxlength="158"], body.client-side.open-page #ticketForm input[maxlength="159"], body.client-side.open-page #ticketForm input[maxlength="160"] { max-width: min(100%, calc(160ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="161"], body.client-side.open-page #ticketForm input[maxlength="162"], body.client-side.open-page #ticketForm input[maxlength="163"], body.client-side.open-page #ticketForm input[maxlength="164"], body.client-side.open-page #ticketForm input[maxlength="165"], body.client-side.open-page #ticketForm input[maxlength="166"], body.client-side.open-page #ticketForm input[maxlength="167"], body.client-side.open-page #ticketForm input[maxlength="168"], body.client-side.open-page #ticketForm input[maxlength="169"], body.client-side.open-page #ticketForm input[maxlength="170"], body.client-side.open-page #ticketForm input[maxlength="171"], body.client-side.open-page #ticketForm input[maxlength="172"], body.client-side.open-page #ticketForm input[maxlength="173"], body.client-side.open-page #ticketForm input[maxlength="174"], body.client-side.open-page #ticketForm input[maxlength="175"], body.client-side.open-page #ticketForm input[maxlength="176"], body.client-side.open-page #ticketForm input[maxlength="177"], body.client-side.open-page #ticketForm input[maxlength="178"], body.client-side.open-page #ticketForm input[maxlength="179"], body.client-side.open-page #ticketForm input[maxlength="180"], body.client-side.open-page #ticketForm input[maxlength="181"], body.client-side.open-page #ticketForm input[maxlength="182"], body.client-side.open-page #ticketForm input[maxlength="183"], body.client-side.open-page #ticketForm input[maxlength="184"], body.client-side.open-page #ticketForm input[maxlength="185"], body.client-side.open-page #ticketForm input[maxlength="186"], body.client-side.open-page #ticketForm input[maxlength="187"], body.client-side.open-page #ticketForm input[maxlength="188"], body.client-side.open-page #ticketForm input[maxlength="189"], body.client-side.open-page #ticketForm input[maxlength="190"], body.client-side.open-page #ticketForm input[maxlength="191"], body.client-side.open-page #ticketForm input[maxlength="192"] { max-width: min(100%, calc(192ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="193"], body.client-side.open-page #ticketForm input[maxlength="194"], body.client-side.open-page #ticketForm input[maxlength="195"], body.client-side.open-page #ticketForm input[maxlength="196"], body.client-side.open-page #ticketForm input[maxlength="197"], body.client-side.open-page #ticketForm input[maxlength="198"], body.client-side.open-page #ticketForm input[maxlength="199"], body.client-side.open-page #ticketForm input[maxlength="200"], body.client-side.open-page #ticketForm input[maxlength="201"], body.client-side.open-page #ticketForm input[maxlength="202"], body.client-side.open-page #ticketForm input[maxlength="203"], body.client-side.open-page #ticketForm input[maxlength="204"], body.client-side.open-page #ticketForm input[maxlength="205"], body.client-side.open-page #ticketForm input[maxlength="206"], body.client-side.open-page #ticketForm input[maxlength="207"], body.client-side.open-page #ticketForm input[maxlength="208"], body.client-side.open-page #ticketForm input[maxlength="209"], body.client-side.open-page #ticketForm input[maxlength="210"], body.client-side.open-page #ticketForm input[maxlength="211"], body.client-side.open-page #ticketForm input[maxlength="212"], body.client-side.open-page #ticketForm input[maxlength="213"], body.client-side.open-page #ticketForm input[maxlength="214"], body.client-side.open-page #ticketForm input[maxlength="215"], body.client-side.open-page #ticketForm input[maxlength="216"], body.client-side.open-page #ticketForm input[maxlength="217"], body.client-side.open-page #ticketForm input[maxlength="218"], body.client-side.open-page #ticketForm input[maxlength="219"], body.client-side.open-page #ticketForm input[maxlength="220"], body.client-side.open-page #ticketForm input[maxlength="221"], body.client-side.open-page #ticketForm input[maxlength="222"], body.client-side.open-page #ticketForm input[maxlength="223"], body.client-side.open-page #ticketForm input[maxlength="224"] { max-width: min(100%, calc(224ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[maxlength="225"], body.client-side.open-page #ticketForm input[maxlength="226"], body.client-side.open-page #ticketForm input[maxlength="227"], body.client-side.open-page #ticketForm input[maxlength="228"], body.client-side.open-page #ticketForm input[maxlength="229"], body.client-side.open-page #ticketForm input[maxlength="230"], body.client-side.open-page #ticketForm input[maxlength="231"], body.client-side.open-page #ticketForm input[maxlength="232"], body.client-side.open-page #ticketForm input[maxlength="233"], body.client-side.open-page #ticketForm input[maxlength="234"], body.client-side.open-page #ticketForm input[maxlength="235"], body.client-side.open-page #ticketForm input[maxlength="236"], body.client-side.open-page #ticketForm input[maxlength="237"], body.client-side.open-page #ticketForm input[maxlength="238"], body.client-side.open-page #ticketForm input[maxlength="239"], body.client-side.open-page #ticketForm input[maxlength="240"], body.client-side.open-page #ticketForm input[maxlength="241"], body.client-side.open-page #ticketForm input[maxlength="242"], body.client-side.open-page #ticketForm input[maxlength="243"], body.client-side.open-page #ticketForm input[maxlength="244"], body.client-side.open-page #ticketForm input[maxlength="245"], body.client-side.open-page #ticketForm input[maxlength="246"], body.client-side.open-page #ticketForm input[maxlength="247"], body.client-side.open-page #ticketForm input[maxlength="248"], body.client-side.open-page #ticketForm input[maxlength="249"], body.client-side.open-page #ticketForm input[maxlength="250"], body.client-side.open-page #ticketForm input[maxlength="251"], body.client-side.open-page #ticketForm input[maxlength="252"], body.client-side.open-page #ticketForm input[maxlength="253"], body.client-side.open-page #ticketForm input[maxlength="254"], body.client-side.open-page #ticketForm input[maxlength="255"] { max-width: min(100%, calc(255ch + var(--open-input-pad-x))) !important; } /* Attributo size (es. interno telefono) quando non c’è maxlength */ body.client-side.open-page #ticketForm input[size="5"] { max-width: min(100%, calc(5ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[size="10"] { max-width: min(100%, calc(10ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[size="12"], body.client-side.open-page #ticketForm input.dp:not([size="20"]) { max-width: min(100%, calc(12ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[size="15"] { max-width: min(100%, calc(15ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[size="20"], body.client-side.open-page #ticketForm input.dp[size="20"] { max-width: min(100%, calc(20ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[size="30"] { max-width: min(100%, calc(30ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm input[size="40"] { max-width: min(100%, calc(40ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm select, body.client-side.open-page #ticketForm #dynamic-form select, body.client-side.open-page #ticketForm textarea, body.client-side.open-page #ticketForm #dynamic-form textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0.75rem 1rem !important; min-height: 48px !important; border-radius: var(--open-field-radius) !important; border: 1px solid var(--open-field-border) !important; background: var(--open-field-bg) !important; color: var(--open-field-text) !important; font-size: 15px !important; line-height: 1.4 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 1px 4px rgba(0, 10, 30, 0.07) !important; color-scheme: light; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.client-side.open-page #ticketForm textarea, body.client-side.open-page #ticketForm #dynamic-form textarea { width: 100% !important; max-width: min(100%, calc(72ch + var(--open-input-pad-x))) !important; min-height: 120px !important; height: auto !important; resize: vertical; } body.client-side.open-page #ticketForm textarea[cols="20"], body.client-side.open-page #ticketForm #dynamic-form textarea[cols="20"] { max-width: min(100%, calc(20ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm textarea[cols="30"], body.client-side.open-page #ticketForm #dynamic-form textarea[cols="30"] { max-width: min(100%, calc(30ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm textarea[cols="40"], body.client-side.open-page #ticketForm #dynamic-form textarea[cols="40"] { max-width: min(100%, calc(40ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm textarea[cols="60"], body.client-side.open-page #ticketForm #dynamic-form textarea[cols="60"] { max-width: min(100%, calc(60ch + var(--open-input-pad-x))) !important; } body.client-side.open-page #ticketForm textarea[cols="80"], body.client-side.open-page #ticketForm #dynamic-form textarea[cols="80"] { max-width: min(100%, calc(80ch + var(--open-input-pad-x))) !important; } /* Wrapper osTicket: select/Select2 a tutta larghezza; solo textarea resta fit-content (cols) */ body.client-side.open-page #ticketForm td > span[style*="width:100%"], body.client-side.open-page #ticketForm td > span[style*="width: 100%"] { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.client-side.open-page #ticketForm td > span[style*="width:100%"]:has(textarea), body.client-side.open-page #ticketForm td > span[style*="width: 100%"]:has(textarea) { width: fit-content !important; } body.client-side.open-page #ticketForm select { height: auto !important; cursor: pointer; padding-right: 2.5rem !important; background-color: var(--open-field-bg) !important; } body.client-side.open-page #ticketForm select#topicId { width: 100% !important; max-width: 100% !important; border: 1px solid var(--open-field-border) !important; border-right: 1px solid var(--open-field-border) !important; background-image: none !important; } body.client-side.open-page #ticketForm select#topicId.select2-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; background: none !important; clip: rect(0, 0, 0, 0) !important; overflow: hidden !important; } body.client-side.open-page #ticketForm .form-required-mark { color: #fca5a5; font-weight: 600; } body.client-side.open-page #ticketForm .form-field-error { color: #fecaca; font-size: 0.88rem; font-weight: 500; } body.client-side.open-page #ticketForm .mp-open-dynamic-select2 .select2-selection--single { min-height: 48px !important; border: 1px solid var(--open-field-border) !important; border-radius: var(--open-field-radius) !important; background: var(--open-field-bg) !important; } body.client-side.open-page #ticketForm .mp-open-dynamic-select2 .select2-selection__rendered { color: var(--open-field-text) !important; line-height: 46px !important; padding-left: 1rem !important; } /** * Batte client-mobile (≤960px) e client-desktop: strisce rosse/bordi spessi su required * e font.error:before (sfondo bianco) — artefatti tipo “barre” su telefono. */ body.client-side.open-page #ticketForm td.client-required .select2-container .select2-selection--single, body.client-side.open-page #ticketForm .client-required .select2-selection.select2-selection--single { border: 1px solid var(--open-field-border) !important; border-right: 1px solid var(--open-field-border) !important; } body.client-side.open-page #ticketForm td.client-required input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]) { border: 1px solid var(--open-field-border) !important; border-right: 1px solid var(--open-field-border) !important; } body.client-side.open-page #ticketForm input#captcha { border: 1px solid var(--open-field-border) !important; border-right: 1px solid var(--open-field-border) !important; } body.client-side.open-page #ticketForm tr.client-required td select#topicId { border: 1px solid var(--open-field-border) !important; border-right: 1px solid var(--open-field-border) !important; background: transparent !important; } body.client-side.open-page #ticketForm .mp-open-topic-field .select2-container { width: 100% !important; max-width: 100% !important; } body.client-side.open-page #ticketForm .mp-open-topic-select2 .select2-selection--single { min-height: 48px !important; border: 1px solid var(--open-field-border) !important; border-radius: var(--open-field-radius) !important; background: var(--open-field-bg) !important; } body.client-side.open-page #ticketForm .mp-open-topic-select2 .select2-selection__rendered { color: var(--open-field-text) !important; line-height: 46px !important; padding-left: 1rem !important; } body.client-side.open-page #ticketForm .mp-open-topic-select2 .select2-selection__arrow { height: 46px !important; right: 0.65rem !important; } body.client-side.open-page #ticketForm .mp-open-topic-select2 .select2-selection__arrow b { border-color: #64748b transparent transparent transparent !important; } body.client-side.open-page #ticketForm input[type="tel"] { width: 100% !important; max-width: 100% !important; } body.client-side.open-page #ticketForm font.error { position: static !important; background: transparent !important; color: #fecaca !important; } body.client-side.open-page #ticketForm font.error:before { content: none !important; display: none !important; background: transparent !important; color: transparent !important; } body.client-side.open-page #ticketForm input::placeholder, body.client-side.open-page #ticketForm textarea::placeholder { color: var(--open-field-placeholder) !important; opacity: 1 !important; } body.client-side.open-page #ticketForm input:focus-visible, body.client-side.open-page #ticketForm select:focus-visible, body.client-side.open-page #ticketForm textarea:focus-visible { outline: none !important; border-color: #2563eb !important; box-shadow: var(--open-focus-ring), 0 1px 0 rgba(255, 255, 255, 0.9) inset !important; } body.client-side.open-page #ticketForm input[type="checkbox"], body.client-side.open-page #ticketForm input[type="radio"] { width: auto !important; min-height: 0 !important; min-width: 1.1rem !important; margin: 0.25rem 0.5rem 0.25rem 0 !important; vertical-align: middle; box-shadow: none !important; accent-color: #2563eb; } body.client-side.open-page #ticketForm input:-webkit-autofill, body.client-side.open-page #ticketForm textarea:-webkit-autofill, body.client-side.open-page #ticketForm select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--open-field-bg) inset !important; box-shadow: 0 0 0 1000px var(--open-field-bg) inset !important; -webkit-text-fill-color: var(--open-field-text) !important; } body.client-side.open-page #ticketForm hr { border: none; border-top: 1px solid var(--glass-border-soft); margin: 1rem 0; } body.client-side.open-page #ticketForm .buttons, body.client-side.open-page #ticketForm p.buttons { margin: 0.75rem 0 0 !important; padding-top: 0.5rem; text-align: center !important; } /* Footer azioni — liquid glass (reset appearance nativa da theme/normalize) */ body.client-side.open-page #ticketForm .buttons input[type="submit"], body.client-side.open-page #ticketForm .buttons input[type="reset"], body.client-side.open-page #ticketForm .buttons input[type="button"], body.client-side.open-page #ticketForm p.buttons input[type="submit"], body.client-side.open-page #ticketForm p.buttons input[type="reset"], body.client-side.open-page #ticketForm p.buttons input[type="button"] { display: inline-block !important; box-sizing: border-box !important; margin: 0.35rem 0.35rem 0.35rem 0 !important; padding: 0.7rem 1.75rem !important; min-height: 48px !important; border-radius: calc(var(--glass-radius-sm, 14px) + 2px) !important; font-weight: 700 !important; font-size: clamp(0.94rem, 1.35vw, 0.98rem) !important; text-align: center !important; letter-spacing: 0.02em !important; line-height: 1.35 !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.18s ease, background 0.22s ease, filter 0.2s ease !important; } body.client-side.open-page #ticketForm .buttons input[type="submit"], body.client-side.open-page #ticketForm p.buttons input[type="submit"] { border: 1px solid rgba(255, 255, 255, 0.32) !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 8, 28, 0.35); background-color: transparent !important; background-image: linear-gradient( 168deg, rgba(120, 200, 255, 0.42) 0%, rgba(55, 130, 240, 0.38) 38%, rgba(28, 72, 200, 0.62) 100% ) !important; -webkit-backdrop-filter: blur(14px) saturate(175%); backdrop-filter: blur(14px) saturate(175%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 0 0 1px rgba(56, 145, 255, 0.18) inset, 0 12px 32px rgba(12, 48, 140, 0.48), 0 4px 14px rgba(0, 20, 80, 0.28) !important; } body.client-side.open-page #ticketForm .buttons input[type="submit"]:hover, body.client-side.open-page #ticketForm p.buttons input[type="submit"]:hover { transform: translateY(-1px) !important; filter: none !important; border-color: rgba(255, 255, 255, 0.45) !important; background-image: linear-gradient( 168deg, rgba(140, 215, 255, 0.5) 0%, rgba(70, 150, 255, 0.44) 40%, rgba(36, 92, 220, 0.68) 100% ) !important; } body.client-side.open-page #ticketForm .buttons input[type="reset"], body.client-side.open-page #ticketForm .buttons input[type="button"], body.client-side.open-page #ticketForm p.buttons input[type="reset"], body.client-side.open-page #ticketForm p.buttons input[type="button"] { border: 1px solid rgba(255, 255, 255, 0.28) !important; color: #f8fafc !important; background-color: transparent !important; background-image: linear-gradient( 168deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0.04) 100% ) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 8px 22px rgba(0, 20, 80, 0.22) !important; } body.client-side.open-page #ticketForm .buttons input[type="reset"]:hover, body.client-side.open-page #ticketForm .buttons input[type="button"]:hover, body.client-side.open-page #ticketForm p.buttons input[type="reset"]:hover, body.client-side.open-page #ticketForm p.buttons input[type="button"]:hover { transform: translateY(-1px) !important; border-color: rgba(255, 255, 255, 0.4) !important; } body.client-side.open-page #ticketForm .buttons input[type="submit"]:focus-visible, body.client-side.open-page #ticketForm p.buttons input[type="submit"]:focus-visible { outline: none !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 0 0 3px rgba(56, 145, 255, 0.35), 0 16px 40px rgba(14, 64, 180, 0.55) !important; } body.client-side.open-page #ticketForm p.buttons.mp-open-ticket__actions { border-top: 1px solid var(--glass-border-soft); padding-top: 1rem !important; margin-top: 0.5rem !important; } /* * Righe email/cliente (tr.client-deets) — bypass legacy client-desktop nth-child * (bordi tratteggiati #ccc, padding-top 10px) e marchiotto-additions §30. */ body.client-side.open-page #ticketForm table.open-ticket-main-table > tbody:first-of-type tr.client-deets td, body.client-side.open-page #ticketForm table tbody:first-of-type tr.client-deets td { border: none !important; border-bottom: none !important; padding: 0.65rem 1rem !important; vertical-align: middle !important; color: #ffffff !important; font-weight: 500 !important; line-height: 1.45 !important; background: rgba(15, 23, 42, 0.38) !important; box-shadow: none !important; } body.client-side.open-page #ticketForm table.open-ticket-main-table > tbody:first-of-type tr.client-deets td:first-child, body.client-side.open-page #ticketForm table tbody:first-of-type tr.client-deets td:first-child { width: 34% !important; max-width: 14rem !important; color: rgba(200, 220, 245, 0.96) !important; font-weight: 600 !important; font-size: 0.8125rem !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; border-left: 3px solid rgba(56, 189, 248, 0.55) !important; padding-left: calc(1rem - 3px) !important; white-space: nowrap !important; } body.client-side.open-page #ticketForm table.open-ticket-main-table > tbody:first-of-type tr.client-deets td:last-child, body.client-side.open-page #ticketForm table tbody:first-of-type tr.client-deets td:last-child { width: auto !important; color: rgba(248, 250, 252, 0.98) !important; font-weight: 500 !important; font-size: 0.9375rem !important; word-break: break-word !important; } body.client-side.open-page #ticketForm table.open-ticket-main-table > tbody:first-of-type tr.client-deets:first-of-type td, body.client-side.open-page #ticketForm table tbody:first-of-type tr.client-deets:first-of-type td { padding-top: 0.75rem !important; } body.client-side.open-page #ticketForm table.open-ticket-main-table > tbody:first-of-type tr.client-deets:first-of-type td:first-child { border-top-left-radius: 12px !important; } body.client-side.open-page #ticketForm table.open-ticket-main-table > tbody:first-of-type tr.client-deets:first-of-type td:last-child { border-top-right-radius: 12px !important; } body.client-side.open-page #ticketForm table.open-ticket-main-table > tbody:first-of-type tr.client-deets + tr.client-deets td, body.client-side.open-page #ticketForm table tbody:first-of-type tr.client-deets + tr.client-deets td { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } body.client-side.open-page #ticketForm table.open-ticket-main-table > tbody:first-of-type tr.client-deets:last-of-type td, body.client-side.open-page #ticketForm table tbody:first-of-type tr.client-deets:last-of-type td { padding-bottom: 0.75rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } body.client-side.open-page #ticketForm table.open-ticket-main-table > tbody:first-of-type tr.client-deets:last-of-type td:first-child { border-bottom-left-radius: 12px !important; } body.client-side.open-page #ticketForm table.open-ticket-main-table > tbody:first-of-type tr.client-deets:last-of-type td:last-child { border-bottom-right-radius: 12px !important; } body.client-side.open-page #ticketForm font.error, body.client-side.open-page #ticketForm span.error, body.client-side.open-page #ticketForm .error:not(input):not(select):not(textarea) { color: #fecaca !important; font-weight: 600 !important; } /* Redactor: blocco unico (toolbar a due gruppi + editor + status) stile glass/moderno */ body.client-side.open-page #ticketForm .redactor-box { margin-top: 0.45rem !important; background: transparent !important; border: none !important; } body.client-side.open-page #ticketForm .redactor-box.redactor-styles-on { background: #ffffff !important; border: 1px solid var(--open-field-border) !important; border-radius: var(--open-field-radius) !important; box-shadow: 0 2px 14px rgba(0, 10, 30, 0.09), 0 0 0 1px rgba(26, 111, 212, 0.06) !important; overflow: hidden !important; } body.client-side.open-page #ticketForm .redactor-box.redactor-styles-on.redactor-focus { border-color: #2563eb !important; box-shadow: var(--open-focus-ring), 0 4px 20px rgba(0, 10, 30, 0.12) !important; } body.client-side.open-page #ticketForm .redactor-toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px 14px !important; padding: 12px 14px !important; background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, #eef2f8 52%, #e6ecf5 100%) !important; border-bottom: 1px solid rgba(15, 23, 42, 0.11) !important; border-radius: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; } body.client-side.open-page #ticketForm .redactor-box.redactor-styles-on .redactor-toolbar { padding: 12px 14px !important; } /* Contenitori creati da osta-client.js: strumenti vs azioni bozza */ body.client-side.open-page #ticketForm .redactor-toolbar .re-toolbar-group { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; padding: 8px 10px !important; border-radius: 12px !important; box-sizing: border-box !important; } body.client-side.open-page #ticketForm .redactor-toolbar .re-toolbar-group-format { flex: 1 1 auto !important; border: 1px solid rgba(26, 111, 212, 0.34) !important; background: rgba(255, 255, 255, 0.58) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 1px 4px rgba(15, 23, 42, 0.06) !important; } body.client-side.open-page #ticketForm .redactor-toolbar .re-toolbar-group-actions { flex: 0 0 auto !important; border: 1px solid rgba(26, 111, 212, 0.48) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(236, 244, 255, 0.92) 100%) !important; box-shadow: 0 2px 10px rgba(26, 55, 120, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } body.client-side.open-page #ticketForm .redactor-toolbar .re-toolbar-group-actions:empty { display: none !important; } body.client-side.open-page #ticketForm .redactor-toolbar a, body.client-side.open-page #ticketForm .redactor-toolbar a.re-button-icon { margin: 0 !important; border: 1px solid rgba(15, 23, 42, 0.09) !important; border-radius: 9px !important; background: rgba(255, 255, 255, 0.94) !important; color: #1d4ed8 !important; box-shadow: 0 1px 2px rgba(0, 12, 40, 0.07) !important; padding: 9px 13px !important; font-weight: 500 !important; -webkit-transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; } body.client-side.open-page #ticketForm .redactor-toolbar a.re-button-icon { font-size: 16px !important; padding: 8px 12px 7px !important; } body.client-side.open-page #ticketForm .redactor-toolbar a:hover { background: linear-gradient(180deg, #2b6fd8 0%, #1d4ed8 100%) !important; color: #ffffff !important; border-color: rgba(29, 78, 216, 0.75) !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important; } body.client-side.open-page #ticketForm .redactor-toolbar a.redactor-button-active { background: rgba(37, 99, 235, 0.14) !important; color: #1e3a8a !important; border-color: rgba(37, 99, 235, 0.4) !important; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important; } body.client-side.open-page #ticketForm .redactor-toolbar a.redactor-button-disabled, body.client-side.open-page #ticketForm .redactor-toolbar a.redactor-button-disabled:hover { opacity: 0.38 !important; background: rgba(255, 255, 255, 0.55) !important; color: #64748b !important; border-color: rgba(15, 23, 42, 0.07) !important; box-shadow: none !important; cursor: default !important; } body.client-side.open-page #ticketForm .redactor-editor, body.client-side.open-page #ticketForm .redactor-in { background: #ffffff !important; color: #0f172a !important; border: none !important; border-top: 1px solid rgba(15, 23, 42, 0.07) !important; min-height: 260px !important; font-size: 15px !important; line-height: 1.55 !important; } body.client-side.open-page #ticketForm .redactor-in p, body.client-side.open-page #ticketForm .redactor-in li { color: #0f172a !important; } body.client-side.open-page #ticketForm .redactor-placeholder:before { color: var(--open-field-placeholder) !important; } body.client-side.open-page #ticketForm .redactor-statusbar { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important; border-top: 1px solid rgba(15, 23, 42, 0.09) !important; padding: 0.38rem 0.85rem !important; } body.client-side.open-page #ticketForm .redactor-statusbar li, body.client-side.open-page #ticketForm .redactor-statusbar a { color: rgba(51, 65, 85, 0.9) !important; font-size: 12px !important; letter-spacing: 0.02em !important; font-variant-numeric: tabular-nums !important; } body.client-side.open-page #ticketForm .redactor-source { background: #f8fafc !important; color: #0f172a !important; border: none !important; } /* Vista sorgente: toolbar scura ma stessi due gruppi bordati */ body.client-side.open-page #ticketForm .redactor-source-view .redactor-toolbar { background: linear-gradient(165deg, #3d4e63 0%, #1e293b 100%) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.32) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } body.client-side.open-page #ticketForm .redactor-source-view .redactor-toolbar .re-toolbar-group-format, body.client-side.open-page #ticketForm .redactor-source-view .redactor-toolbar .re-toolbar-group-actions { border: 1px solid rgba(129, 178, 255, 0.38) !important; background: rgba(15, 23, 42, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 10px rgba(0, 0, 0, 0.22) !important; } body.client-side.open-page #ticketForm .redactor-source-view .redactor-toolbar a, body.client-side.open-page #ticketForm .redactor-source-view .redactor-toolbar a.re-button-icon { background: rgba(30, 41, 59, 0.95) !important; color: #e2e8f0 !important; border-color: rgba(148, 163, 184, 0.28) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; } body.client-side.open-page #ticketForm .redactor-source-view .redactor-toolbar a:hover { background: #2563eb !important; color: #ffffff !important; border-color: rgba(37, 99, 235, 0.85) !important; } /* Redactor in #reply: identico a open.php (#ticketForm) */ body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-box { margin-top: 0.45rem !important; background: transparent !important; border: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-box.redactor-styles-on { background: #ffffff !important; border: 1px solid var(--open-field-border) !important; border-radius: var(--open-field-radius) !important; box-shadow: 0 2px 14px rgba(0, 10, 30, 0.09), 0 0 0 1px rgba(26, 111, 212, 0.06) !important; overflow: hidden !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-box.redactor-styles-on.redactor-focus { border-color: #2563eb !important; box-shadow: var(--open-focus-ring), 0 4px 20px rgba(0, 10, 30, 0.12) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px 14px !important; padding: 12px 14px !important; background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, #eef2f8 52%, #e6ecf5 100%) !important; border-bottom: 1px solid rgba(15, 23, 42, 0.11) !important; border-radius: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-box.redactor-styles-on .redactor-toolbar { padding: 12px 14px !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar .re-toolbar-group { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; padding: 8px 10px !important; border-radius: 12px !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar .re-toolbar-group-format { flex: 1 1 auto !important; border: 1px solid rgba(26, 111, 212, 0.34) !important; background: rgba(255, 255, 255, 0.58) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 1px 4px rgba(15, 23, 42, 0.06) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar .re-toolbar-group-actions { flex: 0 0 auto !important; border: 1px solid rgba(26, 111, 212, 0.48) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(236, 244, 255, 0.92) 100%) !important; box-shadow: 0 2px 10px rgba(26, 55, 120, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar .re-toolbar-group-actions:empty { display: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar a, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar a.re-button-icon { margin: 0 !important; border: 1px solid rgba(15, 23, 42, 0.09) !important; border-radius: 9px !important; background: rgba(255, 255, 255, 0.94) !important; color: #1d4ed8 !important; box-shadow: 0 1px 2px rgba(0, 12, 40, 0.07) !important; padding: 9px 13px !important; font-weight: 500 !important; -webkit-transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar a.re-button-icon { font-size: 16px !important; padding: 8px 12px 7px !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar a:hover { background: linear-gradient(180deg, #2b6fd8 0%, #1d4ed8 100%) !important; color: #ffffff !important; border-color: rgba(29, 78, 216, 0.75) !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar a.redactor-button-active { background: rgba(37, 99, 235, 0.14) !important; color: #1e3a8a !important; border-color: rgba(37, 99, 235, 0.4) !important; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar a.redactor-button-disabled, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar a.redactor-button-disabled:hover { opacity: 0.38 !important; background: rgba(255, 255, 255, 0.55) !important; color: #64748b !important; border-color: rgba(15, 23, 42, 0.07) !important; box-shadow: none !important; cursor: default !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-editor, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-in { background: #ffffff !important; color: #0f172a !important; border: none !important; border-top: 1px solid rgba(15, 23, 42, 0.07) !important; min-height: 260px !important; font-size: 15px !important; line-height: 1.55 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-in p, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-in li { color: #0f172a !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-placeholder:before { color: var(--open-field-placeholder) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-statusbar { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important; border-top: 1px solid rgba(15, 23, 42, 0.09) !important; padding: 0.38rem 0.85rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-statusbar li, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-statusbar a { color: rgba(51, 65, 85, 0.9) !important; font-size: 12px !important; letter-spacing: 0.02em !important; font-variant-numeric: tabular-nums !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-source { background: #f8fafc !important; color: #0f172a !important; border: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-source-view .redactor-toolbar { background: linear-gradient(165deg, #3d4e63 0%, #1e293b 100%) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.32) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-source-view .redactor-toolbar .re-toolbar-group-format, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-source-view .redactor-toolbar .re-toolbar-group-actions { border: 1px solid rgba(129, 178, 255, 0.38) !important; background: rgba(15, 23, 42, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 10px rgba(0, 0, 0, 0.22) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-source-view .redactor-toolbar a, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-source-view .redactor-toolbar a.re-button-icon { background: rgba(30, 41, 59, 0.95) !important; color: #e2e8f0 !important; border-color: rgba(148, 163, 184, 0.28) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-source-view .redactor-toolbar a:hover { background: #2563eb !important; color: #ffffff !important; border-color: rgba(37, 99, 235, 0.85) !important; } /* Select2 (campi dinamici): tutta la riga; look vetro da client-portal-chrome-glass */ body.client-side.open-page #ticketForm .select2-container { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.client-side.open-page #ticketForm .select2-container--default.select2-container--focus .select2-selection--single, body.client-side.open-page #ticketForm .select2-container--default.select2-container--open .select2-selection--single { border-color: #2563eb !important; box-shadow: var(--select2-shadow-trigger), var(--open-focus-ring) !important; } /* Allegati: continuità visiva con il box Redactor (accento blu, ombra leggera) */ body.client-side.open-page #ticketForm .filedrop .dropzone, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .dropzone { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem !important; line-height: 1.35 !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 248, 255, 0.92) 100%) !important; color: #334155 !important; font-size: 0.9rem !important; font-weight: 500 !important; /*padding: 1.2rem 1.05rem !important; */ border-radius: var(--open-field-radius) !important; border: 2px dashed rgba(26, 111, 212, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 10px rgba(15, 23, 42, 0.05) !important; box-sizing: border-box; margin-top: 0 !important; } /* Icona upload + testo hint: stessa linea di base (evita offset da inline-block vs line-box) */ body.client-side.open-page #ticketForm .filedrop .dropzone > i.icon-upload, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .dropzone > i.icon-upload { flex-shrink: 0 !important; float: none !important; margin: 0 !important; align-self: center !important; vertical-align: middle !important; } body.client-side.open-page #ticketForm .filedrop .dropzone a, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .dropzone a { color: #1d4ed8 !important; font-weight: 600 !important; } body.client-side.open-page #ticketForm .filedrop, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop { display: flex !important; flex-direction: column !important; align-items: stretch !important; /*gap: 0.85rem !important; */ padding-bottom: 1rem !important; position: relative !important; z-index: 0 !important; } /* -------------------------------------------------------------------------- * File caricati (filedrop): chip premium + respiro rispetto alla dropzone * -------------------------------------------------------------------------- */ body.client-side.open-page #ticketForm .filedrop > .files, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop > .files { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; margin: 0.35rem 0 0.15rem !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; position: relative !important; z-index: 2 !important; isolation: isolate !important; } /* * Legacy css/filedrop.css — applica a TUTTI i .file sotto .files (anche wrapper Redactor): * height: 25px; + .file > span { display: block; } * Rompe la chip flex (contenuto “fuori” dalla pill, trash con float). */ body.client-side.open-page #ticketForm .filedrop .files .file, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files .file { height: auto !important; min-height: 0 !important; max-height: none !important; } body.client-side.open-page #ticketForm .filedrop .files .file > span, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files .file > span { float: none !important; clear: none !important; display: inline-flex !important; align-items: center !important; padding: 0 !important; box-sizing: border-box !important; } body.client-side.open-page #ticketForm .filedrop .files .file .pull-right, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files .file .pull-right { float: none !important; } body.client-side.open-page #ticketForm .filedrop .files .file .filename .pull-right, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files .file .filename .pull-right { float: none !important; } body.client-side.open-page #ticketForm .filedrop .files .file img.preview, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files .file img.preview { float: none !important; } /* Wrapper esterno (es. .file > .file): niente “seconda pill”, solo contenitore */ body.client-side.open-page #ticketForm .filedrop .files > .file:has(> .file), body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file:has(> .file) { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: fit-content !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; gap: 0 !important; } /* Chip singola (foglia o .file interno) */ body.client-side.open-page #ticketForm .filedrop .files > .file:not(:has(> .file)), body.client-side.open-page #ticketForm .filedrop .files > .file:has(> .file) > .file, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file:not(:has(> .file)), body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file:has(> .file) > .file { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem 0.75rem !important; width: fit-content !important; max-width: min(100%, 40rem) !important; box-sizing: border-box !important; padding: 0.5rem 1rem 0.5rem 0.75rem !important; margin: 0 !important; border-radius: 999px !important; background: linear-gradient( 165deg, rgba(30, 58, 95, 0.55) 0%, rgba(12, 24, 44, 0.72) 55%, rgba(8, 18, 36, 0.85) 100% ) !important; border: 1px solid rgba(148, 197, 255, 0.28) !important; box-shadow: 0 10px 28px rgba(0, 8, 24, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 1px 0 rgba(255, 255, 255, 0.12) inset !important; color: rgba(248, 250, 252, 0.98) !important; overflow: visible !important; min-height: 2.5rem !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .filetype:empty, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .filetype:empty { display: none !important; } body.client-side.open-page #ticketForm .filedrop .files > .file img.preview, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file img.preview { max-height: 1.35rem !important; width: auto !important; border-radius: 4px !important; order: 2 !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .filename, body.client-side.open-page #ticketForm .filedrop .files > .file span.filename, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .filename, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file span.filename { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.45rem 0.55rem !important; min-width: 0 !important; flex: 1 1 auto !important; order: 10 !important; font-size: 0.875rem !important; line-height: 1.4 !important; margin: 0 !important; padding: 0 !important; color: rgba(248, 250, 252, 0.98) !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .filename a, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .filename a { color: rgba(186, 230, 253, 0.98) !important; font-weight: 600 !important; text-decoration: none !important; word-break: break-word !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .filename a:hover, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .filename a:hover { color: #f0f9ff !important; text-decoration: underline !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .filename .filesize, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .filename .filesize { font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; color: rgba(226, 232, 240, 0.92) !important; white-space: nowrap !important; margin: 0 !important; padding: 0.18rem 0.5rem !important; border-radius: 999px !important; background: rgba(15, 23, 42, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .trash, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .trash { order: 40 !important; margin-left: auto !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 2rem !important; height: 2rem !important; min-width: 2rem !important; min-height: 2rem !important; padding: 0 !important; border-radius: 10px !important; cursor: pointer !important; color: rgba(147, 197, 253, 0.95) !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .trash i.icon-trash, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .trash i.icon-trash { display: flex !important; align-items: center !important; justify-content: center !important; width: 1.25rem !important; height: 1.25rem !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; font-size: 1rem !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .trash i.icon-trash::before, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .trash i.icon-trash::before { display: block !important; line-height: 1 !important; margin: 0 !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .trash:hover, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .trash:hover { color: #fecaca !important; background: rgba(239, 68, 68, 0.22) !important; border-color: rgba(252, 165, 165, 0.45) !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .cancel, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .cancel { order: 35 !important; cursor: pointer !important; color: rgba(248, 250, 252, 0.85) !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .upload-rate, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .upload-rate { order: 12 !important; font-size: 0.68rem !important; color: rgba(186, 230, 253, 0.88) !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .progress, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .progress { order: 50 !important; flex: 1 0 100% !important; width: 100% !important; min-width: 0 !important; margin: 0.2rem 0 0 !important; height: 5px !important; border-radius: 999px !important; overflow: hidden !important; background: rgba(15, 23, 42, 0.5) !important; } body.client-side.open-page #ticketForm .filedrop .files > .file .progress-bar, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .files > .file .progress-bar { border-radius: 999px !important; background: linear-gradient(90deg, rgba(59, 130, 246, 0.95), rgba(34, 197, 94, 0.85)) !important; } /* Dropzone sotto la lista: niente sovrapposizione visiva */ body.client-side.open-page #ticketForm .filedrop > .dropzone, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop > .dropzone { position: relative !important; z-index: 1 !important; margin-top: 0 !important; } /* CAPTCHA (ospiti): campo allineato al resto */ body.client-side.open-page #ticketForm #captcha { width: 100% !important; max-width: 12rem !important; min-height: 48px !important; border-radius: var(--open-field-radius) !important; border: 1px solid var(--open-field-border) !important; background: var(--open-field-bg) !important; color: var(--open-field-text) !important; } body.client-side.view-page h1, body.client-side.login-page h1, body.client-side.open-page:has(#check-ticket) h1, body.client-side.tickets-page:has(#check-ticket) h1 { text-align: center !important; } body.client-side.open-page #captcha-image img { border-radius: 8px; } /* Thank-you page (open.php con ticket creato) */ body.client-side.open-page #content .thread-body, body.client-side.open-page #content .thread-body p { color: var(--glass-text-muted) !important; line-height: 1.65; } body.client-side.open-page #content .thread-body a { color: var(--glass-accent) !important; } /* view.php / login.php / tickets.php (non loggato) + open.php → #check-ticket */ body.client-side.view-page #check-ticket, body.client-side.login-page #check-ticket, body.client-side.open-page #check-ticket, body.client-side.tickets-page #check-ticket { --glass-portal-gap: clamp(1rem, 3vw, 1.5rem); display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--glass-portal-gap); max-width: min(var(--glass-portal-login-stack-w, 960px), 100%) !important; margin: 0 auto !important; width: 100% !important; overflow: visible !important; padding: 0 0 1rem 0 !important; align-items: stretch; } /* Una sola card (es. registrazione disabilitata): centra senza colonna vuota */ body.client-side.view-page #check-ticket > *:only-child, body.client-side.login-page #check-ticket > *:only-child, body.client-side.open-page #check-ticket > *:only-child, body.client-side.tickets-page #check-ticket > *:only-child { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 520px; } body.client-side.view-page #access-link.client-choice, body.client-side.view-page #sign-in.client-choice, body.client-side.login-page #access-link.client-choice, body.client-side.login-page #sign-in.client-choice, body.client-side.login-page #login-sign-in.client-choice, body.client-side.login-page #login-options.client-choice, body.client-side.open-page #access-link.client-choice, body.client-side.open-page #sign-in.client-choice, body.client-side.open-page #login-sign-in.client-choice, body.client-side.open-page #login-options.client-choice, body.client-side.tickets-page #access-link.client-choice, body.client-side.tickets-page #sign-in.client-choice, body.client-side.tickets-page #login-sign-in.client-choice, body.client-side.tickets-page #login-options.client-choice { float: none !important; clear: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: clamp(1.05rem, 2.6vw, 1.5rem) !important; min-height: 0 !important; background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--glass-radius) !important; box-shadow: var(--glass-shadow) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(175%) !important; backdrop-filter: blur(var(--glass-blur)) saturate(175%) !important; box-sizing: border-box !important; } body.client-side.view-page #open-title, body.client-side.login-page #open-title, body.client-side.open-page #open-title, body.client-side.tickets-page #open-title { color: var(--glass-text-label) !important; font-family: var(--glass-font-display) !important; font-weight: 700 !important; font-size: clamp(1.02rem, 1.85vw, 1.15rem) !important; text-align: center !important; margin-bottom: 0.75rem !important; text-shadow: 0 1px 2px rgba(0, 8, 20, 0.35); } body.client-side.view-page #open-text, body.client-side.login-page #open-text, body.client-side.open-page #open-text, body.client-side.tickets-page #open-text { color: var(--glass-text-muted) !important; font-size: clamp(0.93rem, 1.4vw, 0.98rem) !important; line-height: 1.65 !important; } body.client-side.view-page #open-text label, body.client-side.login-page #open-text label, body.client-side.open-page #open-text label, body.client-side.tickets-page #open-text label { display: block; margin: 0.65rem 0 0.25rem; color: var(--glass-text-label) !important; font-weight: 600 !important; } body.client-side.view-page #email, body.client-side.view-page #ticketno, body.client-side.login-page #email, body.client-side.login-page #ticketno, body.client-side.login-page #username, body.client-side.login-page #passwd, body.client-side.open-page #check-ticket #email, body.client-side.open-page #check-ticket #ticketno, body.client-side.open-page #check-ticket #username, body.client-side.open-page #check-ticket #passwd, body.client-side.tickets-page #email, body.client-side.tickets-page #ticketno, body.client-side.tickets-page #username, body.client-side.tickets-page #passwd { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-top: 0.35rem !important; padding: 0.75rem 1rem !important; min-height: 48px !important; border-radius: var(--glass-radius-sm) !important; border: 1px solid var(--glass-field-border) !important; background: var(--glass-field-bg) !important; color: var(--glass-field-text) !important; font-size: 15px !important; color-scheme: light; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 2px 8px rgba(0, 0, 0, 0.12); } body.client-side.view-page #email::placeholder, body.client-side.view-page #ticketno::placeholder, body.client-side.login-page #email::placeholder, body.client-side.login-page #ticketno::placeholder, body.client-side.login-page #username::placeholder, body.client-side.login-page #passwd::placeholder, body.client-side.open-page #check-ticket #email::placeholder, body.client-side.open-page #check-ticket #ticketno::placeholder, body.client-side.tickets-page #email::placeholder, body.client-side.tickets-page #ticketno::placeholder, body.client-side.tickets-page #username::placeholder, body.client-side.tickets-page #passwd::placeholder { color: var(--glass-field-placeholder) !important; opacity: 1 !important; } /* Autofill browser: mantieni campo bianco e testo scuro */ body.client-side.view-page #email:-webkit-autofill, body.client-side.view-page #ticketno:-webkit-autofill, body.client-side.login-page #email:-webkit-autofill, body.client-side.login-page #ticketno:-webkit-autofill, body.client-side.login-page #username:-webkit-autofill, body.client-side.login-page #passwd:-webkit-autofill, body.client-side.open-page #check-ticket #email:-webkit-autofill, body.client-side.open-page #check-ticket #ticketno:-webkit-autofill, body.client-side.tickets-page #email:-webkit-autofill, body.client-side.tickets-page #ticketno:-webkit-autofill, body.client-side.tickets-page #username:-webkit-autofill, body.client-side.tickets-page #passwd:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--glass-field-bg) inset !important; box-shadow: 0 0 0 1000px var(--glass-field-bg) inset !important; -webkit-text-fill-color: var(--glass-field-text) !important; } body.client-side.view-page #check-ticket #open-text input, body.client-side.login-page #check-ticket #open-text input, body.client-side.open-page #check-ticket #open-text input, body.client-side.tickets-page #check-ticket #open-text input { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 48px !important; } /* * Submit #clientLogin (#login-sign-in) — liquid glass come staff `.mp-login-btn` / home `.glass-actions` CTA. * Icona SVG come primo layer background (gli input non ammettono ::before shine). */ body.client-side:is(.view-page, .login-page, .open-page, .tickets-page) #clientLogin input:is(.client-choice-icon, #sign-in-button)[type="submit"] { --glass-portal-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19.79,15.41C20.74,13.24 20.74,10.75 19.79,8.59L17.05,9.83C17.65,11.21 17.65,12.78 17.06,14.17L19.79,15.41M15.42,4.21C13.25,3.26 10.76,3.26 8.59,4.21L9.83,6.94C11.22,6.35 12.79,6.35 14.18,6.95L15.42,4.21M4.21,8.58C3.26,10.76 3.26,13.24 4.21,15.42L6.95,14.17C6.35,12.79 6.35,11.21 6.95,9.82L4.21,8.58M8.59,19.79C10.76,20.74 13.25,20.74 15.42,19.78L14.18,17.05C12.8,17.65 11.22,17.65 9.84,17.06L8.59,19.79M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8Z'/%3E%3C/svg%3E"); display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 1.25rem auto 0 !important; min-height: 48px !important; padding: 0.7rem 1.75rem 0.7rem 3rem !important; border-radius: calc(var(--glass-radius-sm, 15px) + 2px) !important; font-weight: 700 !important; font-size: clamp(0.94rem, 1.35vw, 0.98rem) !important; text-align: center !important; text-transform: none !important; letter-spacing: 0.02em !important; line-height: 1.35 !important; border: 1px solid rgba(255, 255, 255, 0.32) !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 8, 28, 0.35); cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; background-color: transparent !important; background-image: var(--glass-portal-cta-icon), linear-gradient( 168deg, rgba(120, 200, 255, 0.42) 0%, rgba(55, 130, 240, 0.38) 38%, rgba(28, 72, 200, 0.62) 100% ) !important; background-repeat: no-repeat, no-repeat !important; background-position: left 1rem center, center !important; background-size: 24px 24px, 100% 100% !important; -webkit-backdrop-filter: blur(14px) saturate(175%); backdrop-filter: blur(14px) saturate(175%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 0 0 1px rgba(56, 145, 255, 0.18) inset, 0 12px 32px rgba(12, 48, 140, 0.48), 0 4px 14px rgba(0, 20, 80, 0.28) !important; transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.18s ease, background 0.22s ease, filter 0.2s ease !important; } body.client-side:is(.view-page, .login-page, .open-page, .tickets-page) #clientLogin input:is(.client-choice-icon, #sign-in-button)[type="submit"]:hover { transform: translateY(-1px) !important; border-color: rgba(255, 255, 255, 0.45) !important; background-image: var(--glass-portal-cta-icon), linear-gradient( 168deg, rgba(140, 215, 255, 0.5) 0%, rgba(70, 150, 255, 0.44) 40%, rgba(36, 92, 220, 0.68) 100% ) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 0 0 1px rgba(120, 190, 255, 0.28) inset, 0 16px 40px rgba(14, 64, 180, 0.55), 0 0 28px rgba(56, 145, 255, 0.22) !important; } body.client-side:is(.view-page, .login-page, .open-page, .tickets-page) #clientLogin input:is(.client-choice-icon, #sign-in-button)[type="submit"]:active { transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(0, 8, 40, 0.35) inset, 0 0 0 1px rgba(56, 145, 255, 0.14) inset, 0 8px 22px rgba(12, 48, 140, 0.42) !important; } body.client-side.view-page #options, body.client-side.login-page #options, body.client-side.open-page #check-ticket #options, body.client-side.tickets-page #options { color: var(--glass-text-muted) !important; } body.client-side.view-page #options a, body.client-side.login-page #options a, body.client-side.open-page #check-ticket #options a, body.client-side.tickets-page #options a { color: var(--glass-accent) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; } body.client-side.view-page #options a:hover, body.client-side.login-page #options a:hover, body.client-side.open-page #check-ticket #options a:hover, body.client-side.tickets-page #options a:hover { color: var(--glass-accent-hover) !important; } body.client-side.login-page #login-sign-in a[href*="pwreset"], body.client-side.open-page #check-ticket a[href*="pwreset"], body.client-side.tickets-page #check-ticket a[href*="pwreset"] { color: var(--glass-accent) !important; font-weight: 600; display: inline-block; margin-top: 0.65rem; } body.client-side.login-page #open-text strong, body.client-side.open-page #open-text strong, body.client-side.tickets-page #open-text strong { color: #ffb4b4 !important; } body.client-side.view-page #check-ticket .glass-portal-logo, body.client-side.login-page #check-ticket .glass-portal-logo, body.client-side.open-page #check-ticket .glass-portal-logo, body.client-side.tickets-page #check-ticket .glass-portal-logo { grid-column: 1 / -1; justify-self: stretch; text-align: center !important; width: 100% !important; max-width: min(960px, 96vw) !important; margin-left: auto !important; margin-right: auto !important; margin-top: 3.75rem !important; margin-bottom: 0.5rem !important; padding-top: 1.5rem !important; border-top: 1px solid rgba(255, 255, 255, 0.14); } body.client-side.view-page .glass-portal-logo a, body.client-side.login-page .glass-portal-logo a, body.client-side.open-page .glass-portal-logo a, body.client-side.tickets-page .glass-portal-logo a { display: block; width: 100%; max-width: min(960px, 96vw); margin: 0 auto; } body.client-side.view-page .glass-portal-logo img, body.client-side.login-page .glass-portal-logo img, body.client-side.open-page .glass-portal-logo img, body.client-side.tickets-page .glass-portal-logo img { display: block; margin: 0 auto !important; width: 100% !important; max-width: min(960px, 96vw) !important; height: auto !important; padding: clamp(0.85rem, 2.2vw, 1.35rem) clamp(1.1rem, 3vw, 2rem) !important; border-radius: var(--glass-radius); background: rgba(255, 255, 255, 0.98) !important; border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 14px 40px rgba(0, 8, 24, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2) inset; box-sizing: border-box; } body.client-side.view-page .glass-portal-logo a:focus-visible img, body.client-side.login-page .glass-portal-logo a:focus-visible img, body.client-side.open-page .glass-portal-logo a:focus-visible img, body.client-side.tickets-page .glass-portal-logo a:focus-visible img { outline: 3px solid rgba(168, 220, 255, 0.95); outline-offset: 4px; } /* Messaggi globali */ body.client-side.open-page #msg_error, body.client-side.open-page #msg_notice, body.client-side.open-page #msg_warning, body.client-side.view-page #msg_error, body.client-side.view-page #msg_notice, body.client-side.view-page #msg_warning, body.client-side.login-page #msg_error, body.client-side.login-page #msg_notice, body.client-side.login-page #msg_warning, body.client-side.tickets-page:has(#check-ticket) #msg_error, body.client-side.tickets-page:has(#check-ticket) #msg_notice, body.client-side.tickets-page:has(#check-ticket) #msg_warning, body.client-side.tickets-page:not(:has(#check-ticket)) #msg_error, body.client-side.tickets-page:not(:has(#check-ticket)) #msg_notice, body.client-side.tickets-page:not(:has(#check-ticket)) #msg_warning { border-radius: var(--glass-radius-sm); /*padding: 0.85rem 1rem !important;*/ max-width: 100%; box-sizing: border-box; } body.client-side.view-page #check-ticket input:focus-visible, body.client-side.login-page #check-ticket input:focus-visible, body.client-side.open-page #check-ticket input:focus-visible, body.client-side.tickets-page #check-ticket input:focus-visible { outline: 3px solid rgba(168, 220, 255, 0.95) !important; outline-offset: 2px !important; } body.client-side:is(.view-page, .login-page, .open-page, .tickets-page) #clientLogin input:is(.client-choice-icon, #sign-in-button):focus-visible { outline: none !important; background-image: var(--glass-portal-cta-icon), linear-gradient( 168deg, rgba(140, 215, 255, 0.5) 0%, rgba(70, 150, 255, 0.44) 40%, rgba(36, 92, 220, 0.68) 100% ) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 0 0 1px rgba(120, 190, 255, 0.28) inset, 0 16px 40px rgba(14, 64, 180, 0.55), 0 0 0 3px rgba(56, 145, 255, 0.35), 0 0 28px rgba(56, 145, 255, 0.22) !important; } /* -------------------------------------------------------------------------- */ /* open.php — #ticketForm: tablet e smartphone (dopo scout layout + mobile.css) */ /* -------------------------------------------------------------------------- */ @media screen and (max-width: 1024px) { body.client-side.open-page #ticketForm { padding: clamp(0.9rem, 2.4vw, 1.45rem) !important; border-radius: 14px; max-width: 100%; box-sizing: border-box; } /* Allinea titolo campo + select su tutta la colonna (evita “buchi” a destra) */ body.client-side.open-page #ticketForm label { width: 100% !important; max-width: 100% !important; margin-bottom: 0.45rem !important; } body.client-side.open-page #ticketForm .form-header h3 { margin-bottom: 0.45rem !important; } body.client-side.open-page #ticketForm td, body.client-side.open-page #ticketForm th { word-break: break-word; overflow-wrap: anywhere; } body.client-side.open-page #ticketForm .redactor-toolbar { gap: 10px !important; } body.client-side.open-page #ticketForm .redactor-toolbar .re-toolbar-group-format, body.client-side.open-page #ticketForm .redactor-toolbar .re-toolbar-group-actions { flex: 1 1 auto !important; min-width: min(100%, 240px) !important; } body.client-side.open-page #ticketForm .filedrop .dropzone { padding: 1rem 0.85rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply { padding: clamp(0.9rem, 2.4vw, 1.45rem) !important; border-radius: 14px; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar { gap: 10px !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar .re-toolbar-group-format, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar .re-toolbar-group-actions { flex: 1 1 auto !important; min-width: min(100%, 240px) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .filedrop .dropzone { padding: 1rem 0.85rem !important; } } @media screen and (max-width: 768px) { body.client-side.open-page #ticketForm { padding: 0.85rem max(0.65rem, env(safe-area-inset-left, 0px)) 0.85rem max(0.65rem, env(safe-area-inset-right, 0px)) !important; } body.client-side.open-page #ticketForm hr { margin: 0.65rem 0 !important; } /* Righe email/cliente: etichetta sopra valore (td in colonna senza spezzare tbody) */ body.client-side.open-page #ticketForm tr.client-deets td { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0.35rem 0.85rem !important; box-sizing: border-box; border-left: none !important; border-radius: 0 !important; background: rgba(15, 23, 42, 0.38) !important; } body.client-side.open-page #ticketForm tr.client-deets td:first-child { width: 100% !important; max-width: 100% !important; font-weight: 700 !important; color: rgba(200, 220, 245, 0.98) !important; padding-bottom: 0.15rem !important; padding-left: 0.85rem !important; text-transform: uppercase !important; font-size: 0.75rem !important; } body.client-side.open-page #ticketForm tr.client-deets td:last-child { color: #ffffff !important; font-size: 0.95rem !important; padding-top: 0 !important; padding-bottom: 0.65rem !important; border-bottom: none !important; } body.client-side.open-page #ticketForm tr.client-deets:first-of-type td:first-child { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; padding-top: 0.75rem !important; } body.client-side.open-page #ticketForm tr.client-deets:last-of-type td:last-child { border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } body.client-side.open-page #ticketForm tr.client-deets + tr.client-deets td:first-child { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 0.65rem !important; } /* CAPTCHA: colonna unica, immagine fluida */ body.client-side.open-page #ticketForm #captcha-image, body.client-side.open-page #ticketForm #captcha-text { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0.35rem 0 !important; text-align: left !important; } body.client-side.open-page #ticketForm .captcha img { max-width: 100% !important; height: auto !important; display: block; } body.client-side.open-page #ticketForm #captcha { width: 100% !important; max-width: 100% !important; } /* Toolbar Redactor: target tocco ≥ 44px */ body.client-side.open-page #ticketForm .redactor-toolbar a, body.client-side.open-page #ticketForm .redactor-toolbar a.re-button-icon { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } body.client-side.open-page #ticketForm .redactor-toolbar .re-toolbar-group { justify-content: flex-start !important; } body.client-side.open-page #ticketForm .redactor-editor, body.client-side.open-page #ticketForm .redactor-in { min-height: 220px !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar a, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar a.re-button-icon { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar .re-toolbar-group { justify-content: flex-start !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-editor, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-in { min-height: 220px !important; } } @media screen and (max-width: 768px) { body.client-side.view-page #check-ticket, body.client-side.login-page #check-ticket, body.client-side.open-page #check-ticket, body.client-side.tickets-page #check-ticket { grid-template-columns: 1fr !important; } } @media (prefers-reduced-motion: reduce) { body.client-side:is(.view-page, .login-page, .open-page, .tickets-page) #clientLogin input:is(.client-choice-icon, #sign-in-button)[type="submit"] { transition: none !important; } body.client-side:is(.view-page, .login-page, .open-page, .tickets-page) #clientLogin input:is(.client-choice-icon, #sign-in-button)[type="submit"]:hover { transform: none !important; } } @media (prefers-reduced-transparency: reduce) { body.client-side:is(.view-page, .login-page, .open-page, .tickets-page) #clientLogin input:is(.client-choice-icon, #sign-in-button)[type="submit"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-image: var(--glass-portal-cta-icon), linear-gradient(168deg, #2a7fe0 0%, #2456c8 52%, #1c4cb0 100%) !important; } body.client-side:is(.view-page, .login-page, .open-page, .tickets-page) #clientLogin input:is(.client-choice-icon, #sign-in-button)[type="submit"]:hover, body.client-side:is(.view-page, .login-page, .open-page, .tickets-page) #clientLogin input:is(.client-choice-icon, #sign-in-button)[type="submit"]:focus-visible { background-image: var(--glass-portal-cta-icon), linear-gradient(168deg, #3a8ef0 0%, #2a62d8 52%, #2058c8 100%) !important; } } @media screen and (max-width: 600px) { body.client-side.open-page #ticketForm { padding: 0.75rem max(0.5rem, env(safe-area-inset-left, 0px)) 1rem max(0.5rem, env(safe-area-inset-right, 0px)) !important; margin-top: 0.35rem; } /* Campi su colonna intera: più comodo al tocco e batte larghezze fisse legacy desktop */ body.client-side.open-page #ticketForm input[type="text"], body.client-side.open-page #ticketForm input[type="email"], body.client-side.open-page #ticketForm input[type="tel"], body.client-side.open-page #ticketForm input[type="password"], body.client-side.open-page #ticketForm input[type="number"], body.client-side.open-page #ticketForm input[type="date"], body.client-side.open-page #ticketForm input[type="url"], body.client-side.open-page #ticketForm #dynamic-form input[type="text"], body.client-side.open-page #ticketForm #dynamic-form input[type="email"], body.client-side.open-page #ticketForm #dynamic-form input[type="tel"], body.client-side.open-page #ticketForm #dynamic-form input[type="number"], body.client-side.open-page #ticketForm #dynamic-form input[type="date"] { width: 100% !important; max-width: 100% !important; } body.client-side.open-page #ticketForm select, body.client-side.open-page #ticketForm #dynamic-form select { width: 100% !important; max-width: 100% !important; } body.client-side.open-page #ticketForm textarea, body.client-side.open-page #ticketForm #dynamic-form textarea { max-width: 100% !important; width: 100% !important; } body.client-side.open-page #ticketForm .select2-container { max-width: calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important; width: 100% !important; } body.client-side.open-page #ticketForm td[style*="padding-top"] { padding-top: 0.65rem !important; } body.client-side.open-page #ticketForm .form-header b, body.client-side.open-page #ticketForm .form-header h3 { font-size: clamp(0.98rem, 4.2vw, 1.08rem) !important; } body.client-side.open-page #ticketForm .buttons { display: flex !important; flex-direction: column !important; gap: 0.55rem !important; align-items: stretch !important; padding: 0 0.15rem !important; box-sizing: border-box; } body.client-side.open-page #ticketForm .buttons input[type="submit"], body.client-side.open-page #ticketForm .buttons input[type="reset"], body.client-side.open-page #ticketForm .buttons input[type="button"], body.client-side.open-page #ticketForm p.buttons input[type="submit"], body.client-side.open-page #ticketForm p.buttons input[type="reset"], body.client-side.open-page #ticketForm p.buttons input[type="button"] { width: 100% !important; display: block !important; margin: 0 !important; min-height: 48px !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; } body.client-side.open-page #ticketForm .redactor-toolbar .re-toolbar-group-format, body.client-side.open-page #ticketForm .redactor-toolbar .re-toolbar-group-actions { flex: 1 1 100% !important; min-width: 0 !important; } body.client-side.open-page #ticketForm .redactor-statusbar { padding: 0.45rem 0.6rem !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar .re-toolbar-group-format, body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-toolbar .re-toolbar-group-actions { flex: 1 1 100% !important; min-width: 0 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #reply .redactor-statusbar { padding: 0.45rem 0.6rem !important; } } @media screen and (max-width: 480px) { body.client-side.open-page #ticketForm { padding: 0.65rem max(0.4rem, env(safe-area-inset-left, 0px)) 0.85rem max(0.4rem, env(safe-area-inset-right, 0px)) !important; border-radius: 12px; } body.client-side.open-page #ticketForm label { font-size: 0.9rem !important; } body.client-side.open-page #ticketForm .glass-portal-hint { font-size: 0.88rem !important; line-height: 1.5 !important; } } /* ============================================================================= Lista ticket (loggato) — banner interventi: vetro giallo + CTA pill; accordion guida ============================================================================= */ body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-fiscal-notice.mp-interventi-tickets-banner { display: flex; align-items: flex-start; gap: 0.85rem; margin: 0 0 clamp(1rem, 2.5vw, 1.25rem); padding: clamp(1rem, 2.5vw, 1.2rem) clamp(1.05rem, 2.8vw, 1.35rem); border-radius: var(--glass-radius-sm); border: 1px solid rgba(253, 224, 71, 0.38); background: linear-gradient( 145deg, rgba(120, 53, 15, 0.5) 0%, rgba(69, 26, 3, 0.58) 48%, rgba(45, 18, 2, 0.52) 100% ); box-shadow: var(--glass-shadow), 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 0 0 1px rgba(251, 191, 36, 0.14) inset; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(175%); backdrop-filter: blur(var(--glass-blur)) saturate(175%); } body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-fiscal-notice.mp-interventi-tickets-banner .mp-fiscal-notice__icon { width: 1.55rem; height: 1.55rem; flex-shrink: 0; color: #fde047; fill: #fde047; filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.35)); } body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-fiscal-notice.mp-interventi-tickets-banner .mp-fiscal-notice__title { color: #fef9c3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-fiscal-notice.mp-interventi-tickets-banner .mp-fiscal-notice__subtitle { color: rgba(254, 243, 199, 0.82); } body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-interventi-tickets-banner .mp-interventi-tickets-banner__cta { margin: 0.65rem 0 0; } body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-interventi-tickets-banner .mp-fiscal-notice__link { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none !important; color: #0f172a !important; background: linear-gradient(180deg, #fef08a 0%, #facc15 45%, #eab308 100%); border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 4px 16px rgba(69, 26, 3, 0.45); transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-interventi-tickets-banner .mp-fiscal-notice__link:hover, body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-interventi-tickets-banner .mp-fiscal-notice__link:focus-visible { color: #0f172a !important; text-decoration: none !important; filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 6px 20px rgba(69, 26, 3, 0.5); } body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-interventi-tickets-banner .mp-fiscal-notice__link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-interventi-tickets-banner .mp-fiscal-notice__link:hover, body.client-side.tickets-page:not(:has(#check-ticket)) #content > .mp-interventi-tickets-banner .mp-fiscal-notice__link:focus-visible { transform: none; } } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide { border: 1.5px solid var(--mp-amber-border) !important; border-radius: 14px !important; background: var(--mp-amber-bg) !important; box-shadow: var(--mp-amber-glow) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; overflow: hidden; } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide summary { font-family: var(--glass-font-sans) !important; font-size: var(--mp-guide-font-size, 0.875rem) !important; font-weight: 500 !important; background: var(--mp-amber-bg) !important; border-bottom: 1px solid rgba(245, 158, 11, 0.32) !important; box-shadow: 0 1px 0 rgba(245, 158, 11, 0.12) inset !important; color: var(--mp-amber-text-strong) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide:not([open]) summary { border-bottom: none !important; } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide summary:hover { background: rgba(245, 158, 11, 0.16) !important; box-shadow: 0 1px 0 rgba(245, 158, 11, 0.2) inset !important; } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide[open] summary { border-bottom-color: rgba(245, 158, 11, 0.38) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide summary::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fbbf24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat !important; opacity: 0.95 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide__body { position: relative; isolation: isolate; contain: paint; border-top: 1px solid var(--mp-guide-body-border-top) !important; background: var(--mp-guide-body-bg) !important; -webkit-backdrop-filter: blur(10px) saturate(130%) !important; backdrop-filter: blur(10px) saturate(130%) !important; box-shadow: inset 0 1px 0 var(--mp-guide-body-inset) !important, 0 8px 26px rgba(12, 8, 4, 0.42) !important, 0 0 0 1px rgba(245, 158, 11, 0.08) inset !important; color: rgba(255, 251, 235, 0.94) !important; font-size: var(--mp-guide-font-size, 0.875rem) !important; line-height: 1.65 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide__body p, body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide__body ul, body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide__body li, body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide__body strong { font-size: inherit !important; } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide__body p:first-child { color: var(--mp-amber-text-strong) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide__body li strong { color: #fef3c7 !important; } body.client-side.tickets-page:not(:has(#check-ticket)) .portal-tickets-page .mp-guide summary:focus-visible { outline: 2px solid var(--mp-amber-text) !important; outline-offset: 2px !important; } /* ========================================================================== FIX DEFINITIVO — rail dotted visibile per alpha-blending (client) -------------------------------------------------------------------------- Nel client la struttura è #ticketThread > .thread-entry (NO #thread-items). Stessa specificità (2,3,1) della regola base, ma posizione SUCCESSIVA nel file → vince per background-color (entrambe !important, stessa specificità, ordine di dichiarazione decide). Il gradient background-image rimane intatto. ========================================================================== */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry { background-color: rgb(14, 26, 50) !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-event { background-color: rgb(10, 18, 36) !important; } /* -------------------------------------------------------------------------- * Allegati thread cliente — chip come staff + modale PDF (iframe inline) * -------------------------------------------------------------------------- */ body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .thread-body { position: relative !important; z-index: 1 !important; pointer-events: auto !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .attachments { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 0.45rem 0.55rem !important; padding: 0.65rem 1.1rem !important; margin: 0 !important; position: static !important; top: auto !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .attachment-info { display: inline-block !important; max-width: min(28rem, 100%) !important; width: fit-content !important; vertical-align: middle !important; white-space: nowrap !important; padding: 0.25rem 0.65rem !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; font-size: 0.8rem !important; color: rgba(203, 213, 225, 0.9) !important; overflow: hidden !important; box-sizing: border-box !important; pointer-events: auto !important; cursor: pointer !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .mp-attachment-item { display: inline-block !important; max-width: 100% !important; vertical-align: middle !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .attachment-info .filename { display: inline-block !important; max-width: 20rem !important; line-height: 1.25 !important; vertical-align: middle !important; color: rgba(147, 197, 253, 0.96) !important; text-decoration: none !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; pointer-events: auto !important; cursor: pointer !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .attachment-info .filename:hover, body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .attachment-info .filename:focus-visible { color: rgba(186, 230, 253, 0.98) !important; text-decoration: underline !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .attachment-info .filesize { color: rgba(148, 163, 184, 0.75) !important; font-size: 0.72rem !important; white-space: nowrap !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .attachment-info i.icon-paperclip { color: rgba(125, 211, 252, 0.85) !important; line-height: 1 !important; vertical-align: middle !important; margin-inline-end: 0.35rem !important; margin-top: 0 !important; margin-bottom: 0 !important; position: static !important; top: auto !important; } body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread .thread-entry .attachment-info i.icon-paperclip::before { position: relative !important; top: 0 !important; display: inline-block !important; vertical-align: middle !important; } body.client-side.mp-client-pdf-modal--body-lock { overflow: hidden !important; } .mp-client-pdf-modal[hidden] { display: none !important; } .mp-client-pdf-modal.is-open { display: flex !important; align-items: center !important; justify-content: center !important; position: fixed !important; inset: 0 !important; z-index: 100100 !important; box-sizing: border-box !important; padding: max(10px, 2.5vh) max(12px, 3vw) !important; } body > .mp-client-pdf-modal.is-open { z-index: 100500 !important; isolation: isolate !important; } .mp-client-pdf-modal__backdrop { position: absolute !important; inset: 0 !important; background: rgba(6, 12, 24, 0.72) !important; -webkit-backdrop-filter: blur(6px) saturate(120%) !important; backdrop-filter: blur(6px) saturate(120%) !important; } .mp-client-pdf-modal__panel { position: relative !important; z-index: 1 !important; width: min(1120px, 100%) !important; max-height: min(92vh, 900px) !important; display: flex !important; flex-direction: column !important; border-radius: 16px !important; overflow: hidden !important; background: rgba(22, 34, 56, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 24px 64px rgba(0, 4, 18, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important; } .mp-client-pdf-modal__head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; padding: 0.55rem 0.85rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; flex: 0 0 auto !important; } .mp-client-pdf-modal__fname { margin: 0 !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #f1f5f9 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; flex: 1 1 auto !important; min-width: 0 !important; } .mp-client-pdf-modal__close { flex: 0 0 auto !important; border: none !important; background: rgba(255, 255, 255, 0.08) !important; color: #e2e8f0 !important; width: 2.25rem !important; height: 2.25rem !important; border-radius: 10px !important; cursor: pointer !important; font-size: 1.35rem !important; line-height: 1 !important; } .mp-client-pdf-modal__close:hover { background: rgba(255, 255, 255, 0.14) !important; } .mp-client-pdf-modal__body { flex: 1 1 auto !important; min-height: 0 !important; background: rgba(10, 16, 28, 0.95) !important; } .mp-client-pdf-modal__iframe { display: block !important; width: 100% !important; height: min(78vh, 760px) !important; border: 0 !important; background: #0b1220 !important; } @media (max-width: 640px) { .mp-client-pdf-modal__iframe { height: min(72vh, 560px) !important; } }