/* ============================================================================ * assets/css/app.css — Stile di pannello admin, area clienti, installazione * * Punti di rottura (uguali in tutto il file): * > 1000px computer * ≤ 1000px tablet: statistiche su 2 colonne, riquadri su 1 colonna * ≤ 860px smartphone grande / tablet verticale: menu admin a cassetto, * menu clienti a tendina, colonna laterale sotto (o sopra) il contenuto * ≤ 480px smartphone: tutto su una colonna * * Regole fisse per lo smartphone: * - campi di testo a 16px (sotto, iPhone ingrandisce la pagina al tocco) * - elementi toccabili alti almeno 44px * - tabelle dentro .table-wrap: scorrono in orizzontale invece di rompere la pagina * - .hide-sm nasconde le colonne secondarie sugli schermi stretti * - margini di sicurezza per iPhone con notch (env(safe-area-inset-*)) * * Versione: 1.54.1 (2026-11-01) * Changelog: * - 1.54.1 (2026-11-01): Avvisi: tasti Risolto/Sblocca a destra, riga dell'accesso bloccato in giallo. * - 1.53.7 (2026-10-30): etichetta Prezzo riservato (.promo-pill). * - 1.53.4 (2026-10-30): colore delle opzioni che si tolgono (.upg-dropped). * - 1.53.0 (2026-10-30): etichetta Chiuso rossa; riquadro Di chi è l'errore. * - 1.52.3 (2026-10-30): Da pagare del Riepilogo a tutta larghezza con sfondo d'avviso. * - 1.52.2 (2026-10-30): stato dei rinnovi cliccabile, Pagata con il metodo. * - 1.52.0 (2026-10-29): strisce, carrello (promo, consigliati, nota, termini), ticket suggeriti. * - 1.51.4 (2026-10-29): dashboard riordinata, stato della prefattura cliccabile nell'area, Prodotti e servizi con prezzi e totale * - 1.51.2 (2026-10-26): Utenti: spunte a inizio riga, colonne ordinabili, mail di verifica a più utenti * - 1.51.0 (2026-10-26): permessi del nuovo utente su tre colonne. * - 1.50.0 (2026-10-26): dashboard: card su tre colonne (due righe), barra di ricerca. * - 1.47.5 (2026-10-24): Archivia: la conferma dell'eliminazione rientrata sotto la scelta. * - 1.47.0 (2026-10-24): più spazio tra le colonne delle tabelle allineate del Riepilogo; pagina Domini sul registrar (.rs-*) e widget della dashboard. * - 1.46.2 (2026-10-24): tabelle allineate (.tbl-align) del Riepilogo del cliente. * - 1.46.0 (2026-10-24): Da pagare e Accessi e parametri nel Riepilogo del cliente; avviso con Pagata sul servizio; elenco delle password mancanti. * - 1.45.1 (2026-10-24): dashboard da cellulare come un'app: card delle cose da fare a due colonne, sezioni chiuse con la freccia, niente riquadri con lo scorrimento interno, rinnovi e prefatture scadute in colonna (nome su tutta la riga, dati sotto). * - 1.44.0 (2026-10-22): editor delle mail (.rte); listino domini con grazia e redenzione; tasti raggruppati e popup della scheda del dominio. * - 1.43.0 (2026-10-20): card della dashboard a 4 o 5; Da gestire. * - 1.42.0 (2026-10-20): Scadenze e rinnovi: righe che si aprono; stato annullata. * - 1.41.1 (2026-10-19): riga Azioni delle prefatture scadute in dashboard. * - 1.41.0 (2026-10-19): Archivia: pagina di conferma e tasto. * - 1.39.0 (2026-10-17): Registro mail. * - 1.38.0 (2026-10-17): Assistenza Continuativa. * - 1.37.0 (2026-10-16): area clienti: scelta dell'account a destra. * - 1.36.0 (2026-10-16): pagina Collegamento QuadraGest (qg-*). * - 1.35.2 (2026-10-16): riquadro della disdetta. * - 1.35.1 (2026-10-16): nome cliccabile in Rinnova; Annulla la disdetta nell'avviso. * - 1.35.0 (2026-10-16): Rinnova: etichetta a destra e riga con la (i). * - 1.34.1 (2026-10-16): Rinnova: riga informativa della coppia in grigio. * - 1.34.0 (2026-10-16): Rinnova: riga della coppia hosting + dominio. * - 1.33.1 (2026-10-16): griglia della Home: stessa altezza degli elementi nella stessa riga. * - 1.33.0 (2026-10-16): griglia della Home e sezioni (linea colorata, icona, pulsante). * - 1.31.1 (2026-10-16): card della home: tile-stats, tile-num 40 px, tile-lbl 12 px, icona in alto a destra. * - 1.31.0 (2026-10-16): Dove si vede, schede seg-tabs, righe di Rinnova. * - 1.30.0 (2026-10-16): menu ad albero, errore del carrello che va a capo, riquadro del cambio email. * - 1.29.4 (2026-10-16): editor delle voci: righe di serie, colonne Ordine/Scheda/Mostra compatte. * - 1.29.2 (2026-10-15): attesa (spinner) e popup del whois. * - 1.29.1 (2026-10-15): Listino domini: tabella della prova dei motori. * - 1.29.0 (2026-10-15): Scegli un dominio (ricerca, risultati, scelte). * - 1.28.0 (2026-10-15): Aspetto → Widget (pagina, modifica, anteprima) e widget nell'area clienti. * - 1.27.5 (2026-10-15): Credito assistenza: linea e link come i pannelli del negozio. * - 1.27.4 (2026-10-15): Prefatture: intestazioni cliccabili, tendina dello stato colorata come l'etichetta. * - 1.27.0 (2026-10-15): Gestisci prefattura (barra in alto, schede in card separate, voci, libro mastro); Account sul server a tutta larghezza. * - 1.26.2 (2026-10-13): sezioni della scheda server separate; anteprima delle mail. * - 1.26.1 (2026-10-13): scheda server in tre sezioni. * - 1.26.0 (2026-10-12): angoli meno tondi (5px finestre, 3px campi e pulsanti); benvenuto più basso a tutta larghezza; menu Servizi e Domini con tendina; negozio, carrello. * - 1.25.4 (2026-10-11): riquadro della prova con i clienti veri. * - 1.25.1 (2026-10-10): Rimuovi spento in grigio quando la prefattura non si può rimuovere. * - 1.25.0 (2026-10-10): archivio ad albero, Scadenze e rinnovi (totali, interruttore, stampa), barra di gruppo, azioni di riga. * - 1.23.0 (2026-10-09): stampa della prefattura con i dati per il pagamento. * - 1.22.0 (2026-10-09): prefattura: "Come vuoi pagare?" a pulsanti con una sezione per metodo. * - 1.21.0 (2026-10-09): pagina Testi dell'area clienti. * - 1.20.0 (2026-10-09): area clienti: intestazioni di sezione (riquadri, colonna sinistra, popup) e di tabella in grigio chiaro. * - 1.20.0 (2026-10-09): tendine del menu dell'area clienti con icone; Metodi di pagamento, Sicurezza account, Cronologia * email, Credito prepagato. * - 1.19.4 (2026-10-09): colonna ID allineata a sinistra (col-id). * - 1.19.2 (2026-10-09): ordine annullato: riquadro "Rimetti in lavorazione" con la data. * - 1.19.1 (2026-10-09): Nuovo ordine con le sezioni distanziate; tipo dell'ordine; prefattura esistente in Cosa fare adesso. * - 1.19.0 (2026-10-09): Nuovo ordine (due terzi + riepilogo), pagina dell'ordine, azioni delle prefatture e cattura, scheda servizio riordinata. * - 1.18.1 (2026-10-09): Automazioni come WHMCS (etichetta su bianco, campo su grigio, righetta bianca); Auto-ricalcola; pulsante www. * - 1.18.0 (2026-10-09): aiuti dei campi solo come tooltip (etichetta a puntini, "?"), su telefono al tocco; Ricalcola dal listino; * Cambia pacchetto su una riga sua; Upgrade/Downgrade (conto e modulo); striscia "Conferma la tua email" dell'area clienti. * - 1.17.1 (2026-10-09): Trasferisci con i risultati in tabella dentro il riquadro; comandi del pannello in linea sotto "Pannello"; testo delle opzioni. * - 1.17.0 (2026-10-09): linguette del Profilo cliente su fondo grigio-azzurro, divise da un bordo, quella aperta bianca come la pagina; * barra della scheda servizio (obj-bar, menu "Altro", lucchetto SSL), action-card, statistiche, Trasferisci in colonna, mail-view. * - 1.16.0 (2026-10-09): disdette (cancel-box, cancel-note, option.opt-cancel in rosso), archivio del cliente (cp-archive), * Trasferisci proprietà (live-results, transfer-sum, transfer-notes). * - 1.15.1 (2026-10-08): tolti gli stili del riquadro di eliminazione della pagata (non c'è più). * - 1.15.0 (2026-10-08): riquadro "Elimina questa prefattura" con le opzioni (pf-delete), plain-list, tester-card. * Corretto: la barra delle azioni sulle spuntate dell'elenco Prefatture era nascosta dalla regola della barra di * Prodotti/Servizi (ora quella vale solo per [data-bulk-bar]). * - 1.14.0 (2026-10-08): riquadro "Invia una mail di prova" nei Modelli email (mail-test). * - 1.13.0 (2026-10-08): riquadro Rimborsa (refund-mode, refund-btn) e righe dei rimborsi tra i pagamenti. * - 1.11.0 (2026-10-08): filtro avanzato di Prodotti/Servizi (filter-bar, adv-filters, filter-chips, chip, mail-list). * - 1.10.0 (2026-10-08): arancione delle scadenze vero (#f07c00, prima bruciato e troppo simile al rosso); pagina Vendite (sale-*), tabelle ordinabili sul posto, nav.seg. * - 1.9.1 (2026-10-08): carattere Open Sans (nel pacchetto, assets/fonts) al posto di Segoe UI / di sistema; nessun * grassetto: il massimo è il semibold (600) ovunque, titoli, , e intestazioni comprese; intestazioni * ordinabili (th-sort), "Nascondi inattivi", colonna Scadenza dei rinnovi in dashboard (renew-due). * - 1.9.0 (2026-10-08): area clienti Metodo di pagamento (pm-*), riquadro Pagamento nella scheda cliente. * - 1.8.1 (2026-10-07): Automazioni a tabelle (etichetta a destra un terzo, valore a sinistra due terzi). * - 1.8.0 (2026-10-07): riquadro Aggiorna da WHMCS. * - 1.7.2 (2026-10-07): pagina Novità e guida. * - 1.7.0 (2026-10-07): pagina Automazioni (righe compatte stile foglio, interruttori, anteprima, registro). * - 1.6.0 (2026-10-07): Gestione lead (stati colorati, prossimi passi, cronologia dei contatti). * - 1.5.1 (2026-10-07): Profilo cliente (intestazione, linguette, riepilogo a riquadri tabellari, tendina "Vai a"). * - 1.5.0 (2026-10-07): etichetta "Impostazioni" nel menu; linguette secondarie; elenco Prodotti/Servizi (selezione, * "+" con i dettagli); listino domini; ricerca e ordine di un dominio; transazioni; verifica in due passaggi. * - 1.4.0 (2026-10-07): opzioni configurabili (gruppi, griglia dei prezzi per ciclo, opzioni nel servizio, nell'area * clienti e nelle righe del preventivo). * - 1.3.1 (2026-10-07): problemi aperti in rosso in cima agli Avvisi del sistema. * - 1.3.0 (2026-10-07): nuova dashboard (card delle cose da fare, metà/metà ad altezza fissa, due terzi / un terzo), * coda del modulo, istruzioni del cron. * - 1.2.2 (2026-10-07): rinnovi della dashboard raggruppati per cliente. * - 1.2.1 (2026-10-07): Stato del sistema (righe e pastiglie per stato). * - 1.2.0 (2026-10-06): preventivi e ordini (stati, tabella delle righe con prodotto, destinatario, accettazione), * pagine aperte dal link della mail (preventivo.php, paga.php). * - 1.1.1 (2026-10-06): linguette senza barra di scorrimento (riga sotto disegnata con un'ombra interna); pulsante DirectAdmin nell'intestazione del servizio. * - 1.1.0 (2026-10-06): pagina del servizio e del dominio nell'area clienti (intestazione, password con l'occhietto, * SSL, barre dell'utilizzo risorse, servizi aggiuntivi da comprare); dominio sotto il pacchetto negli elenchi. * - 1.0.4 (2026-10-06): schede a una sola colonna (es. riquadro "Modulo" nella configurazione dei moduli) * a tutta larghezza; nella colonna laterale etichette più strette, valori sulla stessa riga. * - 1.0.3 (2026-10-06): testi lunghi nelle colonne laterali vanno a capo. * - 1.0.2 (2026-10-06): pagina Aggiornamenti. * - 1.0.0 (2026-10-06): pagina Moduli, scheda modulo, "Come pagare" nell'area clienti. * - 0.19.0 (2026-10-06): pagina Bollo e commissioni (.fee-table), righe automatiche nella modifica pro forma, totale per metodo. * - 0.18.0 (2026-10-06): spunte e azioni a gruppi (.bulk-bar, .col-check, riga spuntata); modifica * della pro forma (.pf-edit-table, riga "Togli" barrata); invio al cliente / errata corrige. * - 0.17.1 (2026-10-06): pulsante "Entra nell'area come il cliente" accanto al percorso; riga del credito in modifica evidenziata. * - 0.17.0 (2026-10-06): servizi, domini e pro forma (stati colorati, scadenze, uso disco/traffico, totali). * - 0.16.1 (2026-10-06): pagina Prodotti e servizi compatta (barra con gruppo a tendina, tabella a righe alternate). * - 0.16.0 (2026-10-06): tabelle a righe alternate (.table-zebra), pagina Importa da WHMCS. * - 0.15.0 (2026-10-06): scelta "Si aggiunge a" dei servizi aggiuntivi nella scheda prodotto. * - 0.14.0 (2026-10-06): anteprima dei gruppi di prodotti (barra in alto), pulsante spento, * scelta della visualizzazione (lo stile dei template sta dentro i file dei template). * - 0.13.1 (2026-10-06): moduli "a foglio" (.sheet): righe compatte stile Excel, senza bordi, * alternate bianco / grigio chiaro, etichetta a sinistra e campo a destra (scheda cliente). * - 0.13.0 (2026-10-06): server DirectAdmin (colonna di caselle, contenuto del pacchetto). * - 0.12.0 (2026-10-06): schede della scheda prodotto, tabella prezzi con riga Installazione, * regole di fatturazione, campi personalizzati; modelli mail per gruppi. * - 0.11.3 (2026-10-06): frecce di ordinamento negli elenchi; logo nelle intestazioni e sopra l'accesso; * dati fiscali nel piè di pagina; campo immagine nelle Impostazioni. * - 0.11.2 (2026-10-05): gruppi di prodotti (scelta dell'icona, indirizzo, elenco con icone). * - 0.11.1 (2026-10-05): scelta Ricorrente / Una tantum nella scheda prodotto, etichetta "Una tantum". * - 0.11.0 (2026-10-05): prodotti (tabella prezzi per listino e ciclo, cicli a pulsanti, * prezzi per gruppo, percorsi di upgrade). * - 0.10.0 (2026-10-05): ticket (elenchi, conversazione, note interne, allegati, stati e * priorità colorati), contatore nel menu del pannello. * - 0.9.0 (2026-10-05): credito assistenza (saldo, cronologia, modulo movimenti), pagina * Aspetto area clienti (righe spostabili), scelta a pulsanti (.seg). * - 0.8.0 (2026-10-05): Guida in linea (elenco, ricerca, articolo, anteprima nel pannello); * pannello Credito assistenza nella colonna sinistra; voci "presto" nel menu dell'area * clienti (solo modalità test). * - 0.7.1 (2026-10-05): pagine a piena larghezza (.admin-content.is-wide); intestazioni * di tabella cliccabili per ordinare. * - 0.7.0 (2026-10-05): gruppi colorati (etichetta, striscia nell'elenco clienti, colori * proposti), popup per "Nuovo gruppo" (a schermo intero da smartphone). * - 0.6.1 (2026-10-05): di nuovo visibili nel menu admin le voci "presto", anche dentro * i gruppi (gruppo tutto da fare in grigio con "presto"). * - 0.6.0 (2026-10-05): area clienti con accesso: pagina di login centrata, selettore * del cliente, riquadro utente, fascia "stai vedendo l'area come", sezioni "In arrivo", * campi in sola lettura; modelli mail (anteprima, segnaposto). * - 0.5.0 (2026-10-05): menu con sottovoci richiudibili; banner "cliente senza utente"; * sezione accesso nel modulo nuovo cliente. * - 0.4.0 (2026-10-05): stili per elenchi con filtri, moduli a due colonne, schede * (Impostazioni), permessi utente, paginazione, pulsanti secondari, pagina password. * - 0.3.0 (2026-10-03): revisione completa per smartphone: cassetto admin con sfondo * scuro e pulsante di chiusura, menu clienti a tendina, tabelle scorrevoli, * campi a 16px, aree di tocco da 44px, gruppi di menu admin, safe-area iPhone, * colore principale come variabile unica. * - 0.2.0 (2026-10-03): stili dell'installazione guidata (sezioni, griglia campi, caselle, select, area codice). * - 0.1.0 (2026-10-03): prima stesura. * ========================================================================== */ /* Open Sans (SIL OFL, assets/fonts/OFL.txt) — variabile 300–800, usata fino a 600 (semibold) */ @font-face { font-family: "Open Sans"; font-style: normal; font-display: swap; font-weight: 300 800; src: url(../fonts/open-sans-latin-wght-normal.woff2) format("woff2-variations"), url(../fonts/open-sans-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Open Sans"; font-style: normal; font-display: swap; font-weight: 300 800; src: url(../fonts/open-sans-latin-ext-wght-normal.woff2) format("woff2-variations"), url(../fonts/open-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Open Sans"; font-style: italic; font-display: swap; font-weight: 300 800; src: url(../fonts/open-sans-latin-wght-italic.woff2) format("woff2-variations"), url(../fonts/open-sans-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Open Sans"; font-style: italic; font-display: swap; font-weight: 300 800; src: url(../fonts/open-sans-latin-ext-wght-italic.woff2) format("woff2-variations"), url(../fonts/open-sans-latin-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root { --bg: #f4f5f7; --surface: #ffffff; --line: #e3e6ea; --text: #1d2430; --muted: #6b7482; --primary: #1f5fbf; --primary-d: #184c99; --primary-l: #eaf1fb; --accent: #0f8a6c; --danger: #c0392b; --warn-bg: #fff4d6; --warn-tx: #7a5600; --side-bg: #141b26; --side-tx: #b7c0cd; --side-hi: #ffffff; --side-w: 268px; --radius: 5px; /* 1.26.0: angoli meno tondi (Roberto, 12/10: "3 o 5 pixel") */ --radius-sm: 3px; --tap: 44px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); --font: "Open Sans", Arial, "Helvetica Neue", sans-serif; } *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html,body { margin: 0; } body { font: 15px/1.5 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } body.no-scroll { overflow: hidden; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1,h2,h3 { line-height: 1.25; margin: 0; } /* niente grassetto: il massimo è il semibold */ b, strong, th, h1, h2, h3, h4, h5, h6, optgroup, legend, dt { font-weight: 600; } .muted { color: var(--muted); } .small { font-size: 13px; } .ico { width: 18px; height: 18px; flex: none; } [hidden] { display: none !important; } /* --- Fascia modalità test ------------------------------------------------- */ .testbar { background: repeating-linear-gradient(-45deg, #f5b400 0 14px, #f0a800 14px 28px); color: #2b1d00; font-weight: 600; font-size: 12.5px; letter-spacing: .03em; text-align: center; padding: 6px 16px; position: sticky; top: 0; z-index: 60; } /* --- Elementi comuni ------------------------------------------------------ */ .brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--primary); color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .02em; flex: none; } .brand-text { display: flex; flex-direction: column; font-weight: 600; font-size: 15px; line-height: 1.2; min-width: 0; } .brand-text small { font-weight: 500; font-size: 12px; opacity: .7; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 1px solid transparent; border-radius: var(--radius); padding: 9px 16px; font: 600 14px/1.2 var(--font); cursor: pointer; text-decoration: none !important; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-d); } .btn-primary:disabled { background: #9db3d6; cursor: not-allowed; } .btn-sm { padding: 7px 12px; font-size: 13px; min-height: 36px; } .btn-block { width: 100%; min-height: var(--tap); } .btn-ghost { background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: var(--radius); display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); } .btn-ghost:hover { background: var(--bg); color: var(--text); } .form { display: flex; flex-direction: column; gap: 12px; } .form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text); } .form input, .form select, .form textarea { font: 16px var(--font); min-height: var(--tap); padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--text); width: 100%; } .form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid rgba(31,95,191,.25); border-color: var(--primary); } .form input:disabled { background: #f6f7f9; } .form label small { font-weight: 400; font-size: 12.5px; color: var(--muted); } .form label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; } .form label.check input { margin-top: 3px; width: 20px; height: 20px; min-height: 0; flex: none; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: #eef0f3; padding: 1px 5px; border-radius: var(--radius-sm); word-break: break-all; } .alert { padding: 11px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; border: 1px solid; } .alert ul { margin: 6px 0 0; padding-left: 20px; } .alert-error { background: #fdecea; border-color: #f5c2bd; color: #8a241a; } .alert-success { background: #e8f6f1; border-color: #b9e3d5; color: #0b5c48; } .alert-info { background: var(--primary-l); border-color: #c4d6f2; color: #1b4a8f; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; } .card-head { padding: 14px 18px; border-bottom: 1px solid var(--line); } .card-head h2 { font-size: 15px; } .empty { padding: 22px 18px; margin: 0; color: var(--muted); font-size: 14px; } .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th, .table td { padding: 10px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .table th, .table .num, .table .date { white-space: nowrap; } .table td { overflow-wrap: anywhere; } .table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; } .table tr:last-child td { border-bottom: 0; } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .neg { color: var(--danger); } .pill { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .pill-ok { background: #e3f4ee; color: #0b6b53; } .pill-warn { background: var(--warn-bg); color: var(--warn-tx); } .pill-off { background: #eef0f3; color: var(--muted); } .pill-info { background: var(--primary-l); color: #1b4a8f; } .pill-bad { background: #fdecea; color: #8a241a; } /* ============================================================================ * PANNELLO ADMIN * ========================================================================== */ .admin-shell { display: flex; min-height: 100vh; background: linear-gradient(to right, var(--side-bg) var(--side-w), transparent var(--side-w)); } .admin-side { width: var(--side-w); flex: none; background: var(--side-bg); color: var(--side-tx); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } body.admin .testbar + .admin-shell .admin-side { top: 30px; height: calc(100vh - 30px); } .admin-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; color: var(--side-hi); } .side-close { display: none; margin-left: auto; background: none; border: 0; color: var(--side-tx); width: var(--tap); height: var(--tap); border-radius: var(--radius); cursor: pointer; place-items: center; } .side-close:hover { background: rgba(255,255,255,.08); color: var(--side-hi); } .admin-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 10px; flex: 1; overflow-y: auto; overscroll-behavior: contain; } .nav-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(183,192,205,.55); padding: 14px 10px 6px; } .admin-nav a, .admin-nav .is-soon { white-space: nowrap; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: var(--radius); color: var(--side-tx); font-size: 14px; font-weight: 500; text-decoration: none; } .admin-nav a:hover { background: rgba(255,255,255,.06); color: var(--side-hi); } .admin-nav a.is-active { background: var(--primary); color: #fff; } .admin-nav .is-soon { opacity: .45; cursor: default; } .admin-nav a > span, .admin-nav .is-soon > span { overflow: hidden; text-overflow: ellipsis; } .admin-nav .is-soon em { margin-left: auto; font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; flex: none; } .admin-side-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; } .admin-side-foot a { color: var(--side-tx); display: flex; align-items: center; gap: 8px; } .admin-side-foot a:hover { color: var(--side-hi); text-decoration: none; } .version { opacity: .5; font-size: 11.5px; text-align: right; } .side-backdrop { position: fixed; inset: 0; background: rgba(10,14,22,.5); z-index: 70; } .admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .admin-top { display: flex; align-items: center; gap: 12px; padding: 12px 28px; min-height: 64px; background: var(--surface); border-bottom: 1px solid var(--line); } .admin-top h1 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--text); width: var(--tap); height: var(--tap); border-radius: var(--radius); place-items: center; margin-left: -8px; } .side-toggle .ico { width: 22px; height: 22px; } .admin-user { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; flex: none; } .admin-user form { margin: 0; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: #e3ebf7; color: var(--primary); display: grid; place-items: center; font-weight: 600; font-size: 13px; } .admin-content { padding: 24px 28px 40px; max-width: 1280px; width: 100%; } .lead { margin: 0 0 20px; color: var(--muted); } .stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 20px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .stat-label { font-size: 13px; color: var(--muted); font-weight: 500; } .stat-value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .stat-note { font-size: 12.5px; color: var(--muted); } .stat-accent { border-top: 3px solid var(--accent); } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } .feed { list-style: none; margin: 0; padding: 0; } .feed li { padding: 11px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } .feed li:last-child { border-bottom: 0; } .feed-what { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; } .feed-meta { font-size: 12.5px; color: var(--muted); } .checks { list-style: none; margin: 0; padding: 4px 0; } .checks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 18px; font-size: 14px; } /* --- Login admin ----------------------------------------------------------- */ .login-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--side-bg); } .login-box { width: calc(100% - 32px); max-width: 380px; margin: auto; background: var(--surface); border-radius: var(--radius); padding: 28px 24px 22px; box-shadow: 0 20px 50px rgba(0,0,0,.35); } .login-brand { color: var(--text); padding: 0 0 20px; } .login-note { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.6; } /* --- Installazione guidata ------------------------------------------------ */ .install-page { background: var(--bg); } .inst-wrap { max-width: 860px; margin: 0 auto; padding: 28px 16px 60px; display: flex; flex-direction: column; gap: 18px; } .inst-brand { color: var(--text); padding: 0 0 4px; } .inst-wrap .lead { margin: 0; } .inst-form { gap: 18px; } .inst-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 18px; padding: 18px; } .inst-note { margin: 14px 18px -4px; font-size: 13.5px; color: var(--muted); } .inst-submit { align-self: flex-start; padding: 12px 28px; font-size: 15px; min-height: var(--tap); } textarea.code { width: 100%; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfbfc; } /* ============================================================================ * AREA CLIENTI * ========================================================================== */ .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .client-top { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 30; } .client-top-inner { display: flex; align-items: center; gap: 24px; min-height: 68px; } .client-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none !important; min-width: 0; } .client-nav { display: flex; gap: 4px; margin-right: auto; } .client-nav a { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: var(--radius); color: var(--muted); font-weight: 500; font-size: 14px; text-decoration: none; } .client-nav a:hover { color: var(--text); background: var(--bg); } .client-nav a.is-active { color: var(--primary); background: var(--primary-l); } .nav-toggle { display: none; background: none; border: 0; color: var(--text); width: var(--tap); height: var(--tap); border-radius: var(--radius); cursor: pointer; place-items: center; margin-right: -8px; } .nav-toggle .ico { width: 22px; height: 22px; } .client-shell { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 24px; padding-top: 28px; padding-bottom: 48px; align-items: start; } .client-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .panel-title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); } .panel-body { padding: 14px 16px; } .panel-body .small { margin: 2px 0 0; } .side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; } .side-list li { display: flex; flex-direction: column; } .side-list .muted { font-size: 12px; } .side-links { list-style: none; margin: -4px 0; padding: 0; } .side-links a { display: flex; align-items: center; min-height: var(--tap); font-size: 14px; border-bottom: 1px solid var(--line); } .side-links li:last-child a { border-bottom: 0; } .client-content { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .hero { background: linear-gradient(135deg, var(--primary) 0%, #17447f 100%); color: #fff; border-radius: var(--radius); padding: 20px; /* 1.26.0: più basso, testo a tutta larghezza */ } .hero h1 { font-size: 21px; margin-bottom: 4px; } .hero p { margin: 0; max-width: none; opacity: .9; } .tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none !important; transition: border-color .15s, transform .15s; } .tile:hover { border-color: var(--primary); transform: translateY(-1px); } /* 1.31.1: icona fuori dal riquadro, nell'angolo in alto a destra; numeri grandi con l'etichetta piccola accanto */ .tile { position: relative; } .tile-ico { position: absolute; top: 16px; right: 16px; color: var(--primary); opacity: .55; display: block; } .tile-ico svg { width: 30px; height: 30px; } .tile-title { font-weight: 600; padding-right: 40px; } .tile-stats { display: flex; flex-direction: column; gap: 0; margin: 2px 0 2px; } .tile-stat { display: flex; align-items: baseline; gap: 8px; } .tile-num { font-size: 40px; line-height: 1.1; font-weight: 600; color: var(--primary); letter-spacing: -.01em; } .tile-lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .tile-text { font-size: 13.5px; color: var(--muted); } .steps { margin: 0; padding: 16px 18px 18px 38px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; } .client-foot { border-top: 1px solid var(--line); padding: 18px 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); font-size: 13px; color: var(--muted); background: var(--surface); } /* ============================================================================ * TABLET * ========================================================================== */ @media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-2 { grid-template-columns: minmax(0,1fr); } .client-shell { grid-template-columns: 240px minmax(0,1fr); gap: 18px; } .tiles { grid-template-columns: minmax(0,1fr); } } /* ============================================================================ * SMARTPHONE * ========================================================================== */ @media (max-width: 860px) { /* Admin: menu a cassetto */ .admin-shell { background: none; } .admin-side { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; z-index: 80; width: min(86vw, 300px); transform: translateX(-100%); transition: transform .22s ease; } body.admin .testbar + .admin-shell .admin-side { top: 0; height: 100%; } .admin-side.is-open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); } .side-close, .side-toggle { display: inline-grid; } .admin-top { padding: 8px 12px; min-height: 56px; position: sticky; top: 0; z-index: 50; } body.admin .testbar ~ .admin-shell .admin-top { top: 30px; } .admin-top h1 { font-size: 17px; } .admin-content { padding: 16px 12px 32px; } .admin-user .who { display: none; } .card-head { padding: 12px 14px; } .feed li, .checks li { padding-left: 14px; padding-right: 14px; } .table { font-size: 13.5px; } .table th, .table td { padding: 9px 8px; } .table th:first-child, .table td:first-child { padding-left: 14px; } .table th:last-child, .table td:last-child { padding-right: 14px; } .stat { padding: 14px; } .stat-value { font-size: 22px; } /* Area clienti: menu a tendina, colonna laterale spostata */ .client-top-inner { gap: 10px; min-height: 60px; } .client-brand { margin-right: auto; } .nav-toggle { display: inline-grid; } .client-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 2px; margin: 0; padding: 8px 12px 12px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(16,24,40,.12); } .client-nav.is-open { display: flex; } .client-nav a { min-height: var(--tap); font-size: 15px; } .client-shell { grid-template-columns: minmax(0,1fr); gap: 16px; padding-top: 16px; padding-bottom: 32px; } .client-side { order: 2; } .client-side.first-on-mobile { order: 0; } .client-content { order: 1; gap: 16px; } .hero { padding: 16px; } .hero h1 { font-size: 19px; } .hide-sm { display: none !important; } } @media (max-width: 640px) { .inst-grid { grid-template-columns: minmax(0,1fr); padding: 14px; } .inst-submit { align-self: stretch; } } @media (max-width: 480px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .stat-value { font-size: 19px; } .stat-label { font-size: 12px; } .client-top .brand-text small { display: none; } .wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } } /* ============================================================================ * MODULI E PAGINE DEL PANNELLO (0.4.0) * ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .show-sm { display: none; } .btn .ico { width: 16px; height: 16px; } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line); } .btn-secondary:hover { background: var(--bg); } .btn-secondary:disabled { opacity: .5; cursor: not-allowed; } .btn-link { background: none; border: 0; color: var(--primary); padding: 8px 10px; min-height: 0; } .btn-link:hover { text-decoration: underline; } .btn-danger { color: var(--danger); } .inline-form { display: inline; margin: 0; } .breadcrumb { margin: -6px 0 16px; font-size: 13.5px; color: var(--muted); } .page-bar { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; } .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; } .filters input, .filters select { font: 15px var(--font); min-height: 40px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--text); } .filters .filter-q { flex: 1 1 280px; } .filters .filter-q input, .inline-search input { width: 100%; } .inline-search { padding: 14px 18px; flex-wrap: nowrap; } .card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .card-head p { margin: 4px 0 0; } .card-body { padding: 14px 18px 18px; } .card-body p { margin: 0 0 12px; font-size: 14px; } .card-foot { padding: 12px 18px; border-top: 1px solid var(--line); } .table-hover tbody tr:hover { background: #f9fafb; } .row-link { font-weight: 600; color: var(--text); } .pill-status-active { background: #e3f4ee; color: #0b6b53; } .pill-status-inactive { background: var(--warn-bg); color: var(--warn-tx); } .pill-status-closed { background: #fdecea; color: #a12a1c; } /* 1.53.0: rosso (Roberto 30/10) */ .pager { display: flex; gap: 4px; justify-content: center; padding: 14px; flex-wrap: wrap; } .pager a, .pager span { min-width: 38px; min-height: 38px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: var(--radius); font-size: 14px; } .pager a:hover { background: var(--bg); text-decoration: none; } .pager .is-current { background: var(--primary); color: #fff; font-weight: 600; } /* linguette: la riga sotto è un'ombra interna, così niente sporge e non compare la barra di scorrimento; su schermi stretti scorrono di lato senza barra visibile */ .tabs { display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 18px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs a { padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--muted); white-space: nowrap; text-decoration: none; } .tabs a:hover { color: var(--text); } .tabs a.is-active { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); } .layout-main-side { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; } .side-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .form-card { margin-bottom: 16px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 18px; padding: 16px 18px 18px; } .form-grid.one-col { grid-template-columns: minmax(0,1fr); } .form-grid .span-2 { grid-column: 1 / -1; } .form-grid .field-check { display: flex; align-items: center; } .form textarea { font: 15px/1.45 var(--font); } .req { color: var(--danger); font-weight: 600; } .field-err { color: var(--danger); font-size: 12.5px; font-weight: 500; } .has-err input, .has-err select { border-color: var(--danger); background: #fff8f7; } .form-note { margin: 0; padding: 0 18px 16px; font-size: 13.5px; color: var(--muted); } .form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); align-items: center; } .form > .form-actions, .form-actions-sticky { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .form-actions-sticky { position: sticky; bottom: 10px; z-index: 20; margin-top: 4px; } fieldset.checks-grid { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 16px; } fieldset.checks-grid legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding: 0; } .form label.radio { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; } .form label.radio input { width: 18px; height: 18px; min-height: 0; } .after-form { margin-top: 20px; } .mini-list { list-style: none; margin: 0; padding: 4px 0; } .mini-list li { padding: 10px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .mini-list li:last-child { border-bottom: 0; } .mini-list .mini-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } .mini-row form { margin: 0; flex: none; } /* Permessi utente */ .links-table td { vertical-align: top; } .access-cell { min-width: 240px; } .access-cell details > summary { cursor: pointer; font-weight: 600; color: var(--primary); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; } .access-cell details > summary::-webkit-details-marker { display: none; } .access-cell details > summary::after { content: '▾'; font-size: 12px; } .access-cell details[open] > summary::after { content: '▴'; } .perm-box { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfbfc; display: flex; flex-direction: column; gap: 12px; font-weight: 400; } .perm-title { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; } .perm-profile { display: flex; flex-wrap: wrap; gap: 6px 16px; } .perm-profile .perm-title { width: 100%; margin-bottom: 0; } .perm-list { display: flex; flex-direction: column; gap: 6px; } .perm-group { font-size: 12.5px; font-weight: 600; color: var(--text); margin-top: 4px; } .perm-box label.check { font-size: 13.5px; } .perm-box label.check input { width: 18px; height: 18px; } /* Pagina "imposta password" */ .login-light { background: var(--bg); } .login-light .login-box { box-shadow: var(--shadow); border: 1px solid var(--line); } .login-title { font-size: 18px; margin: 0 0 6px; } @media (max-width: 1000px) { .layout-main-side { grid-template-columns: minmax(0,1fr); } fieldset.checks-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 860px) { .show-sm { display: inline; } .page-bar { flex-direction: column-reverse; align-items: stretch; } .page-bar > .btn { align-self: flex-start; } .filters select { flex: 1 1 140px; } .form-grid { grid-template-columns: minmax(0,1fr); padding: 14px; } .form-grid .span-2 { grid-column: auto; } .card-head-row { align-items: flex-start; } /* account collegati: da tabella a schede impilate */ .links-wrap { overflow: visible; } .links-table thead { display: none; } .links-table, .links-table tbody, .links-table tr, .links-table td { display: block; width: 100%; } .links-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); position: relative; } .links-table tr:last-child { border-bottom: 0; } .links-table td { border: 0; padding: 3px 0; text-align: left; white-space: normal; } .links-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .links-table td.col-id[data-label="ID"] { display: none; } .links-table .link-actions { position: absolute; top: 6px; right: 6px; width: auto; } .access-cell { min-width: 0; padding-top: 6px !important; } .form-actions-sticky { bottom: 8px; padding: 10px 12px; } .inline-search { padding: 12px 14px; } } @media (max-width: 480px) { fieldset.checks-grid { grid-template-columns: minmax(0,1fr); } .filters .btn { flex: 1; } } /* ============================================================================ * MENU CON SOTTOVOCI (0.5.0) * ========================================================================== */ .admin-nav { padding-top: 10px; } .nav-parent > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: var(--radius); color: var(--side-tx); font-size: 14px; font-weight: 500; white-space: nowrap; user-select: none; } .nav-parent > summary::-webkit-details-marker { display: none; } .nav-parent > summary:hover { background: rgba(255,255,255,.06); color: var(--side-hi); } .nav-parent.has-active > summary { color: var(--side-hi); } .nav-parent .chev { margin-left: auto; width: 8px; height: 8px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(-45deg); transition: transform .15s; opacity: .7; } .nav-parent[open] .chev { transform: rotate(45deg); } .nav-children { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 29px; } .nav-children a { min-height: 36px; padding: 7px 10px; font-size: 13.5px; } .alert-warn { background: var(--warn-bg); border-color: #f0d48a; color: var(--warn-tx); } .owner-choice { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 4px; } .owner-choice label.radio { font-weight: 600; } .owner-panel { padding: 4px 18px 16px 46px; } .owner-panel .form-grid { padding: 8px 0 0; } .pill-orphan { background: #fdecea; color: #8a241a; } @media (max-width: 860px) { .owner-panel { padding-left: 18px; } } .orphan-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .orphan-fix input { font: 15px var(--font); min-height: 36px; padding: 6px 10px; border: 1px solid #e3c977; border-radius: var(--radius); flex: 1 1 260px; background: #fff; } .manual-pw { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; } .manual-pw > summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: 14px; min-height: 32px; display: flex; align-items: center; } .manual-pw .form { margin-top: 10px; } /* --------------------------------------------------------------------------- * 0.6.0 — Area clienti con accesso, modelli mail * ------------------------------------------------------------------------- */ .js .no-js-only { display: none !important; } .show-sm-flex { display: none !important; } /* Pagina pubblica: solo intestazione + accesso, al centro */ .client-shell-public { grid-template-columns: minmax(0,1fr); justify-items: center; padding-top: 48px; } .client-shell-public .client-content { width: 100%; max-width: 420px; } .login-card { padding: 26px 24px 22px; } .login-card h1 { font-size: 20px; margin: 0 0 16px; } .login-card .form { gap: 14px; } .login-card .btn-block { width: 100%; justify-content: center; margin-top: 4px; } .login-card p { font-size: 14px; } .login-links { margin: 16px 0 0; text-align: center; font-size: 14px; } .btn-block { display: flex; width: 100%; justify-content: center; } /* Fascia "stai vedendo l'area come..." (solo amministratore) */ .impersonate-bar { background: #3b2a7a; color: #fff; font-size: 13.5px; padding: 8px 20px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; } .impersonate-bar form { margin: 0; } .impersonate-bar button { background: #fff; color: #3b2a7a; border: 0; border-radius: var(--radius-sm); padding: 6px 12px; font: 600 13px var(--font); cursor: pointer; min-height: 32px; } /* Riquadro utente in alto a destra */ .user-box { display: flex; align-items: center; gap: 10px; margin-left: auto; } .user-box form { margin: 0; } .user-link { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 14px; padding: 4px 8px 4px 4px; border-radius: var(--radius); text-decoration: none !important; } .user-link:hover, .user-link.is-active { background: var(--bg); } .nav-logout { background: none; border: 0; padding: 8px 12px; min-height: var(--tap); width: 100%; text-align: left; font: 500 15px var(--font); color: var(--danger); border-radius: var(--radius); cursor: pointer; } .nav-logout:hover { background: var(--bg); } /* Selettore del cliente */ .client-switch { background: var(--primary-l); border-bottom: 1px solid #d5e2f5; } .switch-inner { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 48px; padding-top: 6px; padding-bottom: 6px; } /* 1.37.0: a destra, sotto accesso/uscita */ .switch-inner label { font-size: 13.5px; color: var(--muted); white-space: nowrap; } .switch-inner select { font: 600 15px var(--font); color: var(--text); background: var(--surface); border: 1px solid #c9d6ea; border-radius: var(--radius); padding: 6px 10px; min-height: 38px; max-width: 100%; min-width: 0; } /* Colonna laterale */ .side-strong { font-weight: 600; margin: 0 0 2px; } .side-more { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; } /* Sezioni non ancora pronte */ .tile-soon { position: relative; cursor: default; } .tile-soon:hover { border-color: var(--line); transform: none; } .tile-badge { align-self: flex-start; margin-top: 6px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 9px; } /* Campi in sola lettura (area clienti senza permesso di modifica) */ .ro-field { display: flex; flex-direction: column; gap: 4px; font-size: 15px; min-width: 0; overflow-wrap: anywhere; } .ro-field .lbl { font-size: 13px; font-weight: 600; color: var(--muted); } .form-alert { margin: 14px 18px 0; } /* Modelli mail */ .mail-preview { margin-top: 16px; } .mail-body { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: #fbfcfd; font-size: 14.5px; overflow-wrap: anywhere; } .mail-body p { margin: 0 0 12px; } .mail-body p:last-child { margin-bottom: 0; } .var-list li { flex-direction: column; align-items: flex-start; gap: 2px; } .var-list code { font-size: 13.5px; background: var(--primary-l); color: var(--primary-d); padding: 1px 6px; border-radius: var(--radius-sm); user-select: all; } .restore-form { margin: -6px 0 0; display: flex; justify-content: flex-end; } .impersonate-card .card-body { padding: 14px 18px; } .impersonate-card .card-body p { margin: 0; flex: 1 1 320px; } @media (max-width: 860px) { .show-sm-flex { display: flex !important; } .client-nav form.show-sm-flex { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; } .client-shell-public { padding-top: 24px; } .switch-inner select { flex: 1 1 auto; } } @media (max-width: 480px) { .switch-inner label { display: none; } .login-card { padding: 22px 18px 18px; } } body.client { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } body.client > .client-shell { flex: 1 0 auto; } .form.card > .form-actions { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; } .nav-children .is-soon { min-height: 36px; padding: 7px 10px; font-size: 13.5px; } .nav-parent.all-soon > summary { opacity: .45; } .nav-parent > summary em { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; flex: none; margin-left: auto; } .nav-parent > summary em + .chev { margin-left: 8px; } /* --------------------------------------------------------------------------- * 0.7.0 — Gruppi colorati, popup * ------------------------------------------------------------------------- */ html:not(.js) .js-only { display: none !important; } .show-sm-block { display: none; } .group-badge { display: inline-block; max-width: 100%; font-size: 12px; font-weight: 600; line-height: 1.35; padding: 3px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .group-badge-sm { font-size: 11px; padding: 2px 8px; margin-top: 4px; } .group-link { text-decoration: none !important; } .group-link:hover .group-badge { filter: brightness(1.08); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); } tr.is-editing td { background: var(--primary-l); } .breadcrumb .group-badge { margin-left: 6px; } /* Striscia del colore del gruppo a sinistra della riga (elenco clienti) */ .table td.has-group { box-shadow: inset 4px 0 0 var(--group); } /* Campo colore con colori proposti */ .color-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; } .color-field small { font-weight: 400; font-size: 12.5px; color: var(--muted); } .color-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .form .color-row input[type=color] { width: 52px; height: 40px; min-height: 0; padding: 2px; border-radius: var(--radius); cursor: pointer; flex: none; } .swatches { display: flex; flex-wrap: wrap; gap: 6px; } .swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; } .swatch.is-on { box-shadow: 0 0 0 2px var(--text); } .swatch.is-used { opacity: .45; } /* Gruppo nella scheda cliente: pallino + azioni */ .group-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .group-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: -10px; } .group-actions .btn-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; } .group-actions .ico { width: 15px; height: 15px; } .group-swatch { width: 14px; height: 14px; border-radius: 50%; margin-left: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex: none; } .group-created { color: var(--accent); font-size: 12.5px; } /* Popup */ dialog.modal { border: 0; padding: 0; border-radius: var(--radius); width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 20px 60px rgba(16,24,40,.3); color: var(--text); background: var(--surface); } dialog.modal::backdrop { background: rgba(16,24,40,.55); } .modal .form { gap: 0; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px 14px 18px; border-bottom: 1px solid var(--line); } .modal-head h2 { font-size: 16px; margin: 0; } .modal-x { background: none; border: 0; width: var(--tap); height: var(--tap); border-radius: var(--radius); display: grid; place-items: center; color: var(--muted); cursor: pointer; } .modal-x:hover { background: var(--bg); color: var(--text); } .modal-x .ico { width: 20px; height: 20px; } .modal-alert { margin: 14px 18px 0; } .modal .form-actions { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; } @media (max-width: 860px) { .show-sm-block { display: block; } } @media (max-width: 480px) { dialog.modal { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; margin: 0; } dialog.modal .form { min-height: 100%; } dialog.modal .form-actions { margin-top: auto; padding-bottom: calc(14px + env(safe-area-inset-bottom)); } } /* --------------------------------------------------------------------------- * 0.7.1 — Elenchi a piena larghezza, ordinamento * ------------------------------------------------------------------------- */ .admin-content.is-wide { max-width: none; } .table th.sortable a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .table th.sortable a:hover { color: var(--text); } .table th.is-sorted { color: var(--primary); } .sort-mark { font-size: 9px; } .row-link-soft { color: var(--text); } .row-link-soft:hover { color: var(--primary); } .clients-table .show-sm-block { margin-top: 3px; line-height: 1.45; } /* --------------------------------------------------------------------------- * 0.8.0 — Guida in linea, credito assistenza a sinistra, voci "presto" nell'area * ------------------------------------------------------------------------- */ .client-nav { flex-wrap: wrap; } .client-nav .is-soon { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 10px; border-radius: var(--radius); color: var(--muted); font-weight: 500; font-size: 14px; opacity: .55; cursor: default; white-space: nowrap; } .client-nav .is-soon em { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); border-radius: 999px; padding: 0 5px; } .client-nav a { white-space: nowrap; } .credit-box { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .credit-num { font-size: 26px; font-weight: 600; line-height: 1; color: var(--text); } .hero-guide .guide-search { margin-top: 16px; max-width: 560px; } .guide-search { display: flex; gap: 8px; } .guide-search input { flex: 1 1 auto; min-width: 0; font: 16px var(--font); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); min-height: var(--tap); } .hero .guide-search input { border-color: transparent; } .guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; align-items: start; } .guide-list { list-style: none; margin: 0; padding: 6px 0; } .guide-list li { padding: 9px 18px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; } .guide-list li:last-child { border-bottom: 0; } .side-links .is-current a { color: var(--text); font-weight: 600; } .guide-help .card-body p { margin-bottom: 10px; } .guide-article { font-size: 15.5px; line-height: 1.65; overflow-wrap: anywhere; } .guide-article .card-body { padding: 22px 26px 26px; } .guide-title { font-size: 24px; line-height: 1.25; margin: 0 0 4px; } .guide-article h2 { font-size: 19px; margin: 26px 0 8px; } .guide-article h3 { font-size: 16.5px; margin: 20px 0 6px; } .guide-article p { margin: 0 0 12px; font-size: 15.5px; } .guide-article ul, .guide-article ol { margin: 0 0 14px; padding-left: 22px; } .guide-article li { margin-bottom: 4px; } .guide-article code { font-size: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1px 6px; } .guide-article img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); margin: 6px 0; } .guide-note { background: var(--primary-l); border-left: 4px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 14px; margin: 0 0 14px; } .form .editor textarea { min-height: 360px; font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @media (max-width: 1000px) { .guide-grid { grid-template-columns: minmax(0,1fr); } } @media (max-width: 860px) { .client-nav .is-soon { min-height: var(--tap); font-size: 15px; } .guide-article .card-body { padding: 18px 16px 20px; } .guide-title { font-size: 21px; } } @media (max-width: 480px) { .guide-search { flex-direction: column; } } /* Menu dell'area clienti su una riga propria sotto l'intestazione (computer): c'è spazio per tutte le voci, anche quelle future */ @media (min-width: 861px) { body.area .client-top-inner { flex-wrap: wrap; row-gap: 0; padding-top: 10px; } body.area .client-brand { margin-right: auto; } body.area .client-nav { order: 3; flex-basis: 100%; margin: 4px 0 0 -12px; padding-bottom: 6px; flex-wrap: wrap; } body.area .client-nav a.is-active { box-shadow: inset 0 -2px 0 var(--primary); border-radius: var(--radius) var(--radius) 0 0; } } .side-links li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); } .side-links li:last-child { border-bottom: 0; } .side-links li a { flex: 1 1 auto; border-bottom: 0; } /* --------------------------------------------------------------------------- * 0.9.0 — Credito assistenza, Aspetto area clienti * ------------------------------------------------------------------------- */ .layout-main-side.side-wide { grid-template-columns: minmax(0,1fr) 380px; } .neg { color: var(--danger); } .pos { color: var(--accent); } .balance { font-weight: 600; font-variant-numeric: tabular-nums; padding: 3px 10px; border-radius: 999px; white-space: nowrap; font-size: 13.5px; } .balance.is-pos { background: #e3f4ee; color: #0b6b53; } .balance.is-zero { background: #eef0f3; color: var(--muted); } .balance.is-neg { background: #fdecea; color: #8a241a; } .stat-value.neg { color: var(--danger); } .pill-type-usage { background: #fdf0e3; color: #8a4b0b; } .pill-type-recharge { background: #e3f4ee; color: #0b6b53; } .pill-type-adjust { background: #eef0f3; color: var(--muted); } .ledger-table td.num { font-weight: 600; } .ledger-desc { margin-top: 4px; font-size: 14px; } .credit-box.is-negative .credit-num { color: var(--danger); } .credit-num { font-size: 24px; } /* scelta a pulsanti (Intervento / Ricarica / Rettifica) */ fieldset.seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0; } fieldset.seg legend { width: 100%; margin-bottom: 5px; font-size: 13px; font-weight: 600; padding: 0; } .seg-opt { position: relative; flex: 1 1 0; } .seg-opt input { position: absolute; opacity: 0; pointer-events: none; } .form .seg-opt { flex-direction: row; } .seg-opt span { display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; margin-left: -1px; } .seg-opt:first-of-type span { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; } .seg-opt:last-of-type span { border-radius: 0 var(--radius) var(--radius) 0; } .seg-opt input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; position: relative; z-index: 1; } .seg-opt input:focus-visible + span { outline: 2px solid rgba(31,95,191,.4); outline-offset: 1px; } .minutes-field { display: flex; flex-direction: column; gap: 4px; } .round-hint { color: var(--primary-d); font-size: 12.5px; font-weight: 600; } /* area clienti: cronologia assistenza */ .support-head .card-body { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .support-balance { display: flex; flex-direction: column; gap: 2px; } .support-balance strong { font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; } .support-balance.is-negative strong { color: var(--danger); } .support-totals { display: flex; gap: 24px; margin: 0; } .support-totals div { display: flex; flex-direction: column; } .support-totals dt { font-size: 12.5px; color: var(--muted); } .support-totals dd { margin: 0; font-weight: 600; font-size: 16px; } .terms-list { margin: 0; padding: 14px 18px 16px 36px; font-size: 14px; } .terms-list li { margin-bottom: 4px; } .user-extra { font-size: 13.5px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius); white-space: nowrap; } .user-extra:hover, .user-extra.is-active { background: var(--bg); text-decoration: none; } /* Aspetto area clienti */ .layout-list { list-style: none; margin: 0; padding: 8px 0; } .layout-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); } .layout-row:last-child { border-bottom: 0; } .layout-row.is-off .layout-main { opacity: .5; } .layout-move { display: flex; align-items: center; gap: 4px; } .move-btn { width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); cursor: pointer; font-size: 11px; color: var(--muted); } .move-btn:hover { color: var(--primary); border-color: var(--primary); } .form .pos-input { width: 64px; min-height: 34px; padding: 4px 6px; text-align: center; } .layout-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .form .label-input { max-width: 280px; min-height: 36px; padding: 6px 10px; font-weight: 600; } .layout-help { line-height: 1.4; } .form .layout-on { white-space: nowrap; } @media (max-width: 1000px) { .layout-main-side.side-wide { grid-template-columns: minmax(0,1fr); } } @media (max-width: 640px) { .layout-row { grid-template-columns: minmax(0,1fr) auto; } .layout-move { grid-column: 1 / -1; order: 3; } .support-totals { gap: 16px; } } .form .seg-opt { display: flex; } .seg-opt span { flex: 1 1 auto; } .ledger-table td:nth-child(2) { min-width: 220px; } .row-del { display: block; margin-top: 4px; } .row-del .btn-sm { padding: 0; min-height: 0; font-size: 12.5px; } .mini-row strong { white-space: nowrap; } /* --------------------------------------------------------------------------- * 0.10.0 — Ticket * ------------------------------------------------------------------------- */ .nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius); background: #e5484d; color: #fff; font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; flex: none; } .nav-parent > summary .nav-badge + .chev { margin-left: 8px; } .tab-count { background: #e5484d; color: #fff; border-radius: var(--radius); padding: 0 7px; font-size: 11.5px; margin-left: 4px; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .page-head h1 { font-size: 22px; margin: 0; } .page-bar-actions { display: flex; gap: 8px; align-items: center; } .tk-title { font-size: 21px; margin: 0 0 4px; overflow-wrap: anywhere; } .tk-status.tk-open { background: #fdecea; color: #8a241a; } .tk-status.tk-customer_reply { background: #fdf0e3; color: #8a4b0b; } .tk-status.tk-answered { background: #e3f4ee; color: #0b6b53; } .tk-status.tk-on_hold { background: var(--primary-l); color: #1b4a8f; } .tk-status.tk-closed { background: #eef0f3; color: var(--muted); } .tk-prio-low { background: #eef0f3; color: var(--muted); } .tk-prio-normal { background: #eef0f3; color: var(--text); } .tk-prio-high { background: #fdf0e3; color: #8a4b0b; } .tk-prio-urgent { background: #e5484d; color: #fff; } tr.is-waiting .row-link { font-weight: 600; } .tk-list { list-style: none; margin: 0; padding: 0; } .tk-list li { border-bottom: 1px solid var(--line); } .tk-list li:last-child { border-bottom: 0; } .tk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; color: var(--text); text-decoration: none !important; } .tk-row:hover { background: #fafbfc; } .tk-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tk-main strong { overflow-wrap: anywhere; } .tk-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; } .tk-new { font-size: 11.5px; font-weight: 600; color: var(--accent); } .tk-thread { display: flex; flex-direction: column; gap: 12px; } .tk-msg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px; border-left: 4px solid var(--line); } .tk-msg.is-staff { border-left-color: var(--primary); } .tk-msg.is-client { border-left-color: #c7cdd6; } .tk-msg.is-internal { background: #fffbea; border-left-color: #e0b100; } .tk-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .tk-msg-head .avatar { width: 28px; height: 28px; font-size: 11.5px; } .tk-date { margin-left: auto; } .tk-body { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; } .tk-body p { margin: 0 0 10px; } .tk-body p:last-child { margin-bottom: 0; } .tk-files { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .tk-files li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; } .tk-thumb img { display: block; width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); } .tk-system { text-align: center; font-size: 13px; color: var(--muted); padding: 4px 0; } .tk-system span:first-child { background: #eef0f3; border-radius: 999px; padding: 3px 12px; } .tk-upload input[type=file] { padding: 8px; border: 1px dashed var(--line); border-radius: var(--radius); background: #fafbfc; font-size: 14px; } @media (max-width: 640px) { .tk-row { flex-direction: column; align-items: flex-start; } .tk-side { flex-direction: row; align-items: center; } .tk-msg { padding: 12px 14px; } .tk-date { margin-left: 0; width: 100%; } } .side-list .pill { align-self: flex-start; } /* --------------------------------------------------------------------------- * 0.11.0 — Prodotti e listini * ------------------------------------------------------------------------- */ tr.is-inactive td { opacity: .6; } .pill-type { background: #eef0f3; color: var(--text); font-weight: 600; } .prices-cell { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 14px; } .type-help .form-note { padding: 0; } .cycles-pick { border: 0; margin: 0; padding: 14px 18px 4px; display: flex; flex-wrap: wrap; gap: 8px; } .cycles-pick legend { width: 100%; font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; float: left; } .form .chip { flex-direction: row; position: relative; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; background: var(--surface); } .chip input:checked + span { background: var(--primary-l); border-color: var(--primary); color: var(--primary-d); } .chip input:focus-visible + span { outline: 2px solid rgba(31,95,191,.4); } .price-table th[scope=row] { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text); white-space: nowrap; } .price-table tr.is-default th[scope=row] { color: var(--primary-d); } .price-table td { padding: 8px 10px; } .form .price-input { width: 100px; min-height: 38px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; } .price-table td.has-err .price-input { border-color: var(--danger); background: #fff8f7; } .price-table [hidden] { display: none; } .list-link { padding: 0; } .upgrade-list { padding: 8px 18px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 18px; } .upgrade-cat { grid-column: 1 / -1; margin: 8px 0 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .group-prices li { display: flex; flex-direction: column; gap: 4px; padding: 10px 18px; border-bottom: 1px solid var(--line); } .group-prices li:last-child { border-bottom: 0; } .gp-prices { display: flex; flex-direction: column; font-size: 14px; font-variant-numeric: tabular-nums; } .gp-own { font-weight: 600; } .stack-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .stack-actions form { margin: 0; } .form .price-input { width: 88px; } .price-table td, .price-table th { padding-left: 8px; padding-right: 8px; } .price-table th:first-child { padding-left: 18px; } .price-table td:last-child, .price-table th:last-child { padding-right: 18px; } .card .form > .form-actions { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; } /* 0.11.1 — ricorrente / una tantum */ fieldset.seg.billing-pick { padding: 14px 18px 0; max-width: 460px; } .billing-note { padding: 8px 18px 0; } .pill-onetime { background: #f3eafd; color: #5b2a86; } /* 0.11.2 — gruppi di prodotti */ fieldset.icon-pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } fieldset.icon-pick legend { grid-column: 1 / -1; font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; } .form .icon-opt { position: relative; } .icon-opt input { position: absolute; opacity: 0; pointer-events: none; } .icon-opt span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--muted); text-align: center; background: var(--surface); } .icon-opt span .ico { width: 26px; height: 26px; } .icon-opt small { font-size: 11.5px; font-weight: 600; line-height: 1.2; } .icon-opt input:checked + span { border-color: var(--primary); background: var(--primary-l); color: var(--primary-d); } .icon-opt input:focus-visible + span { outline: 2px solid rgba(31,95,191,.4); } .slug-row { display: flex; align-items: center; gap: 0; min-width: 0; } .slug-base { font-size: 13px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; padding-right: 6px; } .slug-row input { flex: 1 1 auto; min-width: 0; } .group-line { display: flex; align-items: center; gap: 10px; min-width: 0; } .group-line > span:last-child { display: flex; flex-direction: column; } .group-ico { width: 34px; height: 34px; border-radius: var(--radius); background: var(--primary-l); color: var(--primary); display: grid; place-items: center; flex: none; } .group-ico .ico { width: 18px; height: 18px; } @media (max-width: 480px) { .slug-base { display: none; } } /* 0.11.3 — ordinamento a frecce, logo, dati fiscali */ .sort-btns { display: inline-flex; gap: 3px; margin: 0; } .sort-btns .move-btn { width: 28px; height: 28px; font-size: 10px; } .sort-btns .move-btn:disabled { opacity: .3; cursor: default; } .table .sort-col { width: 74px; padding-right: 0; } .row-with-sort { display: flex; align-items: center; gap: 10px; } .row-with-sort > span { display: flex; flex-direction: column; } .group-line .sort-btns { flex-direction: column; gap: 2px; } .group-line .sort-btns .move-btn { width: 24px; height: 18px; font-size: 8px; } .brand-logo { display: block; max-height: 40px; max-width: 160px; width: auto; height: auto; object-fit: contain; flex: none; } .admin-brand .brand-logo { background: #fff; border-radius: var(--radius); padding: 4px; max-height: 40px; } .login-logo { text-align: center; margin: -4px 0 14px; } .login-logo img { max-height: 72px; max-width: 220px; } .foot-fiscal { display: block; margin-top: 4px; font-size: 12px; } .image-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; } .image-field small { font-weight: 400; color: var(--muted); font-size: 12.5px; } .image-preview { background: repeating-conic-gradient(#f0f2f5 0 25%, #fff 0 50%) 0 0 / 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: inline-flex; align-self: flex-start; } .image-preview img { max-height: 80px; max-width: 260px; display: block; } .type-note { padding: 0; } .table .sort-col { width: 40px; padding-left: 10px; padding-right: 0; } .table .sort-btns { flex-direction: column; gap: 2px; } .table .sort-btns .move-btn { width: 26px; height: 20px; font-size: 8px; border-radius: var(--radius-sm); } .admin-brand .brand-logo { max-width: 110px; max-height: 36px; } /* --- 0.12.0 Scheda prodotto a schede ------------------------------------------- */ .tab-off { display: none !important; } .product-tabs { position: sticky; top: 0; z-index: 15; background: var(--bg, #f5f6f8); margin-bottom: 14px; } .product-tabs a.has-err { color: var(--danger); } .product-tabs a.has-err::after { content: " •"; } .tab-num { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--radius); background: var(--primary-l); color: var(--primary-d); font-size: 11.5px; text-align: center; } .product-form > .card + .card { margin-top: 0; } .form-sub { margin: 6px 18px 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; } .price-table tbody.price-list { border-top: 2px solid var(--line); } .price-table th[scope=rowgroup] { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text); white-space: nowrap; vertical-align: top; padding-top: 14px; } .price-table tbody.is-default th[scope=rowgroup] { color: var(--primary-d); } .price-table .price-kind { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .price-table tr + tr td { padding-top: 0; } fieldset.radio-list { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } fieldset.radio-list legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; } .form fieldset.radio-list label.check small { color: var(--muted); } .field-rows { list-style: none; margin: 0; padding: 0; counter-reset: fld; } .field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; border-bottom: 1px solid var(--line); padding: 4px 0; counter-increment: fld; position: relative; } .field-row > .form-grid { flex: 1 1 auto; min-width: 0; } .field-row::before { content: counter(fld); position: absolute; left: 6px; top: 16px; font-size: 11px; font-weight: 600; color: var(--muted); } .field-row-tools { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 12px 0 0; } .field-row-tools .btn { min-height: 32px; padding: 2px 8px; } .field-row-tools label.check { font-size: 12.5px; color: var(--danger); gap: 4px; } .field-row-bad { background: #fff8f7; } .field-row-err { grid-column: 1 / -1; padding: 8px 18px 0 30px; font-size: 13px; } .field-flags { display: flex; flex-wrap: wrap; gap: 4px 18px; } .field-flags label.check { font-size: 14px; } @media (max-width: 480px) { .field-row { grid-template-columns: minmax(0, 1fr); } .field-row-tools { flex-direction: row; padding: 0 18px 10px; } } @media (max-width: 860px) { .tpl-table col { width: auto !important; } } /* --- 0.13.0 Server DirectAdmin ------------------------------------------------- */ .checks-col { display: flex; flex-direction: column; gap: 6px; justify-content: center; } .pkg-summary { color: var(--primary-d); font-weight: 600; } .da-pick > .form-grid { padding: 0; } .da-pick .form-note { padding: 6px 0 0; } /* --- 0.13.1 Moduli a foglio (.sheet) ------------------------------------------ * Richiesta di Roberto: più dati davanti agli occhi. Righe compatte come un foglio Excel: * nessun bordo, righe alternate bianco / grigio chiaro, etichetta a sinistra, campo a destra, * due colonne affiancate (.sheet-col) che su smartphone vanno una sotto l'altra. */ .sheet-card .sheet-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; background: #f7f8fa; } .sheet-card .sheet-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .form .sheet-card + .sheet-card { margin-top: -2px; } .sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sheet-col { display: flex; flex-direction: column; min-width: 0; } .sheet-col + .sheet-col { border-left: 1px solid var(--line); } .form .sheet-col > label, .sheet-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 3px 12px; min-height: 36px; margin: 0; font-weight: 400; } .sheet-col > :nth-child(even) { background: #f3f4f6; } .sheet-col > :nth-child(odd) { background: #fff; } .form .sheet .lbl { font-size: 13px; font-weight: 600; color: #4a5361; line-height: 1.2; } .form .sheet input, .form .sheet select, .form .sheet textarea { font-size: 14px; min-height: 29px; height: 29px; padding: 3px 8px; border-radius: var(--radius-sm); border-color: #dcdfe4; } .form .sheet textarea { height: auto; font-size: 14px; line-height: 1.4; resize: vertical; } .form .sheet-col > label.sheet-tall { align-items: start; padding-top: 7px; padding-bottom: 7px; flex: 1; } .form .sheet-col > label.sheet-tall textarea { min-height: 100px; } .form .sheet label small { display: none; } .form .sheet label[title] .lbl { text-decoration: underline dotted #9aa3ae; text-underline-offset: 3px; cursor: help; } .form .sheet .field-err { grid-column: 2; font-size: 12px; } .form .sheet .has-err { background: #fff5f4; } .sheet-inline { display: flex; align-items: center; gap: 4px; min-width: 0; } .sheet-inline select { flex: 1 1 auto; min-width: 0; } .sheet-inline .group-swatch { flex: none; } .btn-xs { min-height: 28px; padding: 2px 6px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 3px; } .btn-xs .ico { width: 14px; height: 14px; } .sheet-row.group-field { flex-direction: unset; gap: 0 10px; } @media (max-width: 860px) { .sheet { grid-template-columns: minmax(0, 1fr); } .sheet-col + .sheet-col { border-left: 0; border-top: 1px solid var(--line); } .form .sheet-col > label, .sheet-row { grid-template-columns: 108px minmax(0, 1fr); padding: 4px 10px; } .form .sheet input, .form .sheet select, .form .sheet textarea { font-size: 16px; min-height: 34px; height: 34px; } .form .sheet textarea { height: auto; } } /* colonna laterale compatta (scheda cliente) */ .side-compact { gap: 10px; } .side-compact .card-head { padding: 8px 12px; background: #f7f8fa; } .side-compact .card-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .side-compact .mini-list li, .side-compact .checks li { padding: 6px 12px; font-size: 13.5px; } .side-compact .mini-list li:nth-child(even), .side-compact .checks li:nth-child(even) { background: #f3f4f6; } .side-compact .card-foot { padding: 8px 12px; gap: 6px; } .side-compact .card-foot .btn { min-height: 32px; padding: 4px 10px; font-size: 13px; } .side-compact .empty { padding: 10px 12px; font-size: 13.5px; } /* --- 0.14.0 Anteprima dei gruppi ---------------------------------------------- */ .preview-bar { background: #fff8e1; border: 1px solid #f0d98a; border-radius: var(--radius); padding: 8px 12px; margin: 14px 0 6px; } .preview-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; } .preview-form label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .preview-form select { font: 14px var(--font); padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; } .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; } .tpl-pick { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .tpl-pick legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; } .form .tpl-pick label.check small { color: var(--muted); } .client-shell-public.shell-wide { padding-top: 18px; justify-items: stretch; } .client-shell-public.shell-wide .client-content { max-width: 1120px; margin: 0 auto; } .shell-wide .preview-bar { margin: 0 0 22px; } /* --- 0.15.0 Servizi aggiuntivi ------------------------------------------------- */ .form-grid.nested-grid { padding: 0; } fieldset.addon-parents { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 0 4px; margin: 0; } fieldset.addon-parents legend { margin-left: 12px; padding: 0 6px; font-size: 13px; font-weight: 600; } fieldset.addon-parents .form-note { padding: 0 18px 4px; } fieldset.addon-parents.has-err { border-color: var(--danger); } fieldset.addon-parents .field-err { display: block; padding: 0 18px 8px; } /* --- 0.16.0 Tabelle a righe alternate, importazione ----------------------------- */ .table-zebra tbody tr:nth-child(even) td { background: #f3f4f6; } .table-zebra td, .table-zebra th { padding-top: 7px; padding-bottom: 7px; } .table-zebra tbody tr td { border-top: 0; } .import-result { margin-bottom: 14px; } /* --- 0.16.1 Prodotti e servizi: un gruppo alla volta ---------------------------- */ .prod-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; } .prod-bar select, .prod-bar input[type=search] { font: 14px var(--font); height: 34px; padding: 4px 8px; border: 1px solid #dcdfe4; border-radius: var(--radius-sm); background: #fff; } .prod-bar .filter-q input { width: 220px; } .prod-group-pick { display: inline-flex; align-items: center; gap: 8px; } .prod-group-pick .lbl { font-size: 13px; font-weight: 600; } .prod-group-pick select { font-weight: 600; min-width: 260px; border-color: var(--primary); } .prod-bar-actions { margin-left: auto; display: inline-flex; gap: 6px; } .prod-head { gap: 10px; flex-wrap: wrap; align-items: center; } .prod-head h2 { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); } .prod-head .group-ico svg { width: 20px; height: 20px; color: var(--primary); display: block; } .prod-head-actions { margin-left: auto; display: inline-flex; gap: 4px; } .prod-table td { font-size: 14px; vertical-align: middle; } .prod-table .row-link { font-weight: 600; } .nowrap { white-space: nowrap; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .dot-ok { background: #1a8f5c; } .dot-off { background: #b5bcc6; } .groups-manage { margin-top: 14px; } .groups-manage > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; } .groups-manage > summary::-webkit-details-marker { display: none; } .groups-manage > summary h2::before { content: "▸ "; } .groups-manage[open] > summary h2::before { content: "▾ "; } .groups-manage .group-line { display: inline-flex; align-items: center; gap: 8px; } .groups-manage .group-ico svg { width: 18px; height: 18px; color: var(--primary); display: block; } @media (max-width: 860px) { .prod-group-pick { width: 100%; } .prod-group-pick select { flex: 1; min-width: 0; font-size: 16px; } .prod-bar .filter-q, .prod-bar .filter-q input { width: 100%; } .prod-bar-actions { margin-left: 0; } } .prod-table td.sort-col .sort-btns { flex-direction: row; gap: 2px; } .prod-table td.sort-col .sort-btns .move-btn { width: 24px; height: 24px; } .prod-table td.sort-col { width: 62px; padding-right: 0; } .prod-table td { padding-top: 6px; padding-bottom: 6px; } .prod-bar select[name=tipo] { max-width: 170px; } /* --- 0.17.0 Servizi, domini, pro forma ------------------------------------------- */ .pill.svc-active, .pill.pf-paid { background: #e3f5ec; color: #146c43; } .pill.svc-pending, .pill.svc-grace, .pill.pf-draft { background: #fff4d6; color: #8a5a00; } .pill.svc-suspended, .pill.svc-redemption, .pill.pf-unpaid { background: #fdeccf; color: #9a4a00; } .pill.svc-expired, .pill.svc-fraud, .pill.pf-late { background: #fde4e1; color: #b42318; } .pill.svc-terminated, .pill.svc-cancelled, .pill.svc-completed, .pill.svc-transferred, .pill.pf-cancelled { background: #eef0f3; color: #59616e; } .pill.pf-refunded { background: #ece8fb; color: #5b3fc4; } .due { font-variant-numeric: tabular-nums; } .due-soon { color: #f07c00; font-weight: 600; } /* 1.10.0: arancione vero, non bruciato (Roberto) */ .due-late { color: #b42318; font-weight: 600; } .usage { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .usage-bar { display: inline-block; width: 90px; height: 7px; border-radius: var(--radius-sm); background: #e6e8eb; overflow: hidden; } .usage-bar span { display: block; height: 100%; background: var(--primary); } .usage-bar span.is-high { background: #d92d20; } .da-cmds { display: flex; flex-wrap: wrap; gap: 6px; } em.soon { font-style: normal; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-left: 4px; } .pf-stats { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .pf-stat { display: flex; flex-direction: column; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--text); min-width: 160px; } .pf-stat span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .pf-stat.is-late strong { color: #b42318; } .pf-desc { font-size: 13.5px; } tr.pf-total td { font-weight: 600; font-size: 15px; border-top: 2px solid var(--line); } tr.svc-child td { font-size: 13.5px; } .child-mark { display: inline-block; width: 16px; color: var(--muted); font-weight: 600; margin-left: 10px; } .tile-alert { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #fdeccf; color: #9a4a00; font-weight: 600; font-size: 13px; } /* --- 0.17.1 --------------------------------------------------------------------- */ .crumb-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .crumb-bar .breadcrumb { margin: 0; } .impersonate-quick { margin: 0 0 10px; } .impersonate-quick .btn { display: inline-flex; align-items: center; gap: 6px; } .ledger-table tr.is-editing td { background: #fff7e0 !important; } /* --- 0.18.0: spunte e azioni a gruppi, modifica e invio della pro forma --- */ .bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: #fbfbfc; } .col-check { width: 34px; text-align: center; } .col-check input { width: 16px; height: 16px; vertical-align: middle; } .table-zebra tbody tr.is-selected td { background: #e8f0fd; } .sheet-head .sheet-head-act { margin-left: auto; } .pf-edit-table td { vertical-align: top; padding-top: 5px; padding-bottom: 5px; } .pf-edit-table textarea { width: 100%; font: 14px/1.4 var(--font); padding: 5px 7px; border: 1px solid #dcdfe4; border-radius: var(--radius-sm); resize: vertical; min-height: 34px; } .pf-edit-table input.pf-amount { width: 100%; text-align: right; font: 14px var(--font); height: 34px; padding: 4px 7px; border: 1px solid #dcdfe4; border-radius: var(--radius-sm); } .pf-edit-table tr.has-err textarea, .pf-edit-table tr.has-err input.pf-amount { border-color: var(--danger); } .pf-edit-table small.err { color: var(--danger); font-size: 12px; } .pf-edit-table tr.is-removed td { background: #fdf0ef !important; } .pf-edit-table tr.is-removed textarea, .pf-edit-table tr.is-removed input.pf-amount { text-decoration: line-through; color: #9aa1ab; background: #fafafa; } .pf-move { white-space: nowrap; } .pf-move .btn { padding: 2px 5px; min-width: 0; } .check-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--danger); cursor: pointer; white-space: nowrap; } .check-btn input { width: 14px; height: 14px; } .pf-edit-table tfoot td { border-top: 0; padding-top: 4px; padding-bottom: 4px; } .pf-edit-table tfoot .pf-total td { font-weight: 600; border-top: 1px solid var(--line); } .recips { display: flex; flex-direction: column; gap: 4px; } .recips label.check { font-size: 13.5px; gap: 6px; } .form-card.is-errata { border-color: #f0b44c; } .errata-hint { margin: 4px 0 0; color: #8a5a00; } .danger-zone { margin-top: 2px; } @media (max-width: 860px) { .pf-edit-table colgroup { display: none; } .pf-move { display: none; } } .form .pf-edit-table label.check-btn { flex-direction: row; display: inline-flex; margin: 6px 0 0; font-weight: 400; } /* --- 0.19.0: bollo e commissioni --- */ .tab-num.is-on { background: #e3f5ec; color: #146c43; } .fee-table input[type=text] { width: 80px; text-align: right; height: 32px; padding: 3px 6px; border: 1px solid #dcdfe4; border-radius: var(--radius-sm); font: 14px var(--font); } .fee-table select { height: 32px; font: 13.5px var(--font); border: 1px solid #dcdfe4; border-radius: var(--radius-sm); padding: 2px 6px; } .fee-table input[type=checkbox] { width: 16px; height: 16px; } .fee-table tr.has-err input[type=text] { border-color: var(--danger); } .fee-explain { margin: 0; } .fee-products { display: flex; flex-direction: column; gap: 4px; } .fee-prod-list { columns: 3 240px; column-gap: 20px; margin: 6px 0 0 24px; } .fee-prod-list label.check { break-inside: avoid; font-size: 13.5px; } .fee-cat { display: block; margin-top: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); break-after: avoid; } .pf-auto-row td { color: #59616e; } .auto-tag { font-style: normal; font-size: 11px; background: #eef0f3; color: #59616e; border-radius: var(--radius-sm); padding: 1px 5px; margin-left: 4px; } .pf-auto-note { padding: 0 12px 8px; margin: 0; } .pf-methods { padding-top: 6px; } .pf-methods .small-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 6px; } tr.is-current td { font-weight: 600; } /* --- 1.0.0: moduli, come pagare --- */ .mod-upload strong { font-size: 14px; } .mod-upload input[type=file] { font: 13px var(--font); max-width: 100%; } .mod-table td { vertical-align: top; } .mod-desc { display: block; color: var(--muted); margin-top: 2px; max-width: 70ch; } .mod-err { display: block; color: var(--danger); margin-top: 2px; } .mod-actions form { display: inline-flex; gap: 4px; margin: 0; } .mod-actions .btn { margin-left: 4px; } .mod-error { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .pay-options { display: flex; flex-direction: column; gap: 8px; } .pay-option { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: #fff; } .pay-option.is-current { border-color: #9cc0f0; background: #f6f9ff; } .pay-head { display: flex; align-items: baseline; gap: 8px; } .pay-total { margin-left: auto; font-weight: 600; } .pay-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 14px; padding: 2px 0; } .pay-row .lbl { color: var(--muted); font-size: 13px; } .pay-iban { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; user-select: all; } .pay-note { margin: 6px 0 0; font-size: 14px; } .pay-auto { margin: 2px 0 4px; } .pay-btn { margin-top: 8px; } /* --- 1.0.2: aggiornamenti --- */ .upd-form input[type=file] { font: 13px var(--font); margin-bottom: 8px; max-width: 100%; } .upd-form .check { margin: 4px 0 8px; } .upd-done { border-color: #9fd5bd; } .side-compact .sheet-row span { overflow-wrap: anywhere; } .sheet:has(> .sheet-col:only-child), .side-compact .sheet { grid-template-columns: minmax(0, 1fr); } .side-compact .sheet-col + .sheet-col { border-left: 0; border-top: 1px solid var(--line); } .side-compact .sheet-row, .side-compact .form .sheet-col > label { grid-template-columns: 96px minmax(0, 1fr); padding: 3px 10px; } /* --- 1.1.0: servizi e domini nell'area clienti --- */ .svc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 4px 0 12px; } .svc-head h1 { margin: 0; font-size: 22px; } .svc-head p { margin: 2px 0 0; } .svc-head-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .svc-head-act form { margin: 0; } .svc-da-hint { margin: -6px 0 12px; } @media (max-width: 600px) { .svc-head { flex-direction: column; } .svc-head-act { justify-content: flex-start; width: 100%; } .svc-head-act form, .svc-head-act .btn { flex: 1 1 auto; } .svc-head-act .btn { width: 100%; } } .svc-domain { display: block; } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; } .pw-reveal { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; } .pw-reveal input { font: 14px ui-monospace, Menlo, Consolas, monospace; border: 1px solid #dcdfe4; border-radius: var(--radius-sm); padding: 3px 7px; height: 29px; width: 15ch; background: #fafafa; } .pw-reveal .btn { padding: 2px 6px; } .pw-reveal .is-on { opacity: .55; } .ssl-valid { color: #146c43; font-weight: 600; } .ssl-expired, .ssl-mismatch { color: #b42318; font-weight: 600; } .ssl-none, .ssl-unknown { color: var(--muted); } .svc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .svc-actions form, .da-cmds form { display: inline-block; margin: 0; } .da-cmds { display: flex; flex-wrap: wrap; gap: 6px; } .svc-features ul { margin: 0; padding-left: 18px; columns: 2 260px; font-size: 14px; } .pkg-summary { margin: 0 0 8px; font-weight: 600; } .usage-big { display: flex; flex-direction: column; gap: 14px; } .usage-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 14px; } .usage-bar.big { width: 100%; height: 12px; border-radius: var(--radius-sm); } .usage-txt { white-space: nowrap; font-weight: 600; } .addon-offer td { vertical-align: top; } @media (max-width: 560px) { .usage-row { grid-template-columns: 1fr; gap: 4px; } } /* --- Preventivi e ordini (1.2.0) ----------------------------------------------------------- */ .pill.q-draft { background: #fff4d6; color: #8a5a00; } .pill.q-sent { background: var(--primary-l); color: #1b4a8f; } .pill.q-accepted, .pill.o-completed { background: #e3f5ec; color: #146c43; } .pill.q-rejected, .pill.q-expired { background: #fde4e1; color: #b42318; } .pill.q-cancelled, .pill.o-cancelled { background: #eef0f3; color: #59616e; } .pill.q-lead { background: #f3eafd; color: #5b2a86; font-size: 11px; padding: 1px 7px; } .pill.o-pending { background: #fdeccf; color: #9a4a00; } .pill.o-paid { background: #fde4e1; color: #b42318; } .pill.dom-active { background: #e3f5ec; color: #146c43; } .pill.dom-pending { background: #fff4d6; color: #8a5a00; } .pill.dom-cancelled, .pill.dom-expired { background: #eef0f3; color: #59616e; } .seg-choice { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; } .seg-choice .radio { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; } .q-head-grid { padding-top: 12px; } .q-table { table-layout: fixed; min-width: 900px; } .q-table td { padding-left: 4px; padding-right: 4px; } .q-table input[type=text], .q-table select { width: 100%; font: 14px var(--font); height: 34px; padding: 4px 7px; border: 1px solid #dcdfe4; border-radius: var(--radius-sm); background: #fff; } .q-table input.q-pick { margin-bottom: 4px; font-weight: 600; background: #f7f9fc; } .q-table input.q-qty { text-align: center; } .q-table input.q-domain.is-needed { border-color: #9cb8e6; background: #f6f9ff; } .q-table tr.has-err input, .q-table tr.has-err select { border-color: var(--danger); } .q-table tr.is-removed input, .q-table tr.is-removed select { text-decoration: line-through; color: #9aa1ab; background: #fafafa; } .q-table [data-q-amount] { padding-top: 12px; font-weight: 600; } .head-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .q-intro { margin: 8px 0 0; font-size: 14px; } .q-link .lbl { display: block; color: var(--muted); margin-bottom: 4px; } .q-link .pw-reveal input { width: 100%; font-size: 12px; } .q-link .pw-reveal { display: flex; gap: 4px; align-items: center; } .q-accept .check { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; } .q-accept .check input { margin-top: 3px; width: 18px; height: 18px; } .q-reject summary { cursor: pointer; list-style: none; } .q-reject summary h2 { font-size: 15px; color: var(--muted); } .q-reject summary::-webkit-details-marker { display: none; } .doc-public { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .doc-public > .card, .doc-public > details { margin: 0; } .todo-list { margin: 0 0 8px; padding-left: 18px; } .todo-list li { margin: 2px 0; } @media (max-width: 600px) { .head-acts { width: 100%; justify-content: space-between; } } /* --- Stato del sistema (1.2.1) ----------------------------------------------------------------- */ .pill.diag-pill-ok { background: #e3f5ec; color: #146c43; } .pill.diag-pill-warn { background: #fff4d6; color: #8a5a00; } .pill.diag-pill-bad { background: #fde4e1; color: #b42318; } .pill.diag-pill-off, .pill.diag-pill-info { background: #eef0f3; color: #59616e; } .diag-table { table-layout: fixed; } .diag-table td { vertical-align: top; overflow-wrap: anywhere; } .diag-table tr.diag-bad td:first-child { box-shadow: inset 3px 0 0 #d92d20; font-weight: 600; } .diag-table tr.diag-warn td:first-child { box-shadow: inset 3px 0 0 #f0a500; } .diag-hint { color: #4a5565; } .diag-card { margin-bottom: 14px; } .checks li .muted.small { font-weight: 400; } @media (max-width: 600px) { .diag-table col:first-child { width: 140px !important; } } /* --- Dashboard: rinnovi raggruppati per cliente (1.2.2) --------------------------------------- */ .renew-card { margin-bottom: 20px; } .renew-table { table-layout: fixed; } .renew-table td, .renew-table th { padding-top: 5px; padding-bottom: 5px; } .renew-table tr.renew-head td { background: #eef2f8; font-weight: 600; border-top: 1px solid #dfe5ee; padding-top: 7px; padding-bottom: 7px; } .renew-table tr.renew-head td a { color: var(--text); } .renew-table tr.renew-row td:first-child { padding-left: 28px; } .renew-table tr.renew-row.is-addon td:first-child { padding-left: 46px; position: relative; } .renew-table tr.renew-row.is-addon td:first-child::before { content: '↳'; position: absolute; left: 30px; color: #9aa3b0; } .renew-table tr.renew-row:nth-child(odd) td { background: #fafbfc; } .renew-table .show-sm { display: none; } .renew-table td.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 600px) { .renew-table { table-layout: auto; } .renew-table col { width: auto !important; } .renew-table .show-sm { display: block; } .renew-table tr.renew-row td:first-child { padding-left: 14px; } .renew-table tr.renew-row.is-addon td:first-child { padding-left: 28px; } .renew-table tr.renew-row.is-addon td:first-child::before { left: 12px; } } /* --- Dashboard 1.3.0 ----------------------------------------------------------------------------- */ .dash-lead { margin: 0 0 14px; } .todo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } /* 1.50.0: due righe da tre */ .todo-card { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--text); border-left: 4px solid #2f9e6b; transition: box-shadow .15s; } .todo-card:hover { box-shadow: 0 4px 14px rgba(20,30,50,.08); } .todo-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; background: #e3f5ec; color: #146c43; } .todo-ico .ico { width: 22px; height: 22px; } .todo-title { font-weight: 600; font-size: 14px; } .todo-n { grid-row: 1 / 3; grid-column: 3; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; } .todo-note { font-size: 12.5px; color: var(--muted); } .todo-card.todo-warn { border-left-color: #f0a500; } .todo-card.todo-warn .todo-ico { background: #fff4d6; color: #8a5a00; } .todo-card.todo-bad { border-left-color: #d92d20; } .todo-card.todo-bad .todo-ico { background: #fde4e1; color: #b42318; } .todo-card.todo-bad .todo-n { color: #b42318; } .todo-card.todo-ok .todo-n { color: #9aa3b0; } .dash-halves { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-bottom: 18px; } .dash-fixed { display: flex; flex-direction: column; height: 330px; margin: 0; } .dash-fixed .card-head { flex: 0 0 auto; } .dash-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .dash-scroll .table thead th { position: sticky; top: 0; background: var(--card, #fff); z-index: 1; } .dash-kpis { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .dash-kpis form { margin: 0; } .kpi b { color: var(--text); font-size: 15px; margin-right: 3px; } .kpi-online i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c5cad3; margin-right: 5px; vertical-align: 1px; } .kpi-online.is-on i { background: #22a06b; box-shadow: 0 0 0 3px rgba(34,160,107,.18); } .dash-table td, .dash-table th { padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; } .alert-list { list-style: none; margin: 0; padding: 0; } .alert-item { display: flex; gap: 10px; padding: 8px 16px; border-bottom: 1px solid #eef0f3; font-size: 13.5px; } .alert-item.is-new { background: #fffaf0; } .alert-dot { flex: 0 0 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: #9aa3b0; } .alert-item.lvl-bad .alert-dot { background: #d92d20; } .alert-item.lvl-warn .alert-dot { background: #f0a500; } .alert-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } /* 1.54.1: Risolto / Sblocca a destra della riga */ .alert-act { flex: 0 0 auto; margin-left: auto; align-self: center; } .alert-item.is-lock { background: #fff6e0; border-left: 4px solid #f0a500; } .dash-main { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 18px; align-items: start; } .dash-main .renew-card { margin: 0; } .dash-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .dash-side .card { margin: 0; } .feed-5 { max-height: 272px; overflow-y: auto; } .feed-5 li { padding-top: 8px; padding-bottom: 8px; } .status-card .card-head h2 { display: inline-flex; align-items: center; gap: 8px; } .status-light { width: 12px; height: 12px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 4px rgba(34,160,107,.18); } .status-warn .status-light { background: #f0a500; box-shadow: 0 0 0 4px rgba(240,165,0,.2); } .status-bad .status-light { background: #d92d20; box-shadow: 0 0 0 4px rgba(217,45,32,.18); } .status-card { border-top: 3px solid #22a06b; } .status-card.status-warn { border-top-color: #f0a500; } .status-card.status-bad { border-top-color: #d92d20; } .status-card .card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .status-card .card-foot .muted { margin-right: auto; } .mq-table td { vertical-align: top; } .mq-act { display: inline-block; margin: 0 4px 4px 0; } .mq-resolve { display: inline-block; } .mq-resolve summary { list-style: none; cursor: pointer; } .mq-resolve summary::-webkit-details-marker { display: none; } .mq-resolve[open] form { display: flex; gap: 6px; margin-top: 6px; } .mq-resolve form input { flex: 1; min-width: 120px; height: 30px; padding: 3px 7px; border: 1px solid #dcdfe4; border-radius: var(--radius-sm); font-size: 13px; } .cron-box pre { background: #0f172a; color: #e2e8f0; padding: 12px 14px; border-radius: var(--radius); overflow-x: auto; font-size: 13px; margin: 6px 0 10px; } .cron-box ol { margin: 6px 0 0 18px; padding: 0; } .cron-box li { margin: 3px 0; } @media (max-width: 1100px) { .todo-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } .dash-main { grid-template-columns: minmax(0,1fr); } } @media (max-width: 760px) { .dash-halves { grid-template-columns: minmax(0,1fr); } } @media (max-width: 480px) { .todo-cards { grid-template-columns: minmax(0,1fr); } } .alert-item.is-open { background: #fde4e1; border-left: 4px solid #d92d20; } .alert-item.is-open strong, .alert-item.is-open strong a { color: #b42318; } /* --- Opzioni configurabili (1.4.0) --- */ .co-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin-top: 6px; } .co-products fieldset { border: 1px solid var(--line, #e3e6ea); border-radius: var(--radius-sm); padding: 6px 10px 8px; margin: 0; min-width: 0; } .co-products legend { font-size: 12px; font-weight: 600; color: var(--muted, #667085); padding: 0 4px; } .co-products .check { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; margin: 3px 0; } .co-table td, .co-table th { padding: 4px 6px; vertical-align: top; } .co-table td:first-child input[type=text] { min-width: 150px; width: 100%; } .co-cell input { width: 74px; text-align: right; display: block; } .co-cell input + input { margin-top: 3px; } .co-cell .co-setup { font-size: 11.5px; color: var(--muted, #667085); background: #fafbfc; } .co-sub.is-removed td { opacity: .45; text-decoration: line-through; } .co-head { align-items: end; grid-template-columns: minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); } .co-head .field-check { grid-column: 1 / -1; } .form .co-table input[type=text] { padding: 4px 7px; height: 30px; font-size: 13px; } .form .co-table .co-cell input.co-setup { height: 24px; font-size: 11.5px; } .form .co-table label.check, .form .co-table label.check-btn { display: flex; flex-direction: row; align-items: center; gap: 4px; margin: 2px 0; font-weight: 400; font-size: 12.5px; } @media (max-width: 900px) { .co-head { grid-template-columns: minmax(0,1fr); } } .co-svc td { vertical-align: middle; padding: 5px 8px; } .co-svc select, .co-area select { min-width: 140px; } .co-qty { width: 80px; } .co-area .co-svc td:last-child { white-space: nowrap; } .is-active-link { font-weight: 600; text-decoration: underline; } .q-cfg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; } .q-cfg[hidden] { display: none; } .q-opt { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; margin: 0 !important; font-size: 12.5px; font-weight: 400 !important; } .q-opt select, .q-opt input { width: auto; min-width: 64px; padding: 2px 6px; font-size: 12.5px; } @media (max-width: 760px) { .co-cell input { width: 62px; } .co-products { grid-template-columns: minmax(0,1fr); } } .co-area .sheet-head { flex-wrap: wrap; gap: 2px 10px; } .renew-opts { display: block; line-height: 1.3; } /* --- 1.5.0 --- */ .admin-nav .nav-label { margin: 16px 12px 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.45); } .tabs.tabs-sub { margin-top: -6px; } .tabs.tabs-sub a { font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; } /* Prodotti/Servizi */ .svc-list th.chk, .svc-list td.chk { width: 28px; padding-right: 0; } .svc-list td, .svc-list th { padding-top: 5px; padding-bottom: 5px; } .svc-list .svc-opts { display: block; line-height: 1.3; } .svc-more { min-width: 26px; padding: 0 6px; font-weight: 600; } .svc-detail td { background: #f7f9fc !important; border-top: 0; padding-top: 8px; padding-bottom: 10px; } .svc-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 18px; font-size: 12.5px; } .svc-detail-grid > span { display: flex; flex-direction: column; min-width: 0; } .svc-detail-grid > span.wide { grid-column: 1 / -1; } .svc-detail-grid b { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .bulk-bar[data-bulk-bar] { display: none; margin-left: auto; align-items: center; gap: 10px; } .bulk-bar[data-bulk-bar].is-on { display: inline-flex; } /* Listino domini */ .dtld-table td { padding: 4px 6px; vertical-align: middle; } .dtld-table input[type=text], .dtld-table input[type=number] { padding: 4px 7px; height: 30px; font-size: 13px; } .dtld-table .dtld-tld { width: 90px; font-weight: 600; } .dtld-table .pf-amount { width: 82px; text-align: right; } .dtld-table .dtld-years { width: 56px; } .dtld-table .dtld-whois { width: 170px; } .dtld-table .dtld-notes { width: 150px; } .dtld-table tr.is-off td { color: var(--muted); } .dtld-tools { margin-top: 14px; } .inline-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; } .inline-fields label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 12.5px; } .whois-raw { max-height: 320px; overflow: auto; background: #f6f7f9; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 11.5px; white-space: pre-wrap; } .dtld-test { margin: 10px 0 6px; } /* Ricerca e ordine di un dominio (area clienti) */ .dom-search { display: flex; gap: 8px; padding: 14px; align-items: stretch; } .dom-search-field { flex: 1 1 auto; margin: 0; } .dom-search-field input { width: 100%; height: 46px; font-size: 17px; padding: 0 14px; } .dom-search .btn { height: 46px; padding: 0 22px; } .dom-result { padding: 14px 18px; border-left: 4px solid var(--line); } .dom-result.is-free { border-left-color: var(--accent); } .dom-result.is-taken { border-left-color: #d92d20; } .dom-verdict { font-size: 16px; margin: 0 0 8px; } .dom-name { font-size: 19px; margin-right: 6px; } .dom-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .dom-price { font-size: 16px; font-weight: 600; } .dom-hostings { display: flex; flex-direction: column; gap: 6px; } .dom-host { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); margin: 0; font-weight: 400; } .dom-host:has(input:checked) { border-color: var(--primary); background: var(--primary-l); } .dom-host input { margin-top: 3px; } .dom-total { margin-right: auto; font-size: 15px; } @media (max-width: 600px) { .dom-search { flex-direction: column; } } /* Transazioni */ .month-nav { align-items: center; } .month-nav .month-name { font-size: 16px; min-width: 150px; text-align: center; } .tx-bars { display: flex; flex-direction: column; gap: 8px; } .tx-bar-row { display: grid; grid-template-columns: 170px 1fr 120px; gap: 10px; align-items: center; font-size: 13px; } .tx-bar { height: 14px; background: #eef1f5; border-radius: var(--radius-sm); overflow: hidden; } .tx-bar i { display: block; height: 100%; background: var(--primary); border-radius: var(--radius-sm); } .tx-bar i.tx-m-paypal { background: #2f6fd6; } .tx-bar i.tx-m-stripe { background: #635bff; } .tx-bar i.tx-m-bonifico { background: var(--accent); } .tx-bar i.tx-m-altro { background: #98a2b3; } .tx-sum { display: flex; gap: 16px; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 8px; } .tx-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 150px; } .tx-col { display: flex; flex-direction: column; align-items: center; height: 100%; text-decoration: none; color: var(--muted); } .tx-colbar { flex: 1 1 auto; width: 70%; display: flex; align-items: flex-end; } .tx-colbar i { display: block; width: 100%; background: #b9c8e6; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .tx-col.is-cur .tx-colbar i { background: var(--primary); } .tx-colm { font-size: 11px; margin-top: 4px; } @media (max-width: 600px) { .tx-bar-row { grid-template-columns: 1fr 90px; } .tx-bar { grid-column: 1 / -1; grid-row: 2; } } /* Verifica in due passaggi */ .tf-title { font-size: 18px; margin: 0 0 8px; } .tf-code { font-size: 22px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; } .tf-actions { display: flex; justify-content: space-between; margin-top: 8px; } .tf-help p { margin: 0 0 8px; } .pre-line { white-space: pre-line; margin: 0 0 8px; } .renew-all { margin: 0 0 10px; } .svc-list td:nth-child(4) { white-space: nowrap; } .svc-list td:nth-child(5) { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 760px) { .svc-list td:nth-child(5) { min-width: 110px; } .svc-list .svc-more { display: none; } } .svc-list .pill-type { margin-left: 4px; } .svc-detail-grid > span.wide { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; } .svc-detail-grid > span.wide b { flex: 0 0 100%; } @media (max-width: 760px) { .svc-list td:nth-child(4), .svc-list td:nth-child(5) { white-space: normal; max-width: none; } } .form .dtld-table input[type=text], .form .dtld-table input[type=number] { min-height: 0; height: 30px; padding: 3px 7px; font-size: 13px; } .form .dtld-table input[type=checkbox] { width: 16px; height: 16px; min-height: 0; } .form .dtld-table label.check, .form .dtld-table label.check-btn { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; margin: 0; font-weight: 400; font-size: 12.5px; white-space: nowrap; } .dtld-table .dtld-whois { width: 150px; } .dtld-table .dtld-notes { width: 120px; } .svc-list td:nth-child(4) { max-width: 190px; overflow: hidden; text-overflow: ellipsis; } .svc-list td:nth-child(5) { max-width: 220px; } /* --- 1.5.1: Profilo cliente --- */ .cp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 6px; } .cp-title { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; font-size: 19px; } .cp-title .cp-id { color: var(--muted); font-size: 15px; } .cp-title .cp-sub { flex-basis: 100%; font-size: 12.5px; } .cp-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .cp-actions form { margin: 0; } .cp-tabs { margin-bottom: 12px; } .cp-tabs .tab-num.is-warn { background: #fdecc8; color: #8a5a00; } .cp-tabs .tab-num.is-bad { background: #fde4e1; color: #b42318; } .svc-jump { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; } .svc-jump label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin: 0; } .svc-jump select { min-width: 360px; max-width: 100%; padding: 5px 8px; font-size: 13.5px; } .cp-object { margin: 0 0 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px; } .cp-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr); gap: 12px; align-items: start; margin-bottom: 12px; } .cp-grid > .card, .cp-col > .card, .cp-col > form.card { margin: 0; } .cp-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .kv-table { margin: 0; font-size: 13px; } .kv-table th, .kv-table td { padding: 4px 10px; border: 0; vertical-align: top; } .kv-table th { width: 42%; font-weight: 500; color: var(--muted); text-align: left; text-transform: none; letter-spacing: 0; font-size: 12.5px; } .kv-table tr:nth-child(even) th, .kv-table tr:nth-child(even) td { background: #f6f7f9; } .kv-table td { word-break: break-word; } .cp-actions-list { display: flex; flex-direction: column; font-size: 13px; } .cp-actions-list a { padding: 5px 12px; border-bottom: 1px solid var(--line); } .cp-actions-list a:nth-child(even) { background: #f6f7f9; } .cp-col textarea { width: 100%; font-size: 13px; } .cp-profile { max-width: 1200px; } .inline-fields input[size] { min-width: 320px; } @media (max-width: 1280px) { .cp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 760px) { .cp-grid { grid-template-columns: minmax(0,1fr); } .svc-jump select { min-width: 0; width: 100%; } .svc-jump label { flex-wrap: wrap; width: 100%; } } .svc-opts { display: block; line-height: 1.3; } .cp-tabs ~ section.card, .cp-tabs ~ form.card, .cp-tabs ~ .cp-grid, .cp-tabs ~ .prod-bar { margin-bottom: 12px; } /* ---- 1.6.0 Gestione lead ---- */ .pill.lead-new { background: #e6effc; color: #1d4f9c; } .pill.lead-contacted { background: #eef0f3; color: #3b4452; } .pill.lead-interested { background: #fff4d6; color: #7a5600; } .pill.lead-quoted { background: #efe6fb; color: #5b2d9c; } .pill.lead-lost { background: #fbe9e9; color: #9c2b2b; } .pill.lead-won { background: #e3f4ee; color: #0b6b53; } .lead-actions .card-body { display: flex; flex-wrap: wrap; gap: 8px; } .lead-act-form .inline-fields { display: flex; flex-wrap: wrap; gap: 8px; } .lead-act-form .inline-fields label { flex: 1 1 140px; } .lead-timeline { list-style: none; margin: 0; padding: 0 14px 10px; } .lead-timeline li { display: grid; grid-template-columns: 92px 1fr; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line, #e5e8ec); font-size: 13px; } .lead-timeline li:first-child { border-top: 0; } .lead-timeline .la-when { color: var(--muted); font-size: 12px; grid-row: span 2; } .lead-timeline .la-kind { font-weight: 600; } .lead-timeline .la-body { overflow-wrap: anywhere; } .lead-timeline .la-status .la-kind { color: #5b2d9c; } .lead-timeline .la-call .la-kind { color: #0b6b53; } .page-bar-actions { display: flex; flex-wrap: wrap; gap: 6px; } tr.lead-due td:first-child { box-shadow: inset 3px 0 0 #d98a00; } .leads-table .lead-mob { display: none; } @media (max-width: 860px) { .leads-table .lead-mob { display: block; overflow-wrap: anywhere; } .leads-table td:first-child { min-width: 150px; } } @media (max-width: 480px) { .lead-timeline li { grid-template-columns: 1fr; } .lead-timeline .la-when { grid-row: auto; } } /* ---- 1.7.0 Automazioni ---- */ .warn-tx { color: var(--warn-tx); } .bad-tx { color: #b42318; font-weight: 600; } ul.tight { margin: 0; padding-left: 18px; } ul.tight li { margin: 3px 0; } .auto-card { padding: 0; overflow: hidden; } .auto-item { border-top: 1px solid var(--line, #e5e8ec); padding: 8px 14px 6px; } .auto-item.is-off { background: #fafbfc; } .auto-item.is-off .auto-fields, .auto-item.is-off .auto-desc { opacity: .55; } .auto-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .form .auto-switch, .auto-switch { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin: 0; min-height: 0; cursor: pointer; } .auto-switch input { width: 18px; height: 18px; min-height: 0; margin: 0; } .auto-whmcs { font-size: 11px; color: var(--muted); background: #eef0f3; border-radius: var(--radius-sm); padding: 1px 6px; } .form select.auto-freq, .auto-freq { margin-left: auto; width: auto; max-width: 270px; font-size: 13px; line-height: 1.2; padding: 2px 26px 2px 8px; min-height: 0 !important; height: 30px; } .auto-freq-txt { margin-left: auto; } .auto-when { white-space: nowrap; } .auto-desc { margin: 3px 0 5px; font-size: 12.5px; color: var(--muted); line-height: 1.4; max-width: 980px; } .auto-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .auto-general { padding: 4px 14px 8px; } .auto-f { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; align-items: center; gap: 2px 10px; padding: 3px 6px; font-size: 13px; } .auto-fields .auto-f:nth-child(4n+1), .auto-fields .auto-f:nth-child(4n+2) { background: #f6f7f9; } .auto-f .auto-lbl { color: #3b4452; } .auto-f .auto-in { display: flex; align-items: center; gap: 6px; min-width: 0; } .auto-f .auto-in em { font-style: normal; color: var(--muted); font-size: 12px; } .form .auto-f input, .form .auto-f select { min-height: 0 !important; height: 28px; padding: 2px 6px; font-size: 13px; line-height: 1.2; } .form .auto-f select { padding-right: 26px; width: auto; } .form .auto-f input.num { width: 64px; text-align: right; flex: none; } .form .auto-f input.wide { width: 100%; max-width: 280px; } .form .auto-f select { max-width: 100%; } .auto-f .auto-help { grid-column: 1 / -1; font-size: 11.5px; } .auto-f-check { grid-template-columns: 1fr; } .auto-f-check .check { margin: 0; min-height: 0; font-size: 13px; } .auto-f-check .check input { width: 16px; height: 16px; min-height: 0; } .auto-f.has-err { background: #fdecec !important; } .auto-prev .card-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .auto-prev.is-off { opacity: .75; } .auto-prev-n { margin-left: auto; font-weight: 600; font-size: 18px; } .auto-prev .card-foot { display: flex; gap: 8px; align-items: center; padding: 8px 14px; } .auto-lines { list-style: none; margin: 0; padding: 4px 14px 8px; font-size: 13px; } .auto-lines li { padding: 3px 0 3px 14px; position: relative; border-top: 1px solid #f0f1f4; } .auto-lines li:first-child { border-top: 0; } .auto-lines li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: #0b6b53; } .auto-lines li.al-warn::before { background: #d98a00; } .auto-lines li.al-warn { color: var(--warn-tx); } .auto-lines li.al-info::before { background: #9aa3af; } .auto-runs .auto-lines { padding: 4px 0 0; } .auto-runs tr.is-bad td:first-child { box-shadow: inset 3px 0 0 #b42318; } @media (max-width: 860px) { .form .auto-f input, .form .auto-f select, .form select.auto-freq { font-size: 16px; height: 34px; } .auto-fields { grid-template-columns: 1fr; } .auto-fields .auto-f:nth-child(n) { background: transparent; } .auto-fields .auto-f:nth-child(odd) { background: #f6f7f9; } .auto-freq { margin-left: 0; max-width: 100%; } .auto-when { white-space: normal; } } @media (max-width: 480px) { .auto-f { grid-template-columns: 1fr; } } .auto-prev .empty { padding: 4px 14px 6px; margin: 0; font-size: 13px; } .auto-prev .card-head { padding-top: 8px; padding-bottom: 8px; } .auto-prev .card-foot { border-top: 0; padding-top: 2px; } .auto-prev + .auto-prev { margin-top: 8px; } /* ---- 1.7.2 Novità e guida ---- */ .news-card { padding: 0; overflow: hidden; } .news-item { display: grid; grid-template-columns: 130px 1fr; gap: 4px 16px; padding: 10px 16px; border-top: 1px solid var(--line, #e5e8ec); } .news-item:first-child { border-top: 0; } .news-item:nth-child(even) { background: #f6f7f9; } .news-item.is-current { background: #eef4ff; } .news-ver { display: flex; flex-direction: column; gap: 2px; } .news-body h3 { margin: 0 0 3px; font-size: 14px; } .news-body ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; } .guide-bar { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; } .guide-bar input[type=search] { width: 100%; max-width: 520px; padding: 8px 10px; border: 1px solid var(--line, #d7dbe2); border-radius: var(--radius); font-size: 15px; } .guide-index { display: flex; flex-wrap: wrap; gap: 4px 14px; } .guide-sec { margin-top: 10px; } .guide-steps { margin: 0; padding: 6px 16px 10px 34px; font-size: 13.5px; line-height: 1.5; } .guide-steps li { padding: 3px 0; } .guide-steps li:nth-child(even) { background: #f6f7f9; } @media (max-width: 480px) { .news-item { grid-template-columns: 1fr; } .news-ver { flex-direction: row; gap: 8px; align-items: baseline; } .guide-bar input[type=search] { font-size: 16px; } } /* ---- 1.8.0 Aggiorna da WHMCS ---- */ .wsync { margin-bottom: 14px; } .wsync .card-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; } .wsync-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .wsync-actions form.inline { display: inline; } /* ---- 1.8.1 Automazioni a tabelle ---- */ .auto-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .auto-tbl col.c1 { width: 33%; } .auto-tbl th, .auto-tbl td { padding: 5px 12px; vertical-align: middle; border: 0; } .auto-tbl th { text-align: right; font-weight: 500; color: #3b4452; } .auto-tbl td { text-align: left; } .auto-tbl tbody tr:nth-child(even) td, .auto-tbl tbody tr:nth-child(even) th { background: #f6f7f9; } .auto-tbl tr.auto-h th, .auto-tbl tr.auto-h td { background: #eef2f8 !important; border-top: 2px solid #fff; padding-top: 8px; padding-bottom: 7px; vertical-align: top; } .auto-tbl tr.auto-h th { font-weight: 600; font-size: 14px; color: var(--text, #1d2430); } .auto-tbl .auto-switch { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; justify-content: flex-end; cursor: pointer; margin: 0; font-weight: 600; } .auto-tbl .auto-switch input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; } .auto-tbl .auto-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; } .auto-tbl .auto-desc { margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.4; max-width: 900px; } .auto-tbl .auto-whmcs { margin-left: auto; } .form .auto-tbl input, .form .auto-tbl select { min-height: 0 !important; height: 28px; padding: 2px 6px; font-size: 13px; line-height: 1.2; } .form .auto-tbl select { width: auto; max-width: 100%; padding-right: 26px; } .form .auto-tbl input.num { width: 64px; text-align: right; } .form .auto-tbl input.wide { width: 100%; max-width: 300px; } .auto-tbl td em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 4px; } .auto-tbl td small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; } .auto-tbl .auto-chk { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; flex-direction: row; } .auto-tbl .auto-chk input { width: 16px; height: 16px; min-height: 0; margin: 0; } .auto-tbl tbody.is-off tr:not(.auto-h) { opacity: .5; } .auto-tbl tbody.is-soon { opacity: .55; } .auto-tbl tr.has-err th, .auto-tbl tr.has-err td { background: #fdecec !important; } @media (max-width: 700px) { .auto-tbl col.c1 { width: 42%; } .auto-tbl th, .auto-tbl td { padding: 5px 8px; } .auto-tbl tr.auto-h { display: block; } .auto-tbl tr.auto-h th, .auto-tbl tr.auto-h td { display: block; width: auto; text-align: left; } .auto-tbl tr.auto-h .auto-switch { justify-content: flex-start; flex-direction: row-reverse; } .auto-tbl .auto-whmcs { margin-left: 0; } .form .auto-tbl input, .form .auto-tbl select { font-size: 16px; height: 34px; } } /* 1.9.0 — Metodo di pagamento / pagamenti automatici */ .pm-choose .radio { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 6px 0; } .pm-state { margin: 0 0 10px; } .pm-state.pm-on strong:first-child { color: var(--ok, #0a7a4b); } .pm-state.pm-off strong:first-child { color: var(--warn, #9a6100); } .pm-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; } .pm-buttons form { margin: 0; } .cp-paym .table td, .cp-paym .table th { vertical-align: middle; } .cp-paym .table td.num form { margin: 0; } /* 1.9.1 — dashboard, colonna Scadenza dei rinnovi */ .renew-due { font-variant-numeric: tabular-nums; } .renew-due:not(.due-late):not(.due-soon) { color: var(--text); } .renew-due-sub { display: block; font-size: 12px; line-height: 1.2; font-weight: 600; } /* 1.9.1 — intestazioni ordinabili e "Nascondi inattivi" (Prodotti/Servizi) */ .th-sort a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } .th-sort a:hover { color: var(--primary); text-decoration: none; } .th-sort.is-sorted a { color: var(--primary); } .th-sort .sort-ind { font-size: 9px; line-height: 1; min-width: 9px; } .th-sort:not(.is-sorted) a:hover .sort-ind::after { content: "▲"; opacity: .45; } .chk-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none !important; padding: 4px 10px; border: 1px solid #dcdfe4; border-radius: var(--radius-sm); background: #fff; white-space: nowrap; } .chk-toggle:hover { border-color: var(--primary); } .chk-toggle .chk-box { width: 15px; height: 15px; border: 1.5px solid #9aa3af; border-radius: var(--radius-sm); display: inline-grid; place-items: center; background: #fff; } .chk-toggle.is-on .chk-box { background: var(--primary); border-color: var(--primary); } .chk-toggle.is-on .chk-box::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } /* Open Sans è un po' più larga del carattere di prima: rinnovi più compatti */ .renew-table { font-size: 13.5px; } .renew-table td, .renew-table th { padding-left: 8px; padding-right: 8px; } .renew-table tr.renew-head td:first-child, .renew-table th:first-child { padding-left: 12px; } .renew-table tr.renew-row td:first-child { padding-left: 24px; } .renew-table tr.renew-row.is-addon td:first-child { padding-left: 40px; } .renew-table tr.renew-row.is-addon td:first-child::before { left: 26px; } /* 1.10.0 — Vendite (analisi) */ .sale-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .sale-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); } .sale-tile .sale-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; } .sale-tile strong { font-size: 21px; font-variant-numeric: tabular-nums; } .sale-tile.is-main { border-color: #b9cdf0; background: #f5f8fe; } .sale-up { color: #1a7f4b; font-weight: 600; } .sale-down { color: #b42318; font-weight: 600; } .sale-table td, .sale-table th { padding-top: 6px; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; } .sale-table tfoot th { color: var(--text); font-size: 14px; text-transform: none; letter-spacing: 0; border-top: 2px solid var(--line); background: #f7f8fa; } table[data-sort-table] thead th { cursor: pointer; user-select: none; } table[data-sort-table] thead th:hover { color: var(--primary); } table[data-sort-table] thead th.is-sorted { color: var(--primary); } table[data-sort-table] thead th[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; } table[data-sort-table] thead th[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; } nav.seg { display: inline-flex; border: 1px solid #dcdfe4; border-radius: var(--radius-sm); overflow: hidden; background: #fff; } nav.seg a { padding: 3px 10px; font-size: 13px; color: var(--text); text-decoration: none; border-left: 1px solid #dcdfe4; } nav.seg a:first-child { border-left: 0; } nav.seg a.is-active { background: var(--primary); color: #fff; } @media (max-width: 1100px) { .sale-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sale-tile.is-main { grid-column: 1 / -1; } } /* 1.11.0 — Prodotti/Servizi: filtro avanzato */ .filter-bar .seg { margin-right: 4px; } .filter-bar .seg a { padding: 6px 12px; font-size: 14px; } .seg-n { font-size: 11px; opacity: .75; margin-left: 2px; } .filter-bar .sel-wide { max-width: 320px; } .prod-bar select[name=tipo] { max-width: none; } .adv-filters { flex-basis: 100%; } .adv-filters > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--primary); list-style: none; padding: 2px 0; } .adv-filters > summary::-webkit-details-marker { display: none; } .adv-filters > summary::before { content: "▸"; font-size: 11px; } .adv-filters[open] > summary::before { content: "▾"; } .adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; padding: 8px 0 2px; border-top: 1px solid var(--line); margin-top: 6px; } .adv-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .adv-grid select { width: 100%; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); } .filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #e9f0fb; color: #1d4f9a; font-size: 13px; font-weight: 600; text-decoration: none !important; } .chip span { font-size: 15px; line-height: 1; opacity: .7; } .chip:hover { background: #dbe6f8; } .chip:hover span { opacity: 1; } .mail-list { position: relative; margin-left: auto; } .mail-list > summary { list-style: none; cursor: pointer; } .mail-list > summary::-webkit-details-marker { display: none; } .mail-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(460px, 86vw); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16,24,40,.14); padding: 10px 12px; display: block; text-transform: none; letter-spacing: 0; } .mail-pop p { margin: 0 0 6px; color: var(--text); } .mail-pop textarea { width: 100%; font: 12.5px/1.45 var(--font); border: 1px solid #dcdfe4; border-radius: var(--radius-sm); padding: 6px 8px; resize: vertical; } .mail-pop-act { display: flex; gap: 6px; margin-top: 6px; } .sheet-head .mail-list + .chk-toggle { margin-left: 0; } @media (max-width: 760px) { .filter-bar > label { flex: 1 1 100%; } .filter-bar select, .filter-bar .sel-wide { width: 100%; max-width: 100%; } .mail-pop { position: fixed; left: 12px; right: 12px; top: 120px; width: auto; } } /* 1.13.0 — Rimborsi */ .refund-mode { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .refund-mode legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; } .refund-mode .radio { display: flex; flex-direction: row; align-items: baseline; gap: 8px; font-size: 14px; } .refund-btn { background: var(--danger); border-color: var(--danger); } .refund-btn:hover { filter: brightness(.92); } .table tr.is-refund td { color: #5b3fc4; } /* 1.14.0 — Mail di prova (Modelli email) */ .mail-test { border-top: 1px solid var(--line); margin-top: 6px; padding: 12px 18px 14px; background: #f7f9fc; border-radius: 0 0 var(--radius) var(--radius); } .mail-test h3 { margin: 0 0 2px; font-size: 14px; } .mail-test p { margin: 4px 0; } .mail-test-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 8px 0 4px; } .mail-test-row label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; font-size: 13px; } .mail-test-row input, .mail-test-row select { font: 14px var(--font); height: 36px; padding: 4px 8px; border: 1px solid #dcdfe4; border-radius: var(--radius-sm); background: #fff; width: 100%; } /* 1.15.0 — utente di prova, scadenze delle righe tolte */ .plain-list { list-style: none; margin: 6px 0 0 30px; padding: 0; } .plain-list li { padding: 2px 0; } .tester-card .card-body { gap: 16px; } /* 1.16.0 — disdette, archivio, trasferisci proprietà */ option.opt-cancel { color: #c62828; } .cancel-box > summary, .cp-archive > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .cancel-box > summary::-webkit-details-marker, .cp-archive > summary::-webkit-details-marker { display: none; } .cancel-box > summary h2 { color: var(--danger); } .cancel-box > summary h2::before, .cp-archive > summary h2::before { content: "▸ "; color: var(--muted); } .cancel-box[open] > summary h2::before, .cp-archive[open] > summary h2::before { content: "▾ "; } .cancel-box .form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .cancel-box .form label.check { flex-direction: row; } .cancel-note { line-height: 1.5; } .live-results { flex-basis: 100%; } .live-list { margin: 6px 0 0; } .transfer-sum .table td { padding: 4px 8px; } .transfer-notes { margin: 10px 0 0 18px; padding: 0; } .transfer-notes li { padding: 1px 0; } /* 1.17.0 — linguette del Profilo cliente: fondo proprio, separatori, linguetta aperta "attaccata" alla pagina */ .cp-tabs { background: #e8edf4; border: 1px solid #d5dce6; border-radius: var(--radius) var(--radius) 0 0; box-shadow: none; gap: 0; padding: 0; margin-bottom: 12px; } .cp-tabs a { padding: 8px 11px; font-size: 13.5px; border-right: 1px solid #d5dce6; color: #44505f; } .cp-tabs a:last-child { border-right: 0; } .cp-tabs a:hover { background: #f1f4f8; color: var(--text); } .cp-tabs a.is-active { background: #fff; color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); } .cp-tabs .tab-num.is-muted { background: #dde3ea; color: #59616e; } /* barra della scheda servizio */ .obj-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .obj-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .obj-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ssl-lock { font-size: 15px; line-height: 1; cursor: help; } .ssl-lock.ssl-valid { filter: hue-rotate(60deg); } .ssl-lock.ssl-expired, .ssl-lock.ssl-mismatch, .ssl-lock.ssl-none { filter: grayscale(0) sepia(1) saturate(6) hue-rotate(-30deg); } .menu-more { position: relative; } .menu-more > summary { list-style: none; } .menu-more > summary::-webkit-details-marker { display: none; } .menu-more .menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20, 30, 50, .14); padding: 4px 0; display: flex; flex-direction: column; } .menu-more .menu-list > a, .menu-more .menu-list > span, .menu-more .menu-list button { display: block; width: 100%; text-align: left; padding: 7px 14px; font-size: 13.5px; color: var(--text); text-decoration: none; background: none; border: 0; font-family: inherit; cursor: pointer; } .menu-more .menu-list > a:hover, .menu-more .menu-list button:hover { background: #f1f4f8; } .menu-more .menu-list .is-disabled { color: var(--muted); cursor: default; } .menu-more .menu-list .is-danger { color: var(--danger); border-top: 1px solid var(--line); } .action-card { margin-bottom: 12px; border-color: #f0c2bd; } .action-card .form-grid { padding-top: 0; } .main-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .main-stack > form > section.card { margin-bottom: 12px; } .stats-table td, .stats-table th { padding-top: 5px; padding-bottom: 5px; } .sheet-row.sheet-check label.check { margin: 0; font-size: 13px; } .cmd-pkg { display: flex; gap: 6px; align-items: center; } .cmd-pkg select { min-height: 0; height: 30px; font-size: 13px; padding: 2px 6px; max-width: 170px; } .cancel-note form.inline { margin-left: 6px; } /* Trasferisci: sezioni una sotto l'altra */ .stack-1 { display: flex; flex-direction: column; gap: 12px; max-width: 980px; } .transfer-steps .inline-search input[type=search] { min-width: min(520px, 100%); } /* linguetta Email */ .mail-view > summary { cursor: pointer; } .mail-view .mail-body { margin-top: 8px; padding: 10px 12px; background: #f7f9fc; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; max-height: 420px; overflow: auto; } .svc-tab-bar { margin-bottom: 8px; } .addon-table td:nth-child(2) { min-width: 170px; } .addon-table td:nth-child(3) { min-width: 130px; } .svc-wide { display: flex; flex-direction: column-reverse; gap: 12px; margin-top: 12px; } .svc-wide > .card:not(#aggiuntivi) { max-width: 720px; } .addon-table td:last-child form.inline { display: inline; } /* 1.17.1 — Trasferisci: ricerca e risultati dentro il riquadro; comandi del pannello in linea */ .transfer-steps { align-items: start; } .transfer-search { padding-bottom: 6px; } .transfer-q { display: flex; gap: 8px; } .transfer-q input[type=search] { flex: 1; min-width: 0; } .live-results { padding: 0 16px 14px; overflow: hidden; } .live-table { width: 100%; table-layout: fixed; } .live-table th:first-child, .live-table td:first-child { width: 52px; } .live-table td, .live-table th { overflow: hidden; text-overflow: ellipsis; word-break: break-word; } .live-table th:last-child, .live-table td:last-child { width: 80px; } .da-cmds-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #f5f8fc; border-top: 1px solid var(--line); } .da-cmds-inline > .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 4px; } .da-cmds-inline .cmd-pkg { display: inline-flex; gap: 4px; align-items: center; } .da-cmds-note { flex-basis: 100%; } .cfg-mode label.radio { display: flex; gap: 6px; margin-top: 4px; } .pay-saved { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; background: #f7fbf8; } .pay-saved label.radio { display: flex; gap: 8px; margin: 4px 0; } .transfer-q input[type=search] { height: 38px; padding: 6px 12px; border: 1px solid var(--line-strong, #c9d1dc); border-radius: var(--radius); font: inherit; font-size: 14px; background: #fff; } .live-table td:nth-child(3) { white-space: nowrap; } .cp-tabs { flex-wrap: wrap; overflow: visible; } .cp-tabs a { border-bottom: 1px solid #d5dce6; margin-bottom: -1px; } /* 1.18.0 — aiuti dei campi come tooltip: niente righe sotto i campi */ .form label[title] > small, .form label.check[title] small, .form label.check[title] br { display: none; } .form label[title] .lbl, .form label.check[title] > span { text-decoration: underline dotted #9aa3ae; text-underline-offset: 3px; cursor: help; } .form label[title] .lbl::after { content: " ?"; font-size: 10px; color: #8a94a3; vertical-align: super; text-decoration: none; display: inline-block; margin-left: 1px; } .form label.show-help > small, .form .sheet label.show-help small, .form label.check.show-help small { display: block; grid-column: 1 / -1; font-size: 12px; color: #4a5361; background: #fffbe6; border: 1px solid #f0e2a8; border-radius: var(--radius-sm); padding: 4px 7px; margin-top: 3px; } /* 1.18.0: Cambia pacchetto su una riga a sé nei comandi del pannello; pulsante "Listino" accanto a Importo ricorrente */ .da-cmds-inline .cmd-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); } .da-cmds-inline .cmd-row > .lbl { font-size: 12px; color: var(--muted); text-decoration: underline dotted #9aa3ae; text-underline-offset: 3px; cursor: help; } .da-cmds-inline .cmd-pkg select { min-width: 160px; } .recalc-btn { flex: none; white-space: nowrap; } .sheet-inline input#svcAmount { flex: 1 1 auto; min-width: 70px; } input.is-filled { background: #fffbe6; } .card-head h2.has-tip { text-decoration: underline dotted #9aa3ae; text-underline-offset: 3px; cursor: help; } .verify-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: space-between; } .verify-bar > span { flex: 1 1 320px; } .upg-how { display: grid; gap: 6px; } .upg-sum .upg-pay td { border-top: 2px solid var(--line); } /* 1.18.1 — Automazioni come "Automation Settings" di WHMCS: etichetta su bianco (a destra), campo su grigio chiaro, righetta bianca tra una riga e l'altra; niente bande colorate */ .wh-tbl { border-collapse: separate; border-spacing: 0; } .wh-tbl th, .wh-tbl td, .wh-tbl tbody tr:nth-child(even) th, .wh-tbl tbody tr:nth-child(even) td, .wh-tbl tr.auto-h th, .wh-tbl tr.auto-h td { background: #fff !important; border: 0; padding: 6px 12px; vertical-align: middle; } .wh-tbl td, .wh-tbl tbody tr:nth-child(even) td, .wh-tbl tr.auto-h td { background: #eef0f3 !important; border-bottom: 2px solid #fff; } .wh-tbl th { text-align: right; font-weight: 500; font-size: 13px; color: #2f3742; border-bottom: 2px solid #fff; } .wh-tbl tr.auto-h th { font-weight: 600; font-size: 13px; padding-top: 6px; padding-bottom: 6px; } .wh-tbl tbody.auto-block + tbody.auto-block tr.auto-h th, .wh-tbl tbody + tbody.auto-block tr.auto-h th, .wh-tbl tbody + tbody.auto-block tr.auto-h td { border-top: 8px solid #fff; } .wh-tbl tbody.is-off tr:not(.auto-h) { opacity: .45; } .wh-tbl td em { margin: 0 8px 0 4px; } .wh-tbl .auto-when { font-size: 12px; color: var(--muted); margin-left: 6px; } .wh-tbl .auto-chk { margin-right: 10px; } .wh-tbl .auto-freq { margin-left: 4px; } .tip { text-decoration: underline dotted #9aa3ae; text-underline-offset: 3px; cursor: help; } @media (max-width: 720px) { .wh-tbl th { text-align: left; } .wh-tbl tr.auto-h { display: table-row; } .wh-tbl tr.auto-h th, .wh-tbl tr.auto-h td { display: table-cell; } } /* 1.18.1 — Auto-ricalcola quando salvi; pulsante www accanto al dominio */ .recalc-row .check { display: inline-flex; margin: 0 8px 0 0; } .recalc-prev.recalc-on { color: #0b6b53; font-weight: 600; } .www-btn { flex: none; font-size: 11px; padding: 2px 7px; text-decoration: none; } .wsync-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); } .wsync-key input[type=password] { width: 220px; height: 28px; min-height: 0; padding: 2px 8px; font-size: 13px; } /* 1.19.0 — Nuovo ordine (due terzi + un terzo, riepilogo che segue), pagina dell'ordine */ .pill.o-active { background: #e3f5ec; color: #146c43; } .order-new { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 14px; align-items: start; } .order-new .on-side { position: sticky; top: 12px; } .order-new .on-item { border-top: 2px solid var(--line); position: relative; } .order-new .on-item:first-child { border-top: 0; } .order-new .on-extra { grid-column: 1 / -1; padding: 4px 12px; display: grid; gap: 4px; } .order-new .on-extra:empty { display: none; } .order-new .on-addons, .order-new .on-opts { display: grid; grid-template-columns: 150px 1fr; gap: 4px 10px; align-items: start; font-size: 13px; } .order-new .on-addons > div, .order-new .on-opts > div { display: flex; flex-wrap: wrap; gap: 4px 14px; } .order-new .on-addons .check { margin: 0; } .order-new .on-opt { display: inline-flex; align-items: center; gap: 6px; margin: 0; flex-direction: row; } .order-new .on-opt select, .order-new .on-opt input[type=number] { height: 28px; min-height: 0; padding: 2px 6px; font-size: 13px; width: auto; } .order-new .on-item-foot { grid-column: 1 / -1; text-align: right; padding: 0 10px 6px; } .order-new label.is-req .lbl::after { content: " *"; color: #b42318; } .order-new .on-radios { display: flex; gap: 14px; } .order-new .on-radios .radio { margin: 0; display: inline-flex; gap: 5px; align-items: center; flex-direction: row; } .on-sum-t td, .on-sum-t th { padding: 4px 8px; } .on-sum-t tr.on-sub td { color: #4b5563; font-size: 12px; } .on-tot { padding: 6px 10px; border-top: 2px solid var(--line); display: grid; gap: 3px; } .on-tot > div { display: flex; justify-content: space-between; font-size: 13px; } .on-tot > div:first-child { font-size: 15px; } .on-sum .card-foot { display: grid; gap: 6px; } .order-items tr.order-sub td { background: #f4f7fb !important; border-top: 0; } .order-panel { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: flex-end; } .order-panel label { margin: 0; display: grid; gap: 2px; font-size: 12px; } .order-panel label.check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; } .order-panel input[type=text], .order-panel input[type=password], .order-panel select { height: 30px; min-height: 0; padding: 2px 8px; font-size: 13px; width: 170px; } .order-checks { display: flex; flex-wrap: wrap; gap: 6px 20px; } .order-checks .check { margin: 0; } .order-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; align-items: center; } .order-buttons form { display: inline; margin: 0; } @media (max-width: 900px) { .order-new { grid-template-columns: 1fr; } .order-new .on-side { position: static; } .order-new .on-addons, .order-new .on-opts { grid-template-columns: 1fr; } } .capture-bad { color: #b42318; font-weight: 600; } .capture-ok { color: #146c43; } .bulk-bar-bottom { border-top: 1px solid var(--line); } /* 1.19.1 — Nuovo ordine: sezioni distanziate; Ordini: tipo; Cosa fare adesso: prefattura esistente */ .order-new .on-main { display: grid; gap: 16px; align-content: start; } .order-new .on-main > .card { margin: 0; } .kind-one { color: #6b4fa0; } .kind-mix { color: #8a5a00; } .order-pf { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .orders-tbl td.o-cosa { min-width: 200px; } .orders-tbl td, .orders-tbl th { padding-left: 8px; padding-right: 8px; } .orders-tbl td { vertical-align: top; } .order-restore { display: inline-flex !important; align-items: center; gap: 8px; padding: 4px 8px; background: #f4f7fb; border-radius: var(--radius-sm); } .order-restore label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; } .order-restore input[type=date] { height: 30px; min-height: 0; padding: 2px 6px; font-size: 13px; width: auto; } /* 1.19.4 — colonna ID allineata a sinistra in tutte le tabelle (Roberto) */ .table th.col-id, .table td.col-id { text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; width: 1%; } .table td.has-group.col-id { padding-left: 12px; } /* 1.20.0 — Area clienti: tendine del menu (Amministrazione, Assistenza) e menu dell'account ("Ciao, Nome") */ .nav-ico { width: 17px; height: 17px; flex: 0 0 17px; } .nav-dd, .user-dd { position: relative; } .nav-dd > summary, .user-dd > summary { list-style: none; cursor: pointer; user-select: none; } .nav-dd > summary::-webkit-details-marker, .user-dd > summary::-webkit-details-marker { display: none; } .nav-dd > summary { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius); color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; } .nav-dd > summary:hover, .nav-dd[open] > summary { color: var(--text); background: var(--bg); } .nav-dd.is-active > summary { color: var(--primary); background: var(--primary-l); } .dd-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; margin-left: 2px; transition: transform .15s; } details[open] > summary .dd-caret { transform: rotate(180deg); } .dd-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 32px rgba(16,24,40,.14); padding: 6px; display: flex; flex-direction: column; gap: 1px; } .dd-menu.dd-right { left: auto; right: 0; } .dd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none !important; white-space: nowrap; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit; } .dd-item .nav-ico { color: var(--muted); } .dd-item:hover { background: var(--bg); } .dd-item:hover .nav-ico, .dd-item.is-active .nav-ico { color: var(--primary); } .dd-item.is-active { background: var(--primary-l); color: var(--primary); } .dd-item.is-soon { opacity: .55; cursor: default; } .dd-item.is-soon em { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); border-radius: 999px; padding: 0 5px; margin-left: auto; } .dd-head { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .dd-head strong { font-weight: 600; font-size: 14px; } .dd-sep { border-top: 1px solid var(--line); margin: 4px 0 0; padding-top: 4px; } .user-dd > summary.user-link { gap: 8px; } .user-dd[open] > summary.user-link, .user-dd.is-active > summary.user-link { background: var(--bg); } @media (max-width: 860px) { .client-nav .nav-dd { flex-direction: column; } .client-nav .nav-dd > summary { min-height: var(--tap); font-size: 15px; } .client-nav .dd-menu { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 2px 0 6px 20px; padding: 0 0 0 6px; min-width: 0; } .client-nav .dd-item { min-height: var(--tap); font-size: 15px; } } /* 1.20.0 — Metodi di pagamento, Sicurezza account, Cronologia email, Credito prepagato (area clienti) */ .page-intro { margin: -4px 0 0; color: var(--muted); font-size: 14px; max-width: 820px; } .btn-ico { display: inline-flex; align-items: center; gap: 6px; } .btn-ico .nav-ico { width: 15px; height: 15px; flex-basis: 15px; } .secure-note { display: flex; gap: 12px; align-items: flex-start; background: #eef8f2; border: 1px solid #cfe9da; color: #1f4d33; border-radius: var(--radius); padding: 12px 14px; font-size: 13.5px; line-height: 1.5; } .secure-note strong { font-weight: 600; } .secure-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #d9f0e3; display: grid; place-items: center; color: #1f7a4a; } .secure-ico .nav-ico { width: 18px; height: 18px; } .pm-name { display: inline-flex; align-items: center; gap: 8px; } .pm-name .nav-ico { color: var(--muted); } .pm-name strong { font-weight: 600; } .pm-exp { display: block; margin-left: 25px; } .pm-table td { vertical-align: middle; } .pm-actions { white-space: nowrap; } .pm-actions form, .pm-actions a { margin-left: 4px; } .pm-state-line { line-height: 1.5; } .pm-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .pm-choice { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px; } .pm-choice-head { display: flex; gap: 12px; } .pm-choice-head h2 { font-size: 16px; margin: 0 0 4px; } .pm-choice-head p { margin: 0; } .pm-choice-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius); background: var(--primary-l); color: var(--primary); display: grid; place-items: center; } .pm-choice-ico .nav-ico { width: 22px; height: 22px; } .pm-choice-btn .btn { width: 100%; justify-content: center; } .form-actions-plain { border: 0; background: none; box-shadow: none; padding: 0; } .pm-addrs { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .pm-addrs .radio { align-items: flex-start; } .pm-addr-row { align-items: flex-start; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; } .modal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 18px; gap: 10px 14px; } dialog#addrDialog { width: min(620px, calc(100vw - 32px)); } @media (max-width: 560px) { .modal-grid { grid-template-columns: minmax(0, 1fr); } } .sec-link .pm-name { gap: 10px; } .mail-frame { width: 100%; min-height: 520px; border: 0; border-top: 1px solid var(--line); background: #fff; display: block; } .pager a, .pager strong { padding: 2px 6px; } .credit-top { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 14px; align-items: stretch; } .credit-bal .card-body { display: flex; flex-direction: column; gap: 4px; justify-content: center; height: 100%; } .credit-bal-lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; } .credit-bal-val { font-size: 28px; font-weight: 600; color: var(--primary); } .credit-intro { margin: 0; } .credit-intro p { margin: 0 0 6px; } .credit-intro p:last-child { margin: 0; } .credit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .credit-limits td { padding-top: 8px; padding-bottom: 8px; } .credit-form .card-foot { margin: 0; } .amt-in { color: #1f7a4a; } .amt-out { color: #b42318; } .credit-use { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .credit-use span { display: inline-flex; align-items: center; gap: 6px; } .credit-adj { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); align-items: center; } .credit-adj input[name=amount] { width: 110px; } .credit-adj input[name=reason] { flex: 1 1 240px; } @media (max-width: 860px) { .credit-top, .credit-grid { grid-template-columns: minmax(0, 1fr); } .pm-actions { white-space: normal; } .pm-actions form, .pm-actions a { margin: 2px 0 2px 4px; } } .pm-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; } .pm-actions form, .pm-actions a { margin: 0 !important; } .pm-manual { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); } .pm-manual select { max-width: 240px; } @media (min-width: 861px) { .pm-actions { flex-wrap: nowrap; } .pm-table td, .pm-table th { overflow-wrap: normal; } .pm-name strong { white-space: nowrap; } } @media (max-width: 860px) { .pm-table thead { display: none; } .pm-table tr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .pm-table td { display: block; padding: 0 !important; border: 0 !important; overflow-wrap: normal; background: none !important; } .pm-table td:last-child { flex-basis: 100%; } .pm-table td:last-child:empty { display: none; } .pm-name strong { white-space: nowrap; } .pm-actions { justify-content: flex-start; } .pm-actions .btn { min-height: 36px; } } /* 1.20.2 — Area clienti: intestazioni di sezione e di tabella grigio chiaro (non bianche) */ body.client { --head-bg: #f1f3f6; } body.client .card-head, body.client .sheet-head, body.client .panel-title, body.client .modal-head { background: var(--head-bg); } body.client .card > .card-head:first-child, body.client .card > header:first-child, body.client .panel > .panel-title:first-child, body.client .card > form:first-child > .card-head:first-child { border-radius: var(--radius) var(--radius) 0 0; } body.client form.card > .card-head:first-of-type { border-radius: var(--radius) var(--radius) 0 0; } body.client .table thead th { background: var(--head-bg); } body.client .card > .table-wrap:first-child .table thead th:first-child { border-top-left-radius: var(--radius); } body.client .card > .table-wrap:first-child .table thead th:last-child { border-top-right-radius: var(--radius); } /* 1.21.0 — Configurazione → Testi dell'area clienti */ .lang-table td { vertical-align: top; } .lang-where { width: 38%; } .lang-where span:first-child { display: block; font-size: 13px; } .lang-where code { display: block; font-size: 11.5px; margin: 2px 0; } .lang-table textarea { width: 100%; min-height: 34px; font-size: 13.5px; padding: 6px 8px; resize: vertical; } .lang-table textarea::placeholder { color: #8a93a3; opacity: 1; } .lang-group td { background: var(--bg); } @media (max-width: 860px) { .lang-table tr { display: block; } .lang-table td { display: block; width: auto; } } /* 1.22.0 — Prefattura: "Come vuoi pagare?" a pulsanti, una sezione per metodo */ .pay-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .pay-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--text); position: relative; } .pay-tab .nav-ico { width: 20px; height: 20px; color: var(--muted); margin-bottom: 4px; } .pay-tab-name { font-weight: 600; font-size: 14px; line-height: 1.25; } .pay-tab-total { font-size: 13px; color: var(--muted); } .pay-tab-def { position: absolute; top: 8px; right: 10px; font-size: 11px; color: var(--primary); } .pay-tab:hover { border-color: #9cc0f0; } .pay-tab.is-on { border-color: var(--primary); background: #f6f9ff; box-shadow: inset 0 0 0 1px var(--primary); } .pay-tab.is-on .nav-ico { color: var(--primary); } .pay-pref { margin: 2px 0 0; } .pay-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: #fff; } .pay-panel[hidden] { display: none; } .pay-panel .pay-saved { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; padding: 10px 12px; } .pay-panel .pay-saved .btn { align-self: flex-start; margin-top: 6px; } .pay-other { margin: 10px 0 0; } @media (max-width: 560px) { .pay-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 1.23.0 — Stampa della prefattura con i dati per il pagamento (bonifico) */ @media print { body.client { background: #fff !important; } body.client .testbar, body.client .impersonate-bar, body.client .client-top, body.client .client-switch, body.client .client-side, body.client .client-foot, body.client .breadcrumb, body.client .verify-bar, body.client .credit-use, body.client .doc-public > p { display: none !important; } body.client .client-shell { display: block !important; padding: 0 !important; max-width: none !important; } body.client .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: auto; } body.client .head-acts .btn, body.client .pay-tabs, body.client .pay-pref, body.client .pay-btn, body.client .pay-saved, body.client .pay-other, body.client .pay-panel[hidden], body.client [data-pay-rows][hidden], body.client .alert { display: none !important; } body.client .pay-panel { border: 2px solid #000 !important; } body.client a { color: #000 !important; text-decoration: none !important; } } .print-only { display: none; } .pf-print-head { padding: 14px 18px 10px; font-size: 13px; } @media print { body.client .print-only { display: block !important; } body.client .no-print { display: none !important; } } /* 1.25.0 — Servizi archiviati ad albero; Scadenze e rinnovi per scadenza */ .arch-group + .arch-group tr:first-child td { border-top: 2px solid var(--line); } .arch-child td:nth-child(2) { padding-left: 26px; } .arch-indent { color: var(--muted); margin: 0 6px 0 -14px; } .renew-table .amt-net { display: none; } body.renew-net .renew-table .amt-full { display: none; } body.renew-net .renew-table .amt-net { display: inline; } body.renew-net .renew-table .renew-auto { display: none; } .renew-table tr.renew-auto td { background: #fff !important; font-style: italic; } .renew-table tfoot tr.renew-total td { background: #eef2f8; border-top: 2px solid #c9d3e1; padding-top: 8px; padding-bottom: 8px; } .seg { display: inline-flex; } .seg .btn { border-radius: 0; } .seg .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .seg .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1px; } .seg .btn.is-on { background: var(--primary-l); color: var(--primary); border-color: #9cc0f0; position: relative; } .renew-filters { flex-wrap: wrap; gap: 8px 18px; } .renew-filters form { display: flex; align-items: center; gap: 8px; margin: 0; } .bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); } @media print { body.admin .admin-side, body.admin .admin-top, body.admin .testbar, body.admin .no-print, body.admin .alert, body.admin .tabs { display: none !important; } body.admin .admin-main { margin: 0 !important; padding: 0 !important; } body.admin .card { box-shadow: none !important; border: 1px solid #ccc !important; } body.admin a { color: #000 !important; text-decoration: none !important; } } /* 1.25.0 — azioni di riga nelle tabelle (Apri · Modifica · Rimborsa) */ .row-acts{white-space:nowrap;text-align:right} .row-acts .btn{margin-left:4px} .row-acts .btn:first-child{margin-left:0} @media (max-width:700px){.row-acts{white-space:normal}.row-acts .btn{margin:2px 0 2px 4px}} /* 1.25.1 — Rimuovi (rosso, link) quando non si può: grigio, il motivo nel tooltip */ .btn-link:disabled, .btn-danger:disabled { opacity: .4; cursor: not-allowed; } /* 1.25.4 — riquadro "Modalità test: prova con i clienti veri" (Automazioni) */ .card.test-run { margin-bottom: 14px; } .card.test-run td:first-child { width: 190px; white-space: nowrap; color: var(--muted); } /* ===== 1.26.0 — Servizi e Domini: voce con tendina, negozio, carrello ===== */ .nav-split { position: relative; display: flex; align-items: center; } .client-nav .nav-split-main { gap: 7px; padding-right: 4px; } .client-nav .nav-split.is-active > .nav-split-main { color: var(--primary); background: var(--primary-l); } .nav-split-caret { display: inline-flex; align-items: center; justify-content: center; width: 24px; min-height: 40px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: var(--radius-sm); } .nav-split-caret:hover { background: var(--bg); color: var(--text); } .nav-split > .dd-menu { display: none; top: 100%; } .nav-split > .dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; } /* ponte per il mouse */ .nav-split:hover > .dd-menu, .nav-split:focus-within > .dd-menu, .nav-split.is-open > .dd-menu { display: flex; } .nav-split.is-open .dd-caret { transform: rotate(180deg); } @media (max-width: 860px) { .nav-split { flex-wrap: wrap; } .client-nav .nav-split-main { flex: 1 1 auto; } .nav-split-caret { display: none; } .client-nav .nav-split > .dd-menu { display: flex; flex-basis: 100%; } } .shop-3 { display: grid; grid-template-columns: minmax(0,2fr) minmax(220px,1fr); gap: 20px; align-items: start; } .shop-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .shop-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; } @media (max-width: 1000px) { .shop-3 { grid-template-columns: minmax(0,1fr); } .shop-right { position: static; } } .btn-block { display: flex; width: 100%; justify-content: center; } .renew-list tr.is-off td { color: var(--muted); } .renew-list .child-mark { color: var(--muted); margin-left: 6px; } .side-links a.is-active { color: var(--primary); font-weight: 600; } .side-links a.side-ico { gap: 8px; } .side-links a.side-ico .nav-ico { width: 17px; height: 17px; color: var(--muted); } .side-links a .tab-num { margin-left: auto; } .mini-cart { list-style: none; margin: 0 0 8px; padding: 0; } .mini-cart li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .mini-cart li span { display: flex; flex-direction: column; min-width: 0; } .mini-cart li small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-cart li strong { white-space: nowrap; font-weight: 600; } .mini-cart li.is-err { opacity: .6; } .mini-cart-tot { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0 0 12px; font-size: 13px; } .mini-cart-tot dt { color: var(--muted); } .mini-cart-tot dd { margin: 0; text-align: right; white-space: nowrap; } .mini-cart-tot .tot { color: var(--text); font-weight: 600; font-size: 14px; border-top: 1px solid var(--line); padding-top: 5px; } .add-desc { font-size: 14px; border-bottom: 1px solid var(--line); } .addon-shop td { vertical-align: middle; } .addon-shop .addon-what { width: 50%; } .addon-shop .addon-desc p { margin: 2px 0 0; } .addon-form { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .addon-form select { max-width: 260px; min-height: 32px; font-size: 13px; } @media (max-width: 640px) { .addon-shop .addon-what { width: auto; } .addon-form { justify-content: flex-start; } .addon-form select { max-width: 100%; } } .cart-table tbody tr.is-err td { background: #fff7f6; } .cart-table select { min-height: 32px; font-size: 13px; max-width: 220px; } .cart-table .qty-input { width: 64px; min-height: 32px; text-align: right; } .cart-table tfoot td { border-top: 0; padding-top: 4px; padding-bottom: 4px; } .cart-table tfoot tr:first-child td { border-top: 1px solid var(--line); padding-top: 10px; } .cart-table tfoot .cart-total td { font-weight: 600; font-size: 15px; } .cart-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .cart-checkout { display: flex; justify-content: flex-end; align-items: center; gap: 12px; } .cart-empty-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 0 16px 18px; } .renew-list .renew-what { min-width: 200px; } .renew-list td:last-child { width: 1%; } /* 1.26.1 — scheda server in tre sezioni */ .form-grid.form-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .form-grid-3 .span-3 { grid-column: 1 / -1; } .card-head.card-head-sub { border-top: 1px solid var(--line); } .ns-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 8px 18px; padding: 16px 18px 18px; } .inline-pair { display: flex; gap: 8px; align-items: center; } .inline-pair select { flex: 1 1 auto; } .inline-pair .btn { flex: none; white-space: nowrap; } @media (max-width: 860px) { .form-grid.form-grid-3 { grid-template-columns: minmax(0,1fr); } } .server-form { display: flex; flex-direction: column; gap: 20px; } /* 1.26.2: sezioni separate */ .server-form > .card > .card-head { border-top: 0; } .mail-frame { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f4f5f7; } /* 1.26.2: anteprima della mail impaginata */ /* 1.27.0 — Gestisci prefattura: barra in alto, schede in card separate, voci modificabili, libro mastro, tentativi */ .pf-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; } .pf-topbar h1 { font-size: 20px; margin: 0; } .pf-topbar h1 .muted { font-size: 15px; font-weight: 500; } .pf-topbar-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .nav-dd.pf-dd > summary.btn { display: inline-flex; min-height: 28px; padding: 2px 8px; font-size: 12.5px; color: var(--text); background: var(--surface); border: 1px solid var(--line); font-weight: 600; gap: 4px; } .nav-dd.pf-dd > summary.btn:hover, .nav-dd.pf-dd[open] > summary.btn { background: var(--bg); } .pf-dd .dd-menu { min-width: 190px; } .pf-dd .dd-item { font-size: 13px; padding: 6px 10px; } .pf-manage { margin-bottom: 20px; } .pf-tabs { margin-bottom: 12px; } .pf-tabs .tab-soon { padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--muted); opacity: .5; white-space: nowrap; cursor: default; } .pf-tabs .tab-soon em { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); border-radius: 999px; padding: 0 5px; margin-left: 4px; } .pf-panel { display: flex; flex-direction: column; gap: 20px; } .pf-items, #mastro, #tentativi { margin-top: 20px; } .sheet-row.sheet-mail { align-items: start; padding-top: 6px; padding-bottom: 6px; } .pf-mail { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pf-mail .check { margin: 0; font-weight: 400; } .pf-mail-note { min-height: 29px; height: 29px; font-size: 13px; padding: 3px 8px; } .pf-cmds { border-top: 1px solid var(--line); padding: 8px 12px; } .pf-credit-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; } .pf-credit-body .lbl { font-size: 13px; font-weight: 600; color: #4a5361; margin-right: 6px; white-space: nowrap; } .pf-credit-body input[type=date] { min-height: 29px; height: 29px; padding: 3px 8px; font-size: 14px; } .form .sheet-col > label.sheet-check > span:last-child { display: flex; align-items: center; gap: 6px; } .pf-items-table td { vertical-align: top; } .pf-items-table textarea { width: 100%; min-height: 29px; font-size: 14px; line-height: 1.4; padding: 3px 8px; resize: vertical; } .pf-items-table .pf-amount { width: 100%; text-align: right; min-height: 29px; height: 29px; padding: 3px 8px; font-size: 14px; } .pf-items-table td.center, .pf-items-table th.center { text-align: center; } .pf-items-table td.center input { margin-top: 7px; } .pf-items-table .pf-link { display: block; color: var(--muted); margin-top: 2px; } .form .pf-items-table label.check-btn { display: inline-flex; flex-direction: row; margin: 5px 0 0; font-weight: 400; } .pf-items-table .check-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pf-items-table .check-btn .ico { width: 17px; height: 17px; } .pf-items-table tr.is-removed .check-btn { color: #fff; background: var(--danger); border-radius: var(--radius-sm); } .pf-items-acts { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .pf-items-save { order: 2; display: flex; gap: 6px; align-items: center; margin-left: auto; } .pf-bulk { order: 1; } .pf-bulk .lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 4px; white-space: nowrap; } .pf-bulk select { min-height: 28px; height: 28px; padding: 2px 6px; font-size: 13px; } .ico-btn .ico { width: 16px; height: 16px; } .pf-ledger td { vertical-align: middle; } .pf-txn .sheet-row { grid-template-columns: 140px minmax(0, 1fr); } .pill.pf-credit { background: #fff4e5; color: #9a5b00; } .pf-notes { width: 100%; } .form .pf-items-table input[type=checkbox], .form .sheet label.sheet-check input[type=checkbox] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none; } .form .sheet label.sheet-check > span:last-child { justify-content: flex-start; } .pf-items-table td:first-child { padding-top: 12px; } .pf-items-table thead th:first-child { vertical-align: middle; } .server-accounts { margin-top: 20px; } /* 1.27.4 — Prefatture: intestazioni cliccabili e stato sulla riga */ .table th.th-sort a { color: inherit; text-decoration: none; } .table th.th-sort a:hover, .table th.th-sort.is-sorted a { color: var(--primary); } select.pf-inline { font-size: 12px; font-weight: 600; min-height: 24px; height: 24px; padding: 0 22px 0 8px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; max-width: 128px; } select.pf-inline option { font-weight: 400; color: var(--text); background: #fff; } select.pf-inline.pf-paid { background-color: #e3f5ec; color: #146c43; } select.pf-inline.pf-draft { background-color: #fff4d6; color: #8a5a00; } select.pf-inline.pf-unpaid { background-color: #fdeccf; color: #9a4a00; } select.pf-inline.pf-late { background-color: #fde4e1; color: #b42318; } select.pf-inline.pf-cancelled { background-color: #eef0f3; color: #59616e; } select.pf-inline.pf-refunded { background-color: #ece8fb; color: #5b3fc4; } .pf-list td.pf-client { min-width: 180px; } .pf-list td.small { font-size: 12.5px; } .pf-list th, .pf-list td { padding-left: 9px; padding-right: 9px; } /* 1.27.5 — Credito assistenza (colonna sinistra): linea sotto il saldo, poi i link come nei pannelli del negozio */ .side-links.side-links-sep { margin: 12px 0 -4px; border-top: 1px solid var(--line); } /* 1.28.0 — Widget: pagina Aspetto → Widget, modifica, anteprima; widget nell'area clienti */ .widget-admin { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; } .widget-types, .widget-regions { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .widget-types { gap: 12px; position: sticky; top: 12px; } .widget-type .card-head { padding: 10px 12px; } .widget-type .card-head h2 { font-size: 14px; display: flex; align-items: center; gap: 8px; } .widget-type-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--primary-l); color: var(--primary); } .widget-type-ico .nav-ico { width: 16px; height: 16px; } .widget-type > .card-body { padding: 0 12px 10px; } .widget-type-add { display: flex; gap: 6px; } .widget-type-add select { flex: 1 1 auto; min-width: 0; min-height: 28px; height: 28px; font-size: 13px; padding: 2px 6px; } .widget-table td { vertical-align: middle; } .widget-table tr.is-off td { opacity: .55; } .widget-table .move-btn { width: 26px; height: 26px; font-size: 10px; } .widget-table .move-btn:disabled { opacity: .3; cursor: default; } .widget-table select { min-height: 28px; height: 28px; font-size: 12.5px; padding: 2px 6px; max-width: 100%; } .switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; } .switch input { width: 16px; height: 16px; } .widget-edit { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } .widget-edit-main { display: flex; flex-direction: column; gap: 20px; } .widget-edit-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 12px; } .widget-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 6px 0; } .widget-pages .check { margin: 0; font-weight: 400; } .form .sheet-col > .sheet-tall-row { align-items: start; padding-top: 7px; } .editor-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; } .editor-box textarea { width: 100%; font-size: 14px; line-height: 1.5; } .widget-links-edit input[type=text], .widget-links-edit select { width: 100%; min-height: 29px; height: 29px; font-size: 13.5px; padding: 3px 8px; } .widget-links-edit td { vertical-align: middle; } .pf-edit-row:has([data-pf-remove]:checked) td:not(.pf-remove) { opacity: .4; } .pf-edit-row:has([data-pf-remove]:checked) .check-btn { color: #fff; background: var(--danger); border-radius: var(--radius-sm); } .widget-thumb { max-width: 220px; max-height: 120px; border: 1px solid var(--line); border-radius: var(--radius-sm); } .widget-preview { background: var(--bg); padding: 12px; } .widget-preview .panel { max-width: 280px; } /* nell'area clienti */ .widget-links .side-ico .ext-mark { margin-left: auto; color: var(--muted); font-size: 12px; opacity: 0; transition: opacity .15s; } .widget-links .side-ico:hover .ext-mark { opacity: 1; } .side-links a.side-ico { transition: color .15s, background .15s; } .side-links a.side-ico:hover .nav-ico { color: var(--primary); } .widget-text { font-size: 14px; line-height: 1.55; } .widget-text > :first-child { margin-top: 0; } .widget-text > :last-child { margin-bottom: 0; } .widget-text ul, .widget-text ol { padding-left: 18px; margin: 6px 0; } .widget-intro { font-size: 14px; margin: 0 0 10px; } .widget-img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); } .widget-img-link { display: block; } .widget-region { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; } .region-bottom { margin-top: 20px; margin-bottom: 0; } @media (max-width: 1100px) { .widget-admin, .widget-edit { grid-template-columns: minmax(0, 1fr); } .widget-types, .widget-edit-side { position: static; } } .widget-admin { grid-template-columns: 250px minmax(0, 1fr); } .widget-meta { display: block; color: var(--muted); margin-top: 1px; } .widget-help { display: block; margin-top: 1px; } .widget-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 16px; padding: 10px 12px; } .form .widget-pages label.check { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-weight: 400; } .form .widget-pages input[type=checkbox] { width: 16px; height: 16px; min-height: 0; flex: none; } .widget-sheet-one { grid-template-columns: minmax(0, 1fr); } .widget-links-edit { table-layout: fixed; width: 100%; } /* 1.29.4: voci di serie dei blocchi del programma */ .widget-links-edit tr.is-builtin td { background-image: linear-gradient(90deg, rgba(37,99,235,.05), rgba(37,99,235,.05)); } .widget-links-edit tr.is-off td:not(:last-child) { opacity: .5; } .widget-links-edit td .pill { margin-right: 4px; } .widget-links-edit .ico-help { display: inline-flex; vertical-align: middle; width: 15px; height: 15px; color: var(--muted); cursor: help; } .widget-links-edit .ico-help svg { width: 15px; height: 15px; } /* 1.29.0 — Scegli un dominio (area/aggiungi.php) */ .add-form { display: flex; flex-direction: column; gap: 20px; } .add-form > .form-actions.card { border-radius: var(--radius); } .dom-options { display: flex; flex-direction: column; gap: 4px; } .dom-opt { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 8px 0 4px; cursor: pointer; } .dom-opt input { width: 17px; height: 17px; } .dom-sub { margin: 0 0 8px 25px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } .dom-search { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dom-www { font-weight: 600; color: var(--muted); } .dom-search input[name=sld] { flex: 1 1 200px; min-width: 0; } .dom-search select { flex: 0 0 auto; width: auto; } .dom-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .dom-results { margin-top: 12px; } .dom-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 4px; } .dom-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .dom-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 90px 170px; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 14px; } .dom-row:last-child { border-bottom: 0; } .dom-row:nth-child(even) { background: #f7f8fa; } .dom-row.is-main { font-size: 16px; padding: 10px 12px; } .dom-name { font-weight: 600; overflow-wrap: anywhere; } .dom-st { font-size: 12.5px; font-weight: 600; } .dom-free { color: #146c43; } .dom-taken { color: #b42318; } .dom-ours { color: var(--primary); } .dom-unknown { color: #8a5a00; } .dom-price { text-align: right; font-variant-numeric: tabular-nums; } .dom-act { text-align: right; } .dom-pick { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 13px; } .dom-pick input { width: 16px; height: 16px; } .dom-taken-note { margin: 6px 0 0; } .dom-prices { margin: 8px 0 0; } .dom-manual { color: #8a5a00; background: #fff8e6; border-top: 1px solid #f2e3b8; } @media (max-width: 640px) { .dom-row { grid-template-columns: minmax(0, 1fr) auto; } .dom-price, .dom-act { text-align: left; } .dom-fields { grid-template-columns: minmax(0, 1fr); } .dom-sub { margin-left: 0; } } .form label.dom-pick { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; margin: 0; font-weight: 500; } .form label.dom-opt { flex-direction: row; margin: 0; } .dom-row { padding: 5px 12px; min-height: 0; } .dom-row.is-main { padding: 8px 12px; } .dom-pick input { min-height: 0 !important; height: 16px !important; margin: 0; } /* 1.29.1 — Listino domini: risposta dei motori */ .dtld-debug { margin-top: 8px; } .dtld-debug td { vertical-align: top; } .dtld-info { overflow-wrap: anywhere; } /* 1.29.2 — attesa (form[data-busy]) e whois del dominio registrato */ @keyframes qd-spin { to { transform: rotate(360deg); } } body.is-busy, body.is-busy * { cursor: progress !important; } .btn-busy { position: relative; color: transparent !important; } .btn-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-color: var(--primary) var(--primary) transparent transparent; border-radius: 50%; animation: qd-spin .7s linear infinite; } .btn-primary.btn-busy::after { border-color: #fff #fff transparent transparent; } .busy-note { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; background: #1f2937; color: #fff; padding: 10px 18px 10px 42px; border-radius: 999px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .busy-note::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid #fff; border-color: #fff #fff transparent transparent; border-radius: 50%; animation: qd-spin .7s linear infinite; } form.is-busy .dom-choose { opacity: .6; } .dom-whois-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; } .dom-whois { margin: 0; padding: 14px 18px; max-height: 60vh; overflow: auto; font-size: 12.5px; white-space: pre-wrap; } .dtld-ext { margin: 8px 0; } .dtld-ext summary { cursor: pointer; font-weight: 600; } .dtld-ext-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: 8px; } .dtld-ext-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; } /* 1.29.4: editor delle voci più compatto */ .widget-links-edit th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .widget-links-edit .move-btn { width: 22px; height: 24px; min-height: 0; padding: 0; font-size: 10px; line-height: 1; } .widget-links-edit td.small .muted { word-break: break-all; } .widget-links-edit th, .widget-links-edit td { padding-left: 6px; padding-right: 6px; } /* 1.30.0: carrello senza scorrimento orizzontale: la prima colonna va a capo, l'errore è un riquadro che va a capo */ .cart-table td:first-child { white-space: normal; overflow-wrap: anywhere; } .cart-table .cart-err { display: block; margin-top: 6px; padding: 5px 9px; border-radius: 6px; background: #fdecea; color: #a12a1f; font-size: 12.5px; line-height: 1.4; white-space: normal; } .cart-table .cart-err a { color: inherit; text-decoration: underline; white-space: nowrap; } /* 1.30.0: Aspetto → Menu dell'area clienti ad albero */ .menu-tree, .menu-tree .mt-children { list-style: none; margin: 0; padding: 0; } .menu-tree > li { border-bottom: 1px solid var(--line); } .menu-tree > li:last-child { border-bottom: 0; } .mt-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #f5f7fa; } .mt-head .mt-gname { font-weight: 600; font-size: 13.5px; } .mt-row { display: grid; grid-template-columns: 52px 28px minmax(140px, 220px) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 5px 14px; min-height: 40px; } .mt-row.is-mine { grid-template-columns: 52px 150px minmax(120px, 200px) minmax(0, 1fr) auto auto auto; background: rgba(37, 99, 235, .04); } .mt-row.is-off > :not(.mt-on):not(.mt-acts):not(.mt-move) { opacity: .45; } .mt-mainrow .mt-row { padding-left: 14px; } .mt-mainrow .mt-row::before { content: ""; } .mt-children > li .mt-row, .mt-group .mt-add { padding-left: 46px; } .mt-children > li { border-top: 1px dashed var(--line); } .mt-children > li .mt-row { background-image: linear-gradient(90deg, transparent 30px, var(--line) 30px, var(--line) 31px, transparent 31px); } .mt-children > li.is-new .mt-row { background-color: #fffbe6; } .mt-move { display: inline-flex; gap: 3px; } .mt-move .move-btn, .mt-head .move-btn { width: 23px; height: 24px; font-size: 10px; padding: 0; } .mt-ico { display: inline-flex; color: var(--muted); } .mt-ico .nav-ico { width: 18px; height: 18px; } .form .mt-label, .form .mt-href, .form .mt-icon { min-height: 30px; height: 30px; padding: 3px 8px; font-size: 13.5px; width: 100%; } .mt-href-ro { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; } .mt-on, .mt-blank { white-space: nowrap; font-size: 13px; } .mt-acts { display: inline-flex; gap: 2px; justify-content: flex-end; min-width: 90px; } .mt-add { padding: 6px 14px 10px; } .mt-add-top { border-top: 1px solid var(--line); } @media (max-width: 900px) { .mt-row, .mt-row.is-mine { grid-template-columns: 52px minmax(0, 1fr) auto; } .mt-row > .mt-ico, .mt-row > .mt-href-ro { display: none; } } .email-pending form.inline { display: inline-block; margin-right: 6px; } /* 1.31.0: Dove si vede (sezioni e pagine) */ .widget-pages-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; align-items: start; } .wp-sec { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); } .wp-sec.is-on { border-color: var(--primary); background: rgba(37, 99, 235, .04); } .wp-sec-head { margin-bottom: 4px; } .wp-pages { display: flex; flex-direction: column; gap: 2px; padding-left: 22px; } .wp-sec.is-on .wp-pages { opacity: .6; } /* 1.31.0: Servizi e Domini, le due schede come pulsanti grandi */ .seg-tabs { display: flex; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; } .seg-tab { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text, #1d2430); font-size: 16px; font-weight: 600; text-decoration: none; min-width: 200px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: border-color .15s, background .15s; } .seg-tab .nav-ico { width: 24px; height: 24px; color: var(--primary); } .seg-tab:hover { border-color: var(--primary); text-decoration: none; } .seg-tab .seg-num { margin-left: auto; min-width: 28px; padding: 2px 9px; border-radius: 999px; background: #eef2f7; color: #4a5462; font-size: 13px; text-align: center; } .seg-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .seg-tab.is-active .nav-ico { color: #fff; } .seg-tab.is-active .seg-num { background: rgba(255, 255, 255, .22); color: #fff; } @media (max-width: 560px) { .seg-tab { flex: 1 1 0; min-width: 0; padding: 10px 12px; font-size: 15px; } } /* 1.31.0: Rinnova, una riga per elemento su tre livelli (come WHMCS) */ .rn-list { list-style: none; margin: 0; padding: 0; } .rn-item { padding: 12px 18px; border-top: 1px solid var(--line); } .rn-item:first-child { border-top: 0; } .rn-item:nth-child(even) { background: #fafbfc; } .rn-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rn-name { font-size: 17px; font-weight: 600; color: #1d2430; overflow-wrap: anywhere; } .rn-prod { font-size: 13px; color: var(--muted); } .rn-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .rn-green { background: #e3f4ee; color: #0b6b53; } .rn-orange { background: #fff0db; color: #a35a00; } .rn-red { background: #fde8e6; color: #b42318; } .rn-blue { background: #e4eefc; color: #1f5fbf; cursor: help; } .rn-due { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .rn-child { font-size: 13px; margin-top: 2px; } .rn-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .rn-period { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0; } .rn-period select { min-height: 32px; height: 32px; font-size: 13px; padding: 3px 8px; max-width: 260px; } .rn-btn { margin-left: auto; } .rn-item.is-off .rn-name { color: #6b7686; } @media (max-width: 560px) { .rn-btn { margin-left: 0; } } .rn-grey { background: #eef1f5; color: #5b6573; cursor: help; } .tile .tile-alert { align-self: flex-start; } /* 1.33.0: griglia della Home (posizione area.home_grid) e sezioni come quelle di WHMCS */ .home-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; } .hg-cell { min-width: 0; } .hg-12 { grid-column: span 12; } .hg-8 { grid-column: span 8; } .hg-6 { grid-column: span 6; } .hg-4 { grid-column: span 4; } .hg-cell > .panel, .hg-cell > .card, .hg-cell > .adbanner { margin: 0; } @media (max-width: 1000px) { .hg-8, .hg-6, .hg-4 { grid-column: span 12; } } .hsec { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--hsec, #1f5fbf); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; } .hsec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hsec-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 600; } .hsec-ico { color: var(--hsec, #1f5fbf); display: inline-flex; } .hsec-ico .nav-ico { width: 20px; height: 20px; } .hsec-btn { display: inline-block; padding: 5px 12px; border-radius: 6px; background: var(--hsec, #1f5fbf); color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none !important; white-space: nowrap; } .hsec-btn:hover { filter: brightness(.92); } .hsec-desc { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); } .hsec-body { margin-top: 10px; } .hsec-table { width: 100%; border-collapse: collapse; font-size: 14px; } .hsec-table td { padding: 8px 6px; border-top: 1px solid var(--line); vertical-align: middle; } .hsec-table tr:first-child td { border-top: 0; } .hsec-table td.hsec-st { width: 1%; white-space: nowrap; } .hsec-sub { display: block; font-size: 12.5px; color: var(--muted); } .hsec-sub.is-late { color: #b42318; } .hsec-more { display: inline-block; margin-top: 8px; font-size: 13px; } .hsec-form { display: flex; gap: 8px; flex-wrap: wrap; } .hsec-form input { flex: 1 1 200px; min-height: 36px; } .hsec-form-btns { display: inline-flex; gap: 6px; } .hsec-links { margin: 12px 0 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; } .hsec-colors { display: flex; flex-wrap: wrap; gap: 6px 16px; } .color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; } /* 1.33.1: nella stessa riga della griglia gli elementi hanno la stessa altezza (niente buchi sotto) */ .home-grid { align-items: stretch; } .hg-cell { display: flex; flex-direction: column; } .hg-cell > .hsec, .hg-cell > .panel, .hg-cell > .card { flex: 1 1 auto; } .hsec { display: flex; flex-direction: column; } .hsec-body { flex: 1 1 auto; display: flex; flex-direction: column; } .hsec-body .hsec-more { margin-top: auto; padding-top: 8px; align-self: flex-start; } .hg-cell > .adbanner { flex: 1 1 auto; justify-content: center; } /* 1.34.0: Rinnova, hosting + dominio insieme */ .rn-pair { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #e4eefc; color: #1f5fbf; font-size: 12px; font-weight: 600; } .rn-pair-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .rn-item.is-pair { border-left: 3px solid #1f5fbf; } .rn-split { font-size: 12px; color: var(--muted); white-space: nowrap; } .rn-period > span:first-child { white-space: nowrap; } /* 1.35.0: Rinnova, "Rinnovo non disponibile" a destra e riga con la (i) */ .rn-tag-right { margin-left: auto; } .rn-info { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: #4a5462; } .rn-info .nav-ico { width: 15px; height: 15px; color: var(--primary); flex: none; } .rn-item.is-off .rn-name { color: #4a5462; } /* 1.35.1: nome cliccabile in Rinnova; Annulla la disdetta nell'avviso */ a.rn-name { color: #1d2430; text-decoration: none; } a.rn-name:hover { color: var(--primary); text-decoration: underline; } .rn-item.is-off a.rn-name { color: #4a5462; } .cancel-undo { display: inline; } .cancel-undo .btn { margin-left: 4px; } /* 1.35.2: riquadro della disdetta (icona, titolo, testo, pulsante a destra) */ .cancel-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; border-radius: var(--radius); background: #fdf1ef; border: 1px solid #f3cdc7; border-left: 4px solid #d93025; } .cb-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fbdcd7; color: #b42318; display: grid; place-items: center; } .cb-ico svg { width: 18px; height: 18px; } .cb-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cb-text strong { color: #8a241a; font-size: 15px; font-weight: 600; } .cb-text span { color: #6b2a22; font-size: 13.5px; } .cb-act { flex: none; margin: 0; } .cb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: #fff; border: 1px solid #d93025; color: #b42318; font-weight: 600; font-size: 14px; white-space: nowrap; } .cb-btn svg { width: 16px; height: 16px; } .cb-btn:hover { background: #d93025; color: #fff; text-decoration: none; } .cb-btn-soft { border-color: #e3a49b; } @media (max-width: 640px) { .cancel-banner { flex-wrap: wrap; } .cb-act { width: 100%; padding-left: 48px; } } /* 1.36.0 — Collegamento QuadraGest */ .qg-months { table-layout: fixed; width: 100%; } .qg-months th, .qg-months td { padding: 6px 4px; font-size: 12px; } .qg-list td { white-space: nowrap; } .qg-list th, .qg-list td { padding: 6px 8px; font-size: 13px; } .qg-list td.qg-cut { max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .qg-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .qg-inline form.inline { display: inline; margin: 0; } input.qg-in { width: 270px; max-width: 100%; font-family: ui-monospace, monospace; font-size: 12px; } tr.qg-late td:first-child { color: #b42318; } /* 1.38.0 — Assistenza Continuativa */ .pill-plan { background: #ede7fb; color: #5b3cc4; } .pill-bucket-monthly { background: #ede7fb; color: #5b3cc4; } .pill-bucket-credit { background: #e6f0fb; color: #1f5fbf; } .pill-bucket-extra { background: #fdecea; color: #b42318; } .plan-months { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding-top: 0; } .plan-month { font-size: 13px; color: var(--muted); } .plan-box { border-left: 3px solid #5b3cc4; padding-left: 8px; margin-bottom: 8px; } .plan-card .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .credit-box .credit-num { white-space: nowrap; } /* 1.39.0 — Registro mail */ .mail-log td:nth-child(2) { max-width: 220px; overflow-wrap: anywhere; } .mail-log details.mail-view summary { cursor: pointer; } /* 1.41.0 — Archivia (prefattura scaduta, il cliente non rinnova) */ .archive-steps { margin: 0; padding: 8px 12px 8px 30px; line-height: 1.6; } .archive-choices { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; } .archive-choices label.check { font-size: 13.5px; } .archive-choices .archive-danger span { color: var(--danger); } .archive-choices .archive-confirm { margin-left: 30px; } /* 1.47.5: la conferma sta sotto la scelta */ .archive-choices .archive-confirm:has(input:disabled) { opacity: .5; } .btn-archive, .btn-archive:hover { background: var(--danger); border-color: var(--danger); color: #fff; } a.btn.btn-archive-xs, .table a.btn.btn-archive-xs, summary.btn.btn-archive-xs { color: var(--danger); border: 1px solid var(--danger); background: #fff; } a.btn.btn-archive-xs:hover, .table a.btn.btn-archive-xs:hover { background: var(--danger); color: #fff; } .btn-archive-xs.is-disabled { pointer-events: auto; cursor: help; } /* grigio ma con il motivo al passaggio */ .dash-archive { margin-top: 3px; } /* 1.41.1 — Dashboard, Prefatture scadute: riga Azioni sotto ogni prefattura (Pagata, Rinvia con la data, Archivia) */ .dash-pf-table tbody.dash-pf:nth-of-type(even) td { background: #f5f6f8; } .dash-pf-table tr.dash-pf-act td { padding-top: 0; } .dash-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .dash-acts-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 2px; } .dash-acts form.inline { display: inline-flex; align-items: center; gap: 3px; margin: 0; } .dash-acts .dash-days { width: auto; height: 24px; min-height: 0; padding: 0 2px; font-size: 12px; } .dash-acts .btn-archive-xs { margin-left: auto; } /* 1.42.0 — Scadenze e rinnovi: righe del cliente chiuse che si aprono con un clic */ .renew-fold tbody[data-fold] tr.renew-row { display: none; } .renew-fold tbody[data-fold].is-open tr.renew-row { display: table-row; } .renew-fold tr[data-fold-head] { cursor: pointer; } .renew-fold tr[data-fold-head]:hover td { background: #e3e9f3; } .renew-fold tr[data-fold-head]:focus-visible { outline: 2px solid var(--primary, #1f5fbf); outline-offset: -2px; } .fold-caret { display: inline-block; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .12s; } .renew-fold tbody.is-open .fold-caret { transform: rotate(90deg); } .renew-fold tbody.is-target tr.renew-head td { background: #fff4cf; } .renew-client-link { font-weight: 400; font-size: 12px; margin-left: 4px; } .renew-table .renew-cancelled { color: var(--muted); text-decoration: line-through; } @media print { .renew-fold tbody[data-fold] tr.renew-row { display: table-row; } .fold-caret { display: none; } } .mq-resolve summary.btn-archive-xs { display: inline-block; margin-bottom: 4px; } /* 1.43.0 — Da gestire */ .dg-card + .dg-card { margin-top: 14px; } .dg-table .dash-acts { flex-wrap: wrap; } .dg-table td { vertical-align: top; } .renew-card .sheet-head { flex-wrap: wrap; } .renew-card .renew-pf-btn { margin-left: auto; white-space: nowrap; align-self: center; } /* 1.44.0: editor del testo delle mail */ .rte-field { display: flex; flex-direction: column; gap: 4px; } .rte { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .rte-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 5px 6px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 2; } .rte-bar .btn { min-height: 26px; padding: 2px 8px; font-weight: 400; } .rte-bar .btn b, .rte-bar .btn strong { font-weight: 600; } .rte-bar .btn.is-on { background: var(--primary); color: #fff; border-color: var(--primary); } .rte-bar .btn:disabled { opacity: .45; } .rte-bar [data-cmd=code] { margin-left: auto; } .rte-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; } .rte-ed { min-height: 300px; max-height: 70vh; overflow: auto; padding: 10px 12px; font: 15px/1.55 var(--font); outline: none; } .rte-ed:focus { box-shadow: inset 0 0 0 2px var(--primary-l); } .rte-ed p { margin: 0 0 12px; } .rte-ed ul, .rte-ed ol { margin: 0 0 12px; padding-left: 22px; } .rte-ed h3 { font-size: 16px; font-weight: 600; margin: 14px 0 8px; } .rte-ed b, .rte-ed strong { font-weight: 600; } .rte textarea.rte-code { width: 100%; min-height: 300px; border: 0; border-radius: 0; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; padding: 10px 12px; resize: vertical; } .var-list code[data-rte-insert] { cursor: pointer; } .dtld-table .dtld-days { width: 52px; } .dtld-table th.dtld-late, .dtld-table td.dtld-late { border-left: 2px solid var(--line); } .dtld-table tr.dtld-group th { padding-bottom: 0; text-align: center; font-weight: 600; } /* 1.44.0: scheda del dominio, tasti raggruppati e popup */ .btn-group-acts { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); } .btn.btn-danger-tx { color: var(--danger); } button.btn.btn-archive-xs { color: var(--danger); border: 1px solid var(--danger); background: #fff; } button.btn.btn-archive-xs:hover:not(:disabled) { background: var(--danger); color: #fff; } .act-off { display: inline-flex; cursor: help; } .act-off .btn:disabled { pointer-events: none; opacity: .5; } dialog.modal.modal-wide { width: min(720px, calc(100vw - 32px)); } dialog.modal .card-body p { margin: 0 0 8px; } .dom-mail-prev { padding: 6px 8px; background: var(--bg); border-radius: var(--radius-sm); } /* 1.45.1 — Dashboard da cellulare "più vicina a un'app" (Roberto 24/10): sezioni chiuse che si aprono con un tocco, niente riquadri con lo scorrimento interno (bloccavano lo scorrimento della pagina), righe in colonna: il nome su tutta la riga, i dati sotto. */ .dash-toggle { display: none; } @media (max-width: 700px) { .dash-lead { font-size: 13.5px; margin-bottom: 10px; } .todo-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; } .todo-card { grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 10px 12px; column-gap: 6px; border-left-width: 3px; } .todo-ico { display: none; } .todo-title { font-size: 13px; line-height: 1.25; grid-column: 1; grid-row: 1 / 3; align-self: center; } .todo-n { grid-column: 2; grid-row: 1 / 3; font-size: 24px; } .todo-note { display: none; } .dash-halves, .dash-main { gap: 10px; margin-bottom: 10px; display: flex; flex-direction: column; align-items: stretch; } .dash-side { gap: 10px; } .dash-sec { margin: 0; height: auto; } .dash-sec > .card-head { position: relative; padding-right: 48px; cursor: pointer; flex-wrap: wrap; row-gap: 6px; -webkit-tap-highlight-color: transparent; } .dash-sec > .card-head h2 { font-size: 15px; } .dash-toggle { display: grid; place-items: center; position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); border-radius: var(--radius); } .dash-toggle svg { width: 20px; height: 20px; transition: transform .15s; } .dash-sec.is-open .dash-toggle svg { transform: rotate(180deg); } .dash-sec:not(.is-open) > :not(.card-head) { display: none !important; } .dash-sec:not(.is-open) > .card-head { border-bottom: 0; } .dash-fixed, .dash-scroll { height: auto; overflow: visible; } .feed-5 { max-height: none; overflow: visible; } .dash-kpis { gap: 8px; font-size: 12.5px; width: 100%; } .renew-card .renew-pf-btn { margin-left: 0; } .renew-card > .sheet-head { background: var(--surface); } .renew-card > .sheet-head h2 { text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; } /* righe in colonna: prima cella su tutta la riga, le altre sotto con la loro etichetta */ .renew-short, .dash-pf-table { display: block; } .renew-short colgroup, .renew-short thead, .dash-pf-table thead { display: none; } .renew-short tbody, .dash-pf-table tbody { display: block; } .renew-short tr, .dash-pf-table tbody.dash-pf tr:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 9px 14px; border-bottom: 1px solid #eef0f3; } .renew-short tr:nth-child(even) { background: #f5f6f8; } .renew-short td, .dash-pf-table tbody.dash-pf tr:first-child td { display: block; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important; font-size: 13.5px; } .renew-short td:first-child, .dash-pf-table tbody.dash-pf tr:first-child td:first-child { flex: 0 0 100%; font-size: 14.5px; } .renew-short td.hide-sm { display: block !important; } .renew-short td[data-label]::before, .dash-pf-table td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-size: 12px; } .dash-pf-table tbody.dash-pf { border-bottom: 1px solid #e3e6ea; } .dash-pf-table tbody.dash-pf:nth-of-type(even) { background: #f5f6f8; } .dash-pf-table tbody.dash-pf td { background: none !important; } .dash-pf-table tbody.dash-pf tr:first-child td:first-child br { display: none; } .dash-pf-table tbody.dash-pf tr:first-child td:first-child .small { font-size: 14px; margin-left: 6px; } .dash-pf-table tbody.dash-pf tr:first-child { border-bottom: 0; padding-bottom: 4px; } .dash-pf-table tr.dash-pf-act { display: block; padding: 0 14px 10px; } .dash-pf-table tr.dash-pf-act td { display: block; padding: 0 !important; border: 0 !important; } .dash-acts { flex-wrap: wrap; gap: 6px; } .dash-acts .btn { min-height: 34px; } .status-card .checks li { padding: 8px 14px; } } /* 1.46.0: in cima al Riepilogo del cliente "Da pagare" (Pagata) e "Accessi e parametri"; avviso con Pagata sul servizio sospeso */ .cq-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-bottom: 12px; align-items: start; } .cq-wrap > .card { margin: 0; } .cq-list { list-style: none; margin: 0; padding: 0; } .cq-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #eef0f3; } .cq-list li:nth-child(even) { background: #f5f6f8; } .cq-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cq-acc + .cq-acc { border-top: 2px solid var(--line); } .cq-acc-head { padding: 9px 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; cursor: pointer; list-style: none; } .cq-acc-head::-webkit-details-marker { display: none; } .cq-acc-head::after { content: '▾'; margin-left: auto; color: var(--muted); } .cq-acc[open] > .cq-acc-head::after { content: '▴'; } .cq-acc[open] > .cq-acc-head { padding-bottom: 4px; } .cq-open { margin-left: 4px; } .cq-acc .kv-table th { width: 92px; } .cq-acc .pw-reveal input { max-width: 180px; } .svc-pay-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } @media (max-width: 700px) { .cq-wrap { grid-template-columns: minmax(0,1fr); gap: 10px; } .cq-list li .btn { min-height: 38px; padding: 6px 16px; } .cq-acc .kv-table code { overflow-wrap: anywhere; } } .pw-missing code { white-space: nowrap; } /* 1.46.2: Riepilogo del cliente, tabelle servizi e domini con le ultime colonne alla stessa larghezza (scadenze in colonna) */ @media (min-width: 861px) { .tbl-align { table-layout: fixed; width: 100%; } .tbl-align col.c-id { width: 70px; } .tbl-align col.c-mid { width: 230px; } .tbl-align col.c-mid2 { width: 115px; } .tbl-align col.c-reg { width: 132px; } .tbl-align col.c-due { width: 132px; } .tbl-align col.c-amt { width: 122px; } .tbl-align col.c-st { width: 130px; } .tbl-align th, .tbl-align td { padding-left: 18px; padding-right: 18px; } /* 1.47.0: più aria tra le colonne (Roberto 24/10) */ .tbl-align td { overflow: hidden; text-overflow: ellipsis; } } /* 1.47.0: Domini sul registrar (admin/registrar.php) e widget della dashboard */ .rs-kpis { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; font-size: 13px; color: var(--muted); } .rs-kpis .kpi b { color: var(--text); font-weight: 600; } .rs-card { margin-bottom: 12px; } .rs-tools { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; } .rs-tools .rs-card { margin: 0; } .form.rs-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 10px 14px; } .rs-form .rs-f { display: flex; flex-direction: column; gap: 4px; } .rs-form .rs-f input[type=text] { width: 140px; } .rs-form .rs-file input { max-width: 320px; } .rs-form label.check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 8px; } .rs-form label.check input { margin-top: 0; } .rs-card.is-soon .card-body { opacity: .75; } .rs-card .form-actions { display: flex; gap: 8px; padding: 10px 14px; } @media (max-width: 860px) { .rs-tools { grid-template-columns: minmax(0, 1fr); } } .rs-widget ul { list-style: none; margin: 0; padding: 0; } .rs-widget li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: 13px; } .rs-widget li:last-child { border-bottom: 0; } .rs-widget li .n { font-weight: 600; min-width: 24px; text-align: right; } .rs-widget li.is-bad .n { color: var(--danger, #c0392b); } .rs-widget .rs-names { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; } .rs-widget li.is-zero { color: var(--muted); } /* 1.50.0: ricerca veloce dei clienti in cima alla dashboard */ .dash-search { display: flex; gap: 8px; margin: 0 0 12px; max-width: 640px; } .dash-search input[type=search] { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; } @media (max-width: 700px) { .dash-search { max-width: none; } .dash-search input[type=search] { font-size: 16px; } } /* 1.51.0: permessi scelti già alla creazione / associazione dell'utente, compatti su tre colonne */ .perm-box-new .perm-list { display: block; column-count: 3; column-gap: 24px; } .perm-box-new .perm-list label.check { display: flex; margin-bottom: 6px; } .perm-box-new .perm-list .perm-title { column-span: all; display: block; margin-bottom: 6px; } .perm-box-new .perm-list .perm-group { display: block; break-after: avoid; margin-top: 4px; } .perm-box-new .perm-list label.check { break-inside: avoid; } @media (max-width: 860px) { .perm-box-new .perm-list { column-count: 1; } } /* 1.51.2: elenco Utenti con spunte e colonne ordinabili; nome ed email su una riga */ .users-list th.chk, .users-list td.chk { width: 28px; padding-right: 0; } .users-list td { overflow-wrap: normal; white-space: nowrap; } .users-list th, .users-list td { padding-left: 8px; padding-right: 8px; } @media (max-width: 860px) { .users-list td { white-space: normal; overflow-wrap: anywhere; } } /* 1.51.4: dashboard riordinata — Accessi + Attività sotto i rinnovi, Stato del sistema accanto agli Avvisi */ .dash-after { margin-top: 18px; } .dash-fixed .feed, .dash-fixed .checks { flex: 1 1 auto; overflow: auto; min-height: 0; margin: 0; } .dash-fixed .card-foot { flex: 0 0 auto; margin-top: auto; } /* 1.51.4: lo stato della prefattura nell'area clienti si clicca (porta alla prefattura, come il numero) */ a.pill-link { text-decoration: none; cursor: pointer; } a.pill-link:hover { filter: brightness(.95); text-decoration: underline; } /* 1.51.4: Riepilogo del cliente — Prodotti e servizi con prezzo e totale (quanto paga oggi) */ .cost-table thead th { font-size: 11px; padding-top: 4px; padding-bottom: 4px; } .cost-table tr.cost-total th, .cost-table tr.cost-total td { border-top: 1px solid var(--line); } /* 1.52.0: fasce "Mail ferme" e "Manutenzione accesa" */ .testbar.stopbar { background: #b42318; color: #fff; } .testbar.maintbar { background: #1f5fbf; color: #fff; } .testbar.stopbar a, .testbar.maintbar a { color: #fff; text-decoration: underline; } /* 1.52.0: carrello — codice promozionale, consigliati, nota, Termini di servizio */ .cart-promo .inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .cart-promo .inline-form label { display: flex; flex-direction: column; gap: 4px; } .cart-rec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 12px 16px 16px; } .cart-rec-item { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; text-decoration: none; color: inherit; } .cart-rec-item:hover { border-color: var(--primary); } .cart-checkout-card .card-body { display: flex; flex-direction: column; gap: 10px; } .cart-note { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .cart-note textarea { width: 100%; font: 14px/1.45 var(--font); padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: inherit; } .cart-note textarea:focus { outline: 2px solid rgba(31,95,191,.25); border-color: var(--primary); } .cart-tos-text { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; display: none; } .cart-tos-text.is-open, .cart-tos-text:target { display: block; } .cart-checkout-card .cart-checkout { padding: 0 16px 16px; display: flex; justify-content: flex-end; gap: 10px; } /* 1.52.0 — Ticket: articoli della guida suggeriti mentre scrivi l'oggetto */ .tk-suggest { background: var(--primary-l); border: 1px solid #c4d6f2; border-radius: 6px; padding: 8px 12px; font-size: 13px; } .tk-suggest ul { margin: 4px 0 0; padding-left: 18px; } .tk-suggest li { margin: 2px 0; } /* 1.52.2 — dashboard: stato dei rinnovi cliccabile (Scadenze e rinnovi), Pagata con il metodo */ .renew-state-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; } .renew-state-link:hover { color: var(--primary); } .dash-paid { display: inline-flex; gap: 4px; align-items: center; } /* 1.52.2 — Riepilogo del cliente: "Da pagare" a tutta larghezza, sfondo d'avviso (sparisce quando è pagato) */ .cq-wrap { grid-template-columns: minmax(0, 1fr); } .cq-due { background: #fff8e6; border-color: #f0d9a8; } .cq-due .sheet-head { background: #fdf0d2; } .cq-due .cq-list li { border-bottom-color: #f3e4c2; } .cq-due .cq-list li:nth-child(even) { background: #fdf3dc; } .cq-due select { min-height: 30px; font: inherit; font-size: 13px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; } /* 1.53.0 — Rimborsa: di chi è l'errore */ .refund-fault { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px 8px; margin: 8px 0 0; } .refund-fault legend { padding: 0 4px; font-weight: 600; font-size: 13px; } .refund-fault .check { display: flex; margin: 4px 0; } /* 1.53.4: opzioni che si tolgono nel cambio di prodotto */ .upg-dropped { color: #a12a1c; } /* 1.53.7: prezzo riservato */ .promo-pill { margin-left: 6px; font-size: 11px; }