/* ============================================================ TEMI: scuro / chiaro / bilanciato (chiaro nel contenuto, scuro nella sidebar) Selezionabili dal menu utente (vedi #user-menu-dropdown), applicati via [data-theme] su . Il tema "chiaro" è anche il default (:root) per chi ha JS disabilitato. ============================================================ */ :root, [data-theme="light"] { --primary: #5b4fc4; --primary-hover: #493fa3; --on-primary: #ffffff; --primary-focus: rgba(91, 79, 196, 0.16); --bg-dark: #f4f6fb; --bg-card: #ffffff; --bg-darker: #eef1f8; --surface-muted: #ffffff; --hover-tint: #e3f6fa; --text-main: #1e2433; --text-muted: #6b7488; --accent: #5b4fc4; --danger: #e5534b; --success: #1fa97a; --warning: #f0a202; --border: #dfe3ee; /* Pulsanti "doppio tono": sfondo lilla tenue + testo viola scuro della stessa famiglia, invece di un riempimento pieno e saturo. Stesso principio dei chip di stato qui sotto, applicato all'azione primaria: resta ben visibile senza risultare cupo. */ --btn-primary-bg: #ece7fb; --btn-primary-bg-hover: #ddd5f7; --btn-primary-text: #4a3a94; /* Chip tenui (sfondo pastello + testo scuro della stessa famiglia) per stati corretto/errato/in sospeso: badge di stato e celle della griglia di monitoraggio. Sostituiscono i vecchi riempimenti pieni e saturi con testo bianco. */ --cell-correct-bg: #e3f5e8; --cell-correct-text: #1f7a44; --cell-wrong-bg: #fbe7e6; --cell-wrong-text: #b23b34; --cell-pending-bg: #fdf1d8; --cell-pending-text: #8a5b12; --cell-empty-bg: #f4f5f8; --sidebar-bg: #ffffff; --sidebar-text: #1e2433; --sidebar-text-muted: #6b7488; --sidebar-border: #dfe3ee; --sidebar-hover-bg: rgba(34, 211, 238, 0.1); --sidebar-hover-text: #0e8a9c; --sidebar-shadow: 1px 0 3px rgba(30, 36, 51, 0.04); } [data-theme="dark"] { --primary: #5b5ef4; --primary-hover: #4749d8; --on-primary: #ffffff; --primary-focus: rgba(91, 94, 244, 0.25); --bg-dark: #12121f; --bg-card: #1c1c30; --bg-darker: #0d0d18; --surface-muted: #1c1c30; --hover-tint: rgba(34, 211, 238, 0.08); --text-main: #f8fafc; --text-muted: #9a9ab8; --accent: #5b5ef4; --danger: #f4574f; --success: #2dd4a7; --warning: #ffc857; --border: #33334d; --btn-primary-bg: rgba(91, 94, 244, 0.18); --btn-primary-bg-hover: rgba(91, 94, 244, 0.28); --btn-primary-text: #b8baff; --cell-correct-bg: rgba(45, 212, 167, 0.16); --cell-correct-text: #6ee7b7; --cell-wrong-bg: rgba(244, 87, 79, 0.18); --cell-wrong-text: #fca5a5; --cell-pending-bg: rgba(255, 200, 87, 0.18); --cell-pending-text: #ffd76e; --cell-empty-bg: #232338; --sidebar-bg: linear-gradient(180deg, #22224a 0%, #1c1c30 100%); --sidebar-text: #f8fafc; --sidebar-text-muted: #9a9ab8; --sidebar-border: #33334d; --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-hover-text: #ffffff; --sidebar-shadow: none; } [data-theme="balanced"] { /* Contenuto: chiaro, ma grigi leggermente più marcati del tema chiaro puro */ --primary: #5b4fc4; --primary-hover: #493fa3; --on-primary: #ffffff; --primary-focus: rgba(91, 79, 196, 0.16); --bg-dark: #e9ecf3; --bg-card: #f6f7fb; --bg-darker: #e2e5ee; --surface-muted: #f6f7fb; --hover-tint: #e1f4f8; --text-main: #1e2433; --text-muted: #626b80; --accent: #5b4fc4; --danger: #e5534b; --success: #1fa97a; --warning: #f0a202; --border: #d3d7e3; --btn-primary-bg: #ece7fb; --btn-primary-bg-hover: #ddd5f7; --btn-primary-text: #4a3a94; --cell-correct-bg: #e3f5e8; --cell-correct-text: #1f7a44; --cell-wrong-bg: #fbe7e6; --cell-wrong-text: #b23b34; --cell-pending-bg: #fdf1d8; --cell-pending-text: #8a5b12; --cell-empty-bg: #eceef4; /* Sidebar: più chiara del tema scuro puro, ma satura e "viola", non grigia */ --sidebar-bg: linear-gradient(180deg, #5b4fc4 0%, #423a8f 100%); --sidebar-text: #f8fafc; --sidebar-text-muted: #c9c3f0; --sidebar-border: #6355c9; --sidebar-hover-bg: rgba(255, 255, 255, 0.12); --sidebar-hover-text: #ffffff; --sidebar-shadow: none; } :root { --sidebar-width: 260px; --radius: 14px; --control-height: 42px; --bar-padding-y: 1rem; --bar-padding-x: 1.25rem; /* Colori "risultato" (corretto/parziale/errato) usati nelle schede di visualizzazione dei risultati (matrice dettagliata, revisione domanda, report stampabile). Toni volutamente più tenui delle variabili --success/--danger/--warning "di sistema", per non affaticare l'occhio su griglie con molte celle colorate. Fissi (non cambiano con il tema). */ --result-success: #49af5b; --result-success-subtle-border: #5dbe6e; --result-success-subtle-bg: rgba(73, 175, 91, 0.08); --result-warning: #ffd374; --result-warning-text: #7a5b12; --result-danger: #eb5f5e; --result-danger-subtle-bg: rgba(235, 95, 94, 0.08); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: 'Poppins', Arial, Helvetica, "Liberation Sans", sans-serif; background-color: var(--bg-dark); color: var(--text-main); min-height: 100vh; } /* Sidebar: sempre raggiungibile, fissa a sinistra su desktop */ .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; padding: 1.75rem 1rem; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 500; box-shadow: var(--sidebar-shadow); } .logo-wrap { display: flex; justify-content: center; margin-bottom: 2rem; } .logo-img { display: none; width: 130px; height: auto; } /* Sidebar (sfondo scuro/bilanciato): mostra logo-dark (testo bianco/cyan) */ .logo-img.logo-for-dark-bg { display: block; } .logo-img.logo-for-light-bg { display: none; } /* Tema chiaro: sidebar chiara → mostra logo-light (testo scuro/viola) */ [data-theme="light"] .sidebar .logo-img.logo-for-dark-bg { display: none; } [data-theme="light"] .sidebar .logo-img.logo-for-light-bg { display: block; } /* Login/pagina a sfondo chiaro: mostra logo-light di default */ .login-logo-wrap .logo-img.logo-for-dark-bg { display: none; } .login-logo-wrap .logo-img.logo-for-light-bg { display: block; } /* Solo nel tema dark la login card è scura */ [data-theme="dark"] .login-logo-wrap .logo-img.logo-for-dark-bg { display: block; } [data-theme="dark"] .login-logo-wrap .logo-img.logo-for-light-bg { display: none; } nav { display: flex; flex-direction: column; gap: 0.4rem; } .nav-icon { display: inline-block; width: 1.4em; text-align: center; margin-right: 0.3rem; } .nav-section-label { color: var(--sidebar-text-muted); opacity: 0.6; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 1rem 1rem 0.2rem; } .tab-btn { background: transparent; border: none; color: var(--sidebar-text-muted); padding: 0.7rem 1rem; text-align: left; font-size: var(--text-md); cursor: pointer; border-radius: 10px; transition: all 0.2s; white-space: nowrap; justify-content: flex-start; height: auto; } .tab-btn:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-hover-text); } .tab-btn.active { background: var(--primary); color: var(--on-primary, white); box-shadow: 0 4px 12px var(--primary-focus, rgba(59, 111, 224, 0.35)); } /* Nel tema chiaro la sidebar è bianca: forziamo il testo nav a --sidebar-text (scuro) perché --sidebar-text-muted (#6b7488) scompare troppo sul bianco. Nei temi scuro e bilanciato la sidebar ha sfondo scuro/viola: --sidebar-text è già chiaro. */ [data-theme="light"] .sidebar .tab-btn { color: var(--sidebar-text); opacity: 0.72; } [data-theme="light"] .sidebar .tab-btn:hover { opacity: 1; color: var(--sidebar-hover-text); } /* Lo stato "voce attiva" della barra è definito in theme.css: dipende dal tema E dall'accento, e tenerlo in due file portava a regole in conflitto (con specificità diverse) che davano testo bianco su sfondo chiaro. */ .content { margin-left: var(--sidebar-width); min-height: 100vh; overflow-y: auto; /* Lo spazio della barra di scorrimento è SEMPRE riservato, anche quando la pagina è corta e la barra non serve. Senza questa riga il contenuto centrato (le pagine dell'area account sono un blocco a larghezza fissa con margin auto) si sposta di ~10px fra una pagina lunga (barra presente) e una corta come Impostazioni Avanzate (barra assente): passando fra le schede il blocco «saltava» a sinistra o a destra. */ scrollbar-gutter: stable; padding: 2rem; } .tab-content { display: none; } .tab-content.active { display: block; } /* Sotto-schede dentro un'unica scheda della sidebar (es. Classi/Studenti dentro "Le mie classi") */ .subtab-nav { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .subtab-btn { background: transparent; color: var(--text-muted); border: none; border-radius: 0; padding: 0.75rem 1.1rem; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; } .subtab-btn:hover { background: var(--bg-darker); color: var(--text-main); } .subtab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } /* Il fadeIn viene applicato solo al primo render tramite classe .tab-entering, rimossa subito dopo — così non si ritriggera ad ogni aggiornamento DOM */ .tab-entering { animation: fadeIn 0.25s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Responsive: sotto una certa larghezza la sidebar diventa una barra orizzontale sempre visibile in alto */ @media (max-width: 900px) { .sidebar { position: sticky; top: 0; left: 0; width: 100%; height: auto; flex-direction: row; align-items: center; padding: 0.75rem 1rem; overflow-x: auto; overflow-y: visible; gap: 1rem; } .logo-wrap { margin-bottom: 0; white-space: nowrap; } nav { flex-direction: row; } .user-menu-wrap { margin-top: 0; margin-left: auto; padding-top: 0; border-top: none; border-left: 1px solid var(--sidebar-border); padding-left: 1rem; } .content { margin-left: 0; padding: 1.25rem; } body { display: block; } } h1 { font-size: 2rem; margin-bottom: 1.5rem; } /* Dashboard Stats */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .stat-card { background: var(--bg-card); padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--border); border-left: 4px solid var(--accent); text-align: left; box-shadow: 0 2px 10px rgba(30, 36, 51, 0.05); } /* Le 3 card mostrano semplici conteggi (studenti/prove/domande): niente più un colore diverso a caso per ciascuna (arcobaleno senza significato semantico) — condividono lo stesso accento definito sopra in .stat-card. */ .stat-card h3 { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } .stat-card p { font-size: 2.2rem; font-weight: 700; color: var(--text-main); } /* Action Bars */ .action-bar { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; align-items: center; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--bar-padding-y) var(--bar-padding-x); } .action-bar > *:not(:first-child) { padding-left: 1.25rem; border-left: 1px solid var(--border); } /* Sezione "Opzioni avanzate" nel menu di avvio prova: collassata di default, si espande al clic sul titolo. Riusa lo stesso
nativo già usato per l'accordion di configurazione nel builder, quindi lo stile vale per entrambi. */ .launch-advanced-details { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .launch-advanced-details summary, .config-accordion summary { cursor: pointer; font-weight: 600; color: var(--primary); list-style: none; display: flex; align-items: center; gap: 0.4rem; user-select: none; } .launch-advanced-details summary::-webkit-details-marker, .config-accordion summary::-webkit-details-marker { display: none; } .launch-advanced-details summary::before, .config-accordion summary::before { font-family: "tabler-icons" !important; content: '\ea61'; display: inline-block; font-size: 0.9em; transition: transform 0.15s ease; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; } .launch-advanced-details[open] summary::before, .config-accordion[open] summary::before { transform: rotate(90deg); } .launch-advanced-details .settings-row:first-of-type { margin-top: 0.75rem; } .import-group, .filter-group, .bulk-actions { display: flex; align-items: center; gap: 0.5rem; } /* Barra azioni multiple del pool: posizionata accanto al titolo della sezione, allineata a destra. Essendo fuori dal flusso normale (position:absolute), comparire o sparire non sposta mai la tabella sottostante. */ .pool-section-header { /* Titolo a sinistra, barra delle azioni a destra: una riga sola, tutto centrato sulla stessa mezzeria — prima la barra era «appoggiata» in alto con position absolute e il titolo galleggiava più in basso. */ display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; margin-bottom: 1.25rem; } .bulk-actions--floating { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; max-width: 75%; } #filter-search { min-width: 200px; } #filter-class { max-width: 160px; } .hint-text { color: var(--text-muted); font-size: var(--text-sm); margin: -0.5rem 0 1.25rem 0; line-height: 1.4; } .settings-group { background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1rem 0.25rem; margin: 1rem 0; } .settings-group h3 { margin: 0 0 0.75rem 0; font-size: var(--text-md); color: var(--accent); } input, select, textarea, .rich-editor{ background: var(--surface-muted); border: 1px solid var(--border); color: var(--text-main); padding: 0.55rem 0.7rem; border-radius: 8px; font-size: var(--text-md); font-family: inherit; } /* Altezza uniforme per tutti i controlli "a riga singola" (pulsanti, testo, select, file): così le barre azioni risultano allineate ovunque, invece di variare in base al tipo di elemento. */ button, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="file"], select, .rich-editor{ height: var(--control-height); box-sizing: border-box; } /* Checkbox tondi al posto dei classici quadrati nativi del browser: stesso input, solo ridisegnato (niente elementi extra nel DOM, funziona come un checkbox normale). Esclude .custom-toggle, che è un widget diverso (l'interruttore a pillola) che riusa lo stesso elemento con un proprio stile completamente distinto. */ input[type="checkbox"]:not(.custom-toggle):not(.option-radio) { appearance: none; -webkit-appearance: none; width: 1.15rem; height: 1.15rem; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 0; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-card); cursor: pointer; position: relative; flex-shrink: 0; margin: 0; vertical-align: middle; } input[type="checkbox"]:not(.custom-toggle):not(.option-radio):checked { background: var(--primary); border-color: var(--primary); } input[type="checkbox"]:not(.custom-toggle):not(.option-radio):checked::after { font-family: "tabler-icons" !important; content: '\ea5e'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: var(--text-sm); line-height: 1; color: white; } /* Frecce su/giù personalizzate per i campi numerici, al posto di quelle native del browser (diverse da sistema a sistema e poco coerenti con il resto dell'interfaccia). */ input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .number-spinner-wrap { display: inline-flex; align-items: stretch; position: relative; } .number-spinner-wrap input[type="number"] { padding-right: 1.6rem; } .number-spinner-controls { position: absolute; right: 2px; top: 2px; bottom: 2px; display: flex; flex-direction: column; width: 1.3rem; } .number-spinner-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; min-height: 0; background: transparent; color: var(--text-muted); border: none; border-radius: 4px; cursor: pointer; line-height: 1; } .number-spinner-btn:hover { background: var(--hover-tint); color: var(--primary); } .number-spinner-btn .ti { margin-right: 0; font-size: var(--text-sm); } .ti { vertical-align: -0.125em; line-height: 1; margin-right: 0.35em; } /* Icone "sole", senza testo accanto nello stesso flusso (pulsanti quadrati nelle tabelle, indicatori dentro contenitori con il proprio gap already impostato dal genitore): qui il margine di default andrebbe solo a sbilanciare la centratura, quindi lo si annulla. */ .icon-btn .ti, .calculator-close .ti, .grade-btn .ti, .grade-default-flag .ti, .grade-mode-icon .ti, .mode-choice-icon .ti, .org-type-icon .ti, .quiz-picker-item-arrow .ti, .upload-icon .ti, .upload-x .ti, .bcs-icon .ti, .nav-icon .ti, .user-menu-caret .ti { margin-right: 0; } .diff-dot { display: inline-block; width: 0.65em; height: 0.65em; border-radius: 50%; } button { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } input:focus, select:focus, textarea:focus, .rich-editor:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-focus, rgba(59, 111, 224, 0.15)); } button { background: var(--surface-muted); color: var(--text-main); border: 1px solid var(--border); padding: 0.6rem 1.1rem; border-radius: 10px; cursor: pointer; font-weight: 600; transition: background 0.2s, transform 0.1s, border-color 0.2s; } button:hover { background: var(--hover-tint); } /* Unica azione "primaria" per vista: riempimento pieno nell'accento di brand. Ogni altro pulsante (compreso quello senza classe) resta neutro di default — vedi regola "button" qui sopra — cosi il colore di brand non è più diffuso su ogni pulsante dell'app. */ .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border: none; } .btn-primary:hover { background: var(--btn-primary-bg-hover); } /* Pulsante "torna indietro"/breadcrumb: testo colorato su sfondo trasparente, nessun cambiamento di colore o sfondo al passaggio del mouse. Prima era ricreato ad-hoc con stili inline diversi in ogni pagina (e in due casi mancava del tutto la regola :hover, quindi veniva vinto dalla regola generica "button:hover" qui sopra, con un fastidioso lampo di sfondo ciano): un'unica classe condivisa evita che accada di nuovo altrove. */ .breadcrumb-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: transparent !important; color: var(--primary) !important; border: none !important; padding: 0.4rem 0 !important; border-radius: 0 !important; font-weight: 600; font-size: var(--text-md); cursor: pointer; outline: none; } .breadcrumb-btn:hover, .breadcrumb-btn:focus, .breadcrumb-btn:active { background: transparent !important; color: var(--primary) !important; border: none !important; outline: none; box-shadow: none; text-decoration: underline; transform: none !important; } button:active { transform: scale(0.97); } .btn-danger { background: var(--danger); color: white; border: none; } .btn-danger:hover { background: #d6473f; } .btn-secondary { background: var(--surface-muted); color: var(--text-main); border: 1px solid var(--border); } .btn-secondary:hover { background: #dde2f0; } /* Tables */ .data-table { width: 100%; border-collapse: collapse; background: var(--bg-card); } .data-table th, .data-table td { padding: 0.95rem 1rem; text-align: left; border-bottom: 1px solid var(--border); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--hover-tint); } .clickable-row { cursor: pointer; } .import-row-skipped { background: var(--result-danger-subtle-bg, rgba(235,95,94,0.08)); } .import-row-skipped:hover { background: var(--result-danger-subtle-bg, rgba(235,95,94,0.14)); } .import-row-warning { background: var(--result-warning-subtle-bg, rgba(255,211,116,0.12)); } .import-row-warning:hover { background: var(--result-warning-subtle-bg, rgba(255,211,116,0.18)); } .data-table th { background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); } /* Modals */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 26, 41, 0.55); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(4px); } .modal.active { display: flex; } .modal-content { background: var(--bg-card); width: 90%; max-width: 700px; max-height: 90vh; overflow-y: auto; border-radius: 20px; padding: 2rem; position: relative; box-shadow: 0 20px 50px rgba(30, 36, 51, 0.25); } .modal-content.small { max-width: 450px; } .modal-content.wide { max-width: 960px; } /* Barra di formattazione testo (grassetto/corsivo/sottolineato/apice/pedice/simboli) per i campi domanda e risposta */ .rich-toolbar { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.5rem; margin: 0.4rem 0 1rem; } .rich-toolbar-btn { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main); width: 2rem; height: 2rem; padding: 0; font-size: var(--text-sm); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } .rich-toolbar-btn:hover { background: var(--hover-tint); border-color: var(--primary); } .rich-toolbar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 0.2rem; } .rich-symbol-wrap { position: relative; } .rich-symbol-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem; grid-template-columns: repeat(6, 32px); gap: 0.25rem; box-shadow: 0 6px 16px rgba(0,0,0,0.15); width: max-content; } .rich-symbol-btn { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; width: 32px; height: 32px; font-size: var(--text-md); padding: 0; } .rich-symbol-btn:hover { border-color: var(--primary); } .rich-toolbar-hint { font-size: var(--text-sm); color: var(--text-muted); margin-left: auto; } /* Modale domanda: due colonne — parametri principali a sinistra, upload immagine (più compatta, quasi quadrata) a destra */ .question-modal-columns { display: flex; gap: 1.5rem; align-items: stretch; } .question-modal-columns .form-grid { margin-bottom: 0.6rem; } .question-modal-columns > div:first-child { flex: 1.6; min-width: 0; } /* La colonna dei media (immagine + audio) era larga quanto il testo: stretta a una misura FISSA, lascia respiro ai campi del modulo. */ .question-modal-columns > .field { flex: 0 0 240px; min-width: 0; display: flex; flex-direction: column; } /* Punteggio / Tipo / Difficoltà: larghezze FISSE, indipendenti dal contenuto. Con `width:auto` la tendina si dimensionava sull'opzione più lunga («Non specificata» debordava, «Scelta multipla» e «Vero/Falso» davano colonne diverse a ogni cambio): qui la geometria non balla più. text-overflow tiene leggibile l'opzione selezionata anche quando è più lunga della scatola. */ .question-modal-columns .upload-dropzone { /* Righe compatte, non pannelli: icona e testo affiancati, niente stiramento in verticale (il vecchio flex:1 le allungava fino a riempire la colonna). Le due zone si toccano — raggi azzerati nel punto di contatto e margine negativo che sovrappone i bordi — così leggono come UN riquadro allegati con due scomparti, ma restano due bersagli distinti per il trascinamento. */ flex: 0 0 auto; min-height: 0; flex-direction: row; justify-content: flex-start; text-align: left; gap: 0.6rem; padding: 0.6rem 0.75rem; } .question-modal-columns .upload-dropzone:first-of-type { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .question-modal-columns .upload-dropzone:last-of-type { margin-top: -2px; border-top-left-radius: 0; border-top-right-radius: 0; } /* Al passaggio la zona attiva torna sopra: senza z-index il bordo evidenziato di quella inferiore resterebbe coperto dal margine negativo. */ .question-modal-columns .upload-dropzone:hover, .question-modal-columns .upload-dropzone.dragover { position: relative; z-index: 1; } .question-modal-columns .upload-icon { font-size: 1.15rem; } .question-modal-columns .upload-label { font-size: var(--text-sm); } @media (max-width: 640px) { .question-modal-columns { flex-direction: column; } } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .form-grid-3col { /* Colonne a misura CONTENUTA, non «un terzo ciascuna»: con 1fr la tendina Difficoltà si allargava a occupare tutto lo spazio libero, e il campo del punteggio (150px veri fra numero, «punti» e frecce) sconfinava nel Tipo. I minmax(0, …) fissano il tetto e lasciano restringere sugli schermi stretti. */ grid-template-columns: 150px minmax(0, 240px) minmax(0, 210px); } .form-grid-3col .number-field { width: 100%; } .form-grid-3col .number-field > input { width: auto; min-width: 0; flex: 1 1 auto; } /* Il selettore del tipo riempie la sua colonna come gli altri campi: tre riquadri della stessa altezza e a filo, non tre larghezze intrinseche diverse. */ .form-grid-3col .type-picker, .form-grid-3col .type-picker-trigger { width: 100%; } .form-grid-3col select { width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .form-grid-2col { grid-template-columns: repeat(2, 1fr); } .settings-list { display: flex; flex-direction: column; margin: 0.5rem 0 1rem; } .settings-row { display: flex; justify-content: space-between; align-items: center; padding: 0.95rem 0; border-bottom: 1px solid var(--border); gap: 1.5rem; } .settings-row:last-child { border-bottom: none; } .settings-row-label { flex: 1; font-size: var(--text-md); color: var(--text-main); font-weight: 500; } .settings-row-label .settings-row-desc { display: block; font-size: var(--text-sm); color: var(--text-muted); font-weight: 400; margin-top: 0.2rem; } .settings-row .custom-toggle { flex-shrink: 0; } .settings-row:has(.custom-toggle:disabled) .settings-row-label { color: var(--text-muted); } .settings-row-input { flex-shrink: 0; width: 110px; } .field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .field .rich-editor{ width: 100%; box-sizing: border-box; } .field.full { grid-column: 1 / -1; } .field label { font-size: var(--text-sm); color: var(--text-muted); } textarea, .rich-editor{ height: 80px; resize: vertical; } .modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; } /* Dynamic Rows */ .dynamic-row, .fixed-row { display: grid; grid-template-columns: 2fr 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; } .fixed-row { grid-template-columns: 3fr 1fr auto; } /* Bottoni di eliminazione */ .btn-small-danger { padding: 0.4rem 0.7rem; font-size: var(--text-sm); background: var(--danger); border: none; } .btn-table-action { padding: 0.3rem 0.6rem; font-size: var(--text-sm); } /* --- Pulsanti azione a sola icona (tabelle) + tooltip personalizzato --- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; font-size: var(--text-md); line-height: 1; flex: 0 0 auto; } .icon-btn:disabled { background: var(--bg-darker); border: 1px solid var(--border); color: var(--text-muted); cursor: not-allowed; box-shadow: none; } /* Variante "attenuata": per azioni secondarie (riordina, duplica) che non devono avere lo stesso peso visivo di Modifica/Elimina — altrimenti una riga con troppe icone tutte cyan diventa un muro di colore poco leggibile. */ .icon-btn--muted { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); box-shadow: none; } .icon-btn--muted:hover { background: var(--hover-tint); border-color: var(--text-muted); color: var(--text-main); } .icon-btn--muted:disabled { background: var(--bg-darker); color: var(--text-muted); opacity: 0.5; } .icon-btn-group { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; flex-wrap: nowrap; } /* Tooltip generico: piccola etichetta scura che appare sopra l'elemento al passaggio del mouse. Usare data-tooltip="Testo" (più aria-label per l'accessibilità) al posto di title, per uno stile coerente in tutta l'app invece del tooltip nativo del browser. */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: #16213a; color: #fff; font-size: var(--text-sm); font-weight: 600; /* Le spiegazioni lunghe vanno A CAPO invece di formare un nastro che esce dalla pagina o finisce dietro la barra laterale; il tetto di larghezza le tiene leggibili, e z-index sopra la sidebar (che sta a 100) e i modali. */ white-space: normal; width: max-content; max-width: min(320px, 70vw); text-align: left; line-height: 1.4; padding: 0.4rem 0.65rem; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; z-index: 1500; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* Colonna azioni sempre come ultima colonna: larga solo quanto serve al contenuto (icone affiancate), allineata al margine destro della tabella. Le altre colonne si ridistribuiscono lo spazio libero in base al proprio contenuto. Le tabelle a layout fisso (grade-table, pool-table) gestiscono la larghezza tramite il proprio colgroup: qui ricevono solo l'allineamento a destra. */ /* L'ultima colonna è quella delle azioni. Una cella che occupa l'intera riga (`colspan`, cioè uno stato vuoto) è anche l'ultima, ma non è una colonna di azioni: va esclusa, altrimenti "Nessuna prova svolta per questo filtro" finisce a destra. */ .data-table:not(.grade-table):not(.pool-table) th:last-child:not(.empty-state), .data-table:not(.grade-table):not(.pool-table) td:last-child:not(.empty-state) { width: 1%; white-space: nowrap; text-align: right; } .grade-table th:last-child, .grade-table td:last-child, /* Come per le altre tabelle: l'ultima colonna è quella delle azioni, ma una cella che occupa l'intera riga (uno stato vuoto) è l'ultima solo per caso e va lasciata centrata. */ .pool-table th:last-child:not(.empty-state), .pool-table td:last-child:not(.empty-state) { white-space: nowrap; text-align: right; } .pool-table .pool-detail-row td { text-align: left; white-space: normal; } /* Custom Toggle Style (come nell'immagine) */ .toggle-container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; user-select: none; } /* Variante per etichette corte: l'interruttore resta accanto al testo invece di essere spinto al bordo di una larghezza fissa, dove sembra appartenere a un altro controllo. */ .toggle-container--compact { width: fit-content; justify-content: flex-start; gap: 0.6rem; } .toggle-container span { font-size: var(--text-md); color: var(--text-main); font-weight: 400; } .custom-toggle { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 40px; height: 20px; padding: 0; margin: 0; border: none; background: #ccc; border-radius: 20px; position: relative; transition: background 0.3s; cursor: pointer; outline: none; vertical-align: middle; flex-shrink: 0; } .custom-toggle:checked { background: var(--success); } .custom-toggle::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 50%; transform: translateY(-50%); background: white; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left 0.3s; } .custom-toggle:checked::before { left: 22px; } .custom-toggle:disabled { opacity: 0.35; cursor: not-allowed; } .toggle-container:has(.custom-toggle:disabled) { cursor: not-allowed; } .toggle-container:has(.custom-toggle:disabled) span { color: var(--text-muted); } /* Report Filters Alignment */ .report-filters { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; background: var(--bg-card); border: 1px solid var(--border); padding: var(--bar-padding-y) var(--bar-padding-x); border-radius: var(--radius); } .filter-item { display: flex; align-items: center; gap: 0.5rem; } /* Monitoring Styles */ .launch-section { background: var(--bg-card); padding: 1.25rem var(--bar-padding-x); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 2rem; } .launch-grid { display: flex; gap: 1rem; align-items: center; } .sessions-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1.5rem; animation: none !important; /* non ereditare animazioni dal tab parent */ } .session-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; animation: none !important; /* nessun pulse o fade ciclico */ } .session-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } .session-title { font-size: var(--text-lg); font-weight: bold; color: var(--accent); } .status-badge { font-size: var(--text-sm); padding: 0.2rem 0.5rem; border-radius: 4px; text-transform: uppercase; } .status-active { background: var(--cell-correct-bg); color: var(--cell-correct-text); } .status-paused { background: var(--cell-pending-bg); color: var(--cell-pending-text); } .progress-pill { background: var(--bg-darker); color: var(--text-main); border: 1px solid var(--border); padding: 0.2rem 0.6rem; border-radius: 10px; font-size: var(--text-sm); text-align: center; } /* Popup "Blocca Studenti": azione blocca/sblocca tutti in cima, poi l'elenco ordinato */ .lock-students-bulk-row { display: flex; gap: 0.5rem; margin: 0.75rem 0 1rem; } .lock-students-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 320px; overflow-y: auto; } .lock-student-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.8rem; } .lock-student-name { font-weight: 600; font-size: var(--text-md); } /* Toast Notification */ .toast { position: fixed; bottom: 30px; right: 30px; background: var(--bg-card); color: var(--text-main); padding: 1rem 2rem; border-radius: 8px; border-left: 4px solid var(--primary); box-shadow: 0 8px 24px rgba(30, 36, 51, 0.2); transform: translateX(200%); opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 9999; } .toast.active { transform: translateX(0); opacity: 1; } /* Matrix Table */ .matrix-container { width: 100%; overflow-x: auto; margin-top: 1rem; border-radius: 8px; background: var(--surface-muted); } /* border-collapse:separate (invece di collapse) evita un artefatto di rendering noto dei browser: colonne "sticky" dentro una tabella a bordi collassati lasciano intravedere il contenuto che scorre sotto, invece di restare opache. Con i bordi separati (e un bordo destro/basso per cella, invece che condiviso) le colonne fisse restano davvero opache. */ .matrix-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 800px; table-layout: fixed; } .matrix-table th, .matrix-table td { padding: 0.6rem; text-align: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-muted); font-size: var(--text-sm); } .matrix-table td { background: var(--bg-card); } .matrix-table th:first-child, .matrix-table td:first-child { border-left: 1px solid var(--border); } .matrix-table thead th { border-top: 1px solid var(--border); } /* Le prime 4 colonne (Nome, Punti, %, Avvisi) sono a larghezza fissa e restano ferme durante lo scroll orizzontale delle domande. */ .matrix-table th:nth-child(1), .matrix-table td:nth-child(1) { width: 190px; text-align: left; overflow-wrap: break-word; } .matrix-table th:nth-child(2), .matrix-table td:nth-child(2) { width: 90px; } .matrix-table th:nth-child(3), .matrix-table td:nth-child(3) { width: 70px; } .matrix-table th:nth-child(4), .matrix-table td:nth-child(4) { width: 80px; } /* Colonne domanda (Q1, Q2...): larghezza fissa (non si stringono mai sotto questa soglia); oltre questa soglia la tabella scorre in orizzontale (vedi overflow-x su .matrix-container) invece di rimpicciolire le celle fino a renderle illeggibili. */ .matrix-table th:nth-child(n+5), .matrix-table td:nth-child(n+5) { width: 80px; } /* Nome, Punti, % e Avvisi restano fissi durante lo scroll orizzontale, cosi restano sempre leggibili anche quando ci sono moltissime domande: la tabella scompare dietro di loro invece di scorrergli visibilmente sotto. */ .matrix-table th:nth-child(-n+4), .matrix-table td:nth-child(-n+4) { position: sticky; z-index: 2; } .matrix-table th:nth-child(-n+4) { z-index: 3; } /* Larghezze FISSE, non solo scostamenti: gli offset qui sotto sono promesse, e basta una pillola larga in «Punti» per romperle tutte a cascata (l'effetto era «resta fermo solo il nome»). min = max: la colonna non tratta. */ .matrix-table th:nth-child(1), .matrix-table td:nth-child(1) { left: 0; min-width: 190px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; } .matrix-table th:nth-child(2), .matrix-table td:nth-child(2) { left: 190px; min-width: 90px; max-width: 90px; } .matrix-table th:nth-child(3), .matrix-table td:nth-child(3) { left: 280px; min-width: 70px; max-width: 70px; } .matrix-table th:nth-child(4), .matrix-table td:nth-child(4) { left: 350px; min-width: 80px; max-width: 80px; box-shadow: 2px 0 4px rgba(0,0,0,0.06); } .cell-correct { background-color: var(--cell-correct-bg) !important; color: var(--cell-correct-text); } .cell-wrong { background-color: var(--cell-wrong-bg) !important; color: var(--cell-wrong-text); } .cell-partial { background-color: var(--cell-pending-bg) !important; color: var(--cell-pending-text); font-weight: bold; } .cell-empty { background-color: var(--cell-empty-bg) !important; color: var(--text-muted); } .cell-pending { background-color: var(--cell-pending-bg) !important; color: var(--cell-pending-text); cursor: pointer; font-weight: bold; } .cell-pending.cell-pending-locked { cursor: not-allowed; opacity: 0.7; } .cell-editable { cursor: pointer; } .cell-editable:hover { outline: 2px solid rgba(0,0,0,0.25); outline-offset: -2px; } .q-header-clickable { cursor: pointer; transition: background 0.15s; } .q-header-clickable:hover { background: var(--primary); color: var(--on-primary, white); } .qr-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.5rem; } .qr-option.correct { border-color: var(--result-success); background: var(--result-success-subtle-bg); } .qr-option.wrong-selected { border-color: var(--result-danger); background: var(--result-danger-subtle-bg); } /* --- PULSANTI RAPIDI DI CORREZIONE (pulsanti rapidi) --- Tre pulsanti circolari per assegnare rapidamente: punteggio pieno (verde), metà punteggio (giallo), zero (rosso). Il pulsante attivo riflette il punteggio attualmente assegnato; resta comunque possibile modificare il valore manualmente nel campo numerico accanto. */ .quick-grade-buttons { display: flex; align-items: center; gap: 0.8rem; margin: 0.5rem 0 0.9rem; } .grade-btn { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-card); color: var(--text-muted); font-size: var(--text-lg); line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.12s, background 0.15s, border-color 0.15s, color 0.15s; padding: 0; } .grade-btn:hover { transform: scale(1.08); } .grade-btn-full.active { background: var(--cell-correct-bg); border-color: var(--result-success); color: var(--cell-correct-text); } .grade-btn-half.active { background: var(--cell-pending-bg); border-color: var(--result-warning); color: var(--cell-pending-text); } .grade-btn-zero.active { background: var(--cell-wrong-bg); border-color: var(--result-danger); color: var(--cell-wrong-text); } .grade-btn-label { font-size: var(--text-sm); color: var(--text-muted); margin-right: 0.2rem; } /* --- Barra controlli Report Dettagliato — su un'unica riga (v1.9) --- */ .report-ctrl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.5rem; padding: 0.85rem 1.25rem; } .report-ctrl-item { display: flex; align-items: center; gap: 0.5rem; } /* Separatore verticale fra i gruppi della barra */ .report-ctrl-sep { width: 1px; align-self: stretch; background: var(--border); } /* Spinge il gruppo Azioni tutto a destra, mantenendo comunque tutto sulla stessa riga */ .report-ctrl-spacer { flex: 1 1 auto; } .report-ctrl-label-inline { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; } .trend-list-header { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .trend-list-header select { width: auto; } /* Select Classe volutamente corta: è solo un'etichetta per il report, non serve leggerla tutta. Larghezza in 'ch' (= la larghezza di un carattere nel font in uso) e non un px fisso: un numero fisso sarebbe sbagliato con «Testo grande»/«Molto grande» delle impostazioni di accessibilità, che ingrandisce il font e farebbe traboccare un campo dimensionato in pixel. 20ch è la misura chiesta — venti caratteri, qualunque sia la taglia del testo attiva. */ .report-ctrl-class-select { width: 20ch; max-width: 20ch; } .report-ctrl-item--grade { gap: 1.25rem; flex-wrap: wrap; } .report-ctrl-toggle-row { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: var(--text-md); color: var(--text-main); font-weight: 500; white-space: nowrap; } .report-ctrl-item--actions { display: flex; align-items: center; gap: 0.6rem; } /* Toggle disabilitato (voto non attivo nelle impostazioni) */ .custom-toggle:disabled { opacity: 0.38; cursor: not-allowed; } .report-ctrl-hint--muted { font-style: italic; font-size: var(--text-sm); color: var(--text-muted); } /* ============================================================ CONFIGURAZIONE VOTI — Editor formula semplificato ============================================================ */ .grade-table { margin-bottom: 0; table-layout: fixed; width: 100%; } .grade-table td, .grade-table th { vertical-align: top; word-break: break-word; overflow-wrap: break-word; padding: 0.75rem 0.65rem; } /* Colonna predefinita: icona/toggle centrata */ .grade-table th:nth-child(4), .grade-table td:nth-child(4) { text-align: center; vertical-align: middle; padding-left: 0.2rem; padding-right: 0.2rem; } .grade-preview-cell { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; } /* Flag statico (non interattivo) che indica la formula predefinita */ .grade-default-flag { color: var(--primary); font-size: var(--text-lg); line-height: 1; } .grade-formula-editor { border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 0.5rem; } .grade-scale-row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; } .grade-scale-arrow { font-size: 1.4rem; color: var(--text-muted); padding-bottom: 0.55rem; flex-shrink: 0; } .grade-scale-row .field { margin: 0; min-width: 90px; } .grade-scale-row .field input, .grade-scale-row .field select { max-width: 110px; } /* Griglia selezione modalità calcolo */ .grade-mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 0.4rem; } .grade-mode-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.75rem 0.9rem; border: 2px solid var(--border); border-radius: 10px; background: var(--bg-card); cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; height: auto; white-space: normal; line-height: 1.4; } .grade-mode-btn:hover { border-color: var(--primary); background: var(--hover-tint); } .grade-mode-btn.active { border-color: var(--primary); background: var(--primary-focus, rgba(59,111,224,0.08)); } .grade-mode-icon { font-size: var(--text-lg); } .grade-mode-btn strong { font-size: var(--text-md); color: var(--text-main); } .grade-mode-btn span { font-size: var(--text-sm); color: var(--text-muted); } .grade-param-row { margin-top: 0.75rem; padding: 0.75rem 1rem; background: var(--surface-muted); border-radius: 10px; border: 1px solid var(--border); } .grade-param-row label { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 0.4rem; font-weight: 600; } .grade-param-val { font-size: var(--text-md); font-weight: 700; color: var(--primary); min-width: 40px; } input[type="range"] { flex: 1; accent-color: var(--primary); } /* Anteprima calcolo */ .grade-preview-box { margin-top: 1rem; padding: 0.7rem 1rem; background: var(--surface-muted); border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; } .grade-preview-label { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); flex-shrink: 0; } .grade-preview-samples { display: flex; flex-wrap: wrap; gap: 0.5rem; } .grade-preview-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.65rem; font-size: var(--text-sm); } .gp-score { color: var(--text-muted); } .gp-arrow { color: var(--border); } .gp-grade { font-weight: 700; color: var(--primary); } /* Blocco senza selettore, presente fin dalla v1.6: le due dichiarazioni erano rimaste orfane, probabilmente per una riga cancellata. Un browser che incontra una graffa di chiusura in più smette di interpretare finché non si riallinea, quindi le regole immediatamente successive potevano venire ignorate — in silenzio, senza alcun errore. Le dichiarazioni sono ricondotte al riquadro di anteprima a cui appartengono. */ .grade-preview-chip { transform: scale(0.82); transform-origin: left center; } /* Pulsanti azioni */ .report-ctrl-action-btn { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; padding: 0.5rem 0.9rem; font-size: var(--text-md); } /* Responsive: sotto i 900px la barra va comunque a capo su più righe, restando allineata a sinistra */ @media (max-width: 900px) { .report-ctrl-bar { row-gap: 0.75rem; } .report-ctrl-sep { display: none; } .report-ctrl-spacer { flex-basis: 100%; height: 0; } } @media (max-width: 540px) { .report-ctrl-item--actions { flex-wrap: wrap; width: 100%; } .report-ctrl-action-btn { flex: 1 1 auto; justify-content: center; } } /* Mantieni le vecchie classi usate altrove nel programma */ .settings-item { display: flex; flex-direction: column; gap: 0.4rem; min-width: 200px; } .settings-item > label:not(.toggle-container) { font-size: var(--text-sm); color: var(--text-muted); } .settings-item select { max-width: 240px; } .hint-text-tiny { font-size: var(--text-sm); color: var(--text-muted); margin: 0; } /* --- Riga flessibile per form con campi di larghezza diversa (es. Nome + Formula voto) --- */ .pool-tag-chip { display: inline-block; background: var(--bg-darker); border: 1px solid var(--border); border-radius: 12px; padding: 0.1rem 0.6rem; font-size: var(--text-sm); margin: 0.1rem 0.15rem 0.1rem 0; color: var(--text-muted); white-space: nowrap; } /* Tabella pool: layout fisso */ .pool-table { table-layout: fixed; width: 100%; } .pool-text-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; } /* Riga domanda cliccabile per espandere i dettagli (testo completo, tag, tipo, risposte) */ .pool-row { cursor: pointer; } .pool-row:hover td { background: var(--hover-tint); } .pool-expand-caret { display: inline-block; width: 0.9em; color: var(--text-muted); } .pool-detail-row td { background: var(--surface-muted); padding: 1.1rem 1.5rem 1.35rem; border-bottom: 1px solid var(--border); } .pool-detail-content { max-width: 720px; } .pool-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-bottom: 0.6rem; } .pool-detail-type { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; } .pool-detail-tags { display: flex; flex-wrap: wrap; gap: 0.15rem; } .pool-detail-question { margin: 0 0 0.85rem; color: var(--text-main); font-size: var(--text-lg); font-weight: 600; line-height: 1.4; white-space: normal; overflow-wrap: break-word; } .pool-detail-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .pool-detail-options li { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: var(--text-md); background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.8rem; } .pool-option-mark { flex: 0 0 auto; } .pool-option-correct { color: var(--result-success); font-weight: 600; border-color: var(--result-success-subtle-border, var(--result-success)) !important; background: var(--result-success-subtle-bg, transparent) !important; } .pool-detail-answer { margin: 0.4rem 0 0; color: var(--text-muted); font-size: var(--text-md); } /* Colonna azioni pool: icone affiancate, allineate a destra */ .pool-actions-cell { vertical-align: middle; } .student-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(30, 36, 51, 0.18); z-index: 50; max-height: 260px; overflow-y: auto; margin-top: 0.3rem; } .student-suggestion-item { padding: 0.6rem 0.9rem; cursor: pointer; font-size: var(--text-md); } .student-suggestion-item:hover { background: var(--hover-tint); } .student-suggestion-empty { padding: 0.6rem 0.9rem; font-size: var(--text-sm); color: var(--text-muted); } .form-row-flex { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; } .form-row-flex .field { margin-bottom: 0; } .grade-formula-presets { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0 1.25rem; } .field-inline-label { font-size: var(--text-sm); color: var(--text-muted); } .preset-btn { background: var(--surface-muted); color: var(--text-main); border: 1px solid var(--border); font-weight: 500; font-size: var(--text-sm); padding: 0.3rem 0.7rem; height: auto; } .preset-btn:hover { background: var(--border); } /* --- SCELTA MODALITÀ (wizard a passi): pulsanti grandi con icona + descrizione --- */ .mode-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.25rem 0; } /* I due modali che usano questa griglia hanno esigenze DIVERSE e ognuno ha la sua variante: modificarne uno non deve mai toccare l'altro. «Avvia prova» — due attività, due colonne piene nel modale standard. */ .mode-choice-grid--attivita { grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .mode-choice-grid--attivita { grid-template-columns: 1fr; } } /* «Crea prova» — tre modalità affiancate (con auto-fit andavano 2+1 e la riga spaiata sembrava un buco) in un modale allargato apposta, così ogni card resta di sagoma circa quadrata invece di uscirne compressa. La modalità AI, quando esisterà, si AGGIUNGERÀ qui: una card «prossimamente» ferma per mesi è una promessa che l'utente scopre vuota — lo stesso principio per cui le capacità non scritte stanno fuori dal listino. */ .modal-content--modalita { max-width: 920px; } .mode-choice-grid--creazione { grid-template-columns: repeat(3, 1fr); } .mode-choice-grid--creazione .mode-choice-btn { min-height: 265px; padding: 1.75rem 1.25rem; } @media (max-width: 720px) { .mode-choice-grid--creazione { grid-template-columns: 1fr; } } .mode-choice-btn { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 0.5rem; height: auto; min-height: 230px; padding: 2rem 1.5rem; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-card); cursor: pointer; transition: border-color 0.15s, transform 0.15s; white-space: normal; line-height: 1.4; } .mode-choice-btn:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-2px); } .mode-choice-btn:disabled { opacity: 0.55; cursor: not-allowed; } .mode-choice-icon { font-size: 1.5rem; width: 3.2rem; height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-darker); color: var(--text-muted); } /* Un accento di colore per aiutare a distinguere a colpo d'occhio le opzioni in queste schermate di scelta iniziale (rare ma importanti) — un cerchio colorato dietro un'icona monocroma, non emoji colorate sparse: resta ordinato e coerente con il resto dell'app. */ /* Questi cerchi servono a distinguere fra loro le opzioni, quindi devono essere colori FISSI: legare uno dei quattro all'accento del tema lo faceva cambiare insieme agli altri elementi colorati della pagina, e con l'accento arancione due opzioni diventavano identiche. */ .mode-choice-icon--orange-dark { background: rgba(194,65,12,0.14); color: #c2410c; } .mode-choice-icon--blue { background: rgba(37,99,235,0.14); color: #2563eb; } .mode-choice-icon--purple { background: rgba(147,51,234,0.14); color: #9333ea; } .mode-choice-icon--teal { background: rgba(13,148,136,0.14); color: #0d9488; } .mode-choice-icon--orange { background: rgba(234,88,12,0.14); color: #ea580c; } .mode-choice-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-main); } .mode-choice-desc { font-size: var(--text-sm); color: var(--text-muted); } .mode-choice-badge { display: inline-block; margin-top: 0.2rem; padding: 0.15rem 0.55rem; border-radius: 10px; background: var(--result-warning); color: var(--result-warning-text); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; } /* --- Elenco navigabile di prove (popup scelta prova) --- */ .quiz-picker-search { width: 100%; padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 0.75rem; font-size: var(--text-md); } .quiz-picker-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; } .quiz-picker-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--bg-card); transition: border-color 0.15s, background 0.15s; } .quiz-picker-item:hover { border-color: var(--primary); background: var(--hover-tint); } .quiz-picker-item-title { font-weight: 700; } .quiz-picker-item-meta { font-size: var(--text-sm); color: var(--text-muted); margin-top: 0.15rem; } .quiz-picker-item-arrow { color: var(--primary); font-size: var(--text-lg); } /* --- Sezione di avvio attività, in evidenza sulla Dashboard --- */ .dashboard-launch-section { padding: 1.5rem; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); } .dashboard-launch-buttons { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; } .dashboard-launch-btn { display: flex; align-items: center; gap: 0.75rem; height: auto; padding: 1.25rem 2rem; font-size: var(--text-lg); font-weight: 700; border-radius: var(--radius); border: none; cursor: pointer; background: var(--primary); color: var(--on-primary, white); transition: transform 0.15s; } .dashboard-launch-btn:hover { background: var(--primary-hover); transform: translateY(-2px); } .dashboard-launch-btn .btn-icon { font-size: 1.6rem; } /* --- Dashboard: card statistiche ridotte, sezione avvio più centrale/rilevante, e le due sezioni "attività recenti" affiancate --- */ .stats-grid-compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; } .stat-card-compact { padding: 0.9rem 1.1rem; } .stat-card-compact h3 { font-size: var(--text-sm); margin-bottom: 0.4rem; } .stat-card-compact p { font-size: 1.5rem; } .dashboard-launch-section-hero { text-align: center; padding: 2.5rem 2rem; min-height: 340px; display: flex; flex-direction: column; justify-content: center; } .dashboard-launch-section-hero .hint-text { max-width: 480px; margin-left: auto; margin-right: auto; } .dashboard-launch-section-hero .dashboard-launch-buttons { justify-content: center; } /* Banner "sessione in corso" in dashboard, al posto della voce fissa Monitoraggio Live */ .active-session-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--primary-focus, rgba(59,111,224,0.12)); border: 1px solid var(--primary); border-radius: var(--radius); padding: 0.9rem 1.2rem; margin-bottom: 1.5rem; } .active-session-banner-info { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--primary); } .active-session-banner-info .ti { font-size: var(--text-lg); } .dashboard-three-col { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 1.5rem; align-items: stretch; margin-top: 2rem; } .dashboard-recent-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 2px 10px rgba(30, 36, 51, 0.05); } .dashboard-recent-card-side { display: flex; flex-direction: column; } .dashboard-recent-card-side .dashboard-recent-list { flex: 1; } .dashboard-recent-card h3 { margin: 0 0 0.25rem; } .dashboard-recent-list { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.6rem; } .dashboard-recent-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } .dashboard-recent-list li:last-child { border-bottom: none; padding-bottom: 0; } .dashboard-recent-list a { color: var(--primary); font-weight: 600; text-decoration: none; } .dashboard-recent-list a:hover { text-decoration: underline; } @media (max-width: 1100px) { .dashboard-three-col { grid-template-columns: 1fr; } } .qr-nav-bar { display: flex; justify-content: space-between; align-items: center; margin: 1.25rem 0; padding: 0.75rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .correction-modal .modal-content { max-width: 600px; } .answer-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; gap: 1rem; } .score-input { width: 80px; text-align: center; font-size: var(--text-lg); } .quick-grade-row { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; } /* Specificità maggiore della regola generale ".field input" (che altrimenti la forzerebbe a larghezza 100%, rendendo il numero enorme): qui va tenuta piccola e accanto ai pulsanti. */ .quick-grade-row input.score-input-compact { width: 70px !important; font-size: var(--text-md); flex-shrink: 0; } .answer-preview { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; color: var(--text-main); font-size: var(--text-md); line-height: 1.5; margin-top: 0.4rem; white-space: pre-wrap; } /* --- LOGIN PAGE --- */ .login-body { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100vw; background: radial-gradient(circle at top, #ffffff 0%, var(--bg-dark) 75%); } .login-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem; width: 100%; max-width: 360px; box-shadow: 0 20px 40px rgba(30, 36, 51, 0.12); } .login-subtitle { text-align: center; color: var(--text-muted); font-size: var(--text-md); margin-bottom: 1.5rem; } .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-btn { width: 100%; margin-top: 0.5rem; padding: 0.75rem; } .login-error { background: rgba(229, 83, 75, 0.1); border: 1px solid var(--danger); color: #b3312a; padding: 0.6rem 0.9rem; border-radius: 8px; font-size: var(--text-sm); margin-bottom: 1rem; } /* --- PENDING REVIEW / SCORE BADGES --- */ .badge-danger { display: inline-block; background: var(--cell-wrong-bg); color: var(--cell-wrong-text); font-size: var(--text-sm); padding: 0.15rem 0.5rem; border-radius: 10px; font-weight: 600; white-space: nowrap; } .badge-success { display: inline-block; background: var(--cell-correct-bg); color: var(--cell-correct-text); font-size: var(--text-sm); padding: 0.15rem 0.5rem; border-radius: 10px; font-weight: 600; white-space: nowrap; } .badge-pending { display: inline-block; background: var(--result-warning); color: var(--result-warning-text); font-size: var(--text-sm); padding: 0.15rem 0.5rem; border-radius: 10px; font-weight: 600; margin-left: 0.5rem; margin-top: 0.3rem; white-space: nowrap; } .badge-score { background: var(--border); color: var(--text-main); font-size: var(--text-sm); padding: 0.2rem 0.6rem; border-radius: 10px; font-weight: 600; } .empty-state { text-align: center; color: var(--text-muted); padding: 3rem 1rem; font-size: var(--text-md); } /* --- OPTION ROWS (pool question modal): pallino + badge lettera + testo + elimina --- */ .option-row { display: grid; grid-template-columns: 32px 30px 1fr 40px; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; } .option-row .opt-text { width: 100%; min-width: 0; /* evita overflow del testo dentro la grid cell */ } .option-row .rich-field-wrap { width: 100%; min-width: 0; } /* Tecnica CSS (non JS) per far crescere una textarea col contenuto: un elemento gemello invisibile (::after) replica esattamente lo stesso testo con lo stesso font/padding, nella stessa cella di una grid; la riga si dimensiona sul più alto dei due, sempre in modo corretto e senza dipendere da misurazioni JS soggette a tempistiche di layout. */ .autogrow-wrap { display: grid; width: 100%; min-width: 0; } .autogrow-wrap::after { content: attr(data-grow-value) " "; white-space: pre-wrap; word-break: break-word; visibility: hidden; grid-area: 1 / 1 / 2 / 2; font: inherit; line-height: 1.4; padding: 0.5rem 0.7rem; box-sizing: border-box; } .autogrow-wrap > textarea, .autogrow-wrap > .rich-editor{ grid-area: 1 / 1 / 2 / 2; resize: none; overflow: hidden; font-family: inherit; line-height: 1.4; padding: 0.5rem 0.7rem; box-sizing: border-box; width: 100%; min-width: 0; min-height: 0; height: auto; } /* Involucro invisibile per i campi di testo che possono ricevere la barra di formattazione: di norma non ha alcuno stile proprio (l'input dentro resta identico a un campo normale). Solo quando il campo al suo interno ha il focus (classe aggiunta via JS) diventa un unico riquadro che contiene sia la barra sia il campo, invece di mostrarla come una riga separata e disallineata sopra di esso. */ /* Questo meccanismo esisteva per la barra di formattazione FISSA: quando un campo riceveva il fuoco, l'involucro prendeva su di sé bordo e cornice e il campo interno li perdeva, così barra e campo apparivano dentro lo stesso riquadro. Con la barra a comparsa non serve più, ed era anzi dannoso: azzerava la spaziatura interna (`padding: 0.25rem 0.1rem !important`), per cui il testo del campo attivo finiva appiccicato al bordo sinistro. L'evidenziazione del fuoco è ora quella normale del campo, uguale a tutti gli altri. */ .rich-field-wrap--active { background: transparent; border: none; padding: 0; box-shadow: none; } .option-radio-wrap { display: flex; align-items: center; justify-content: center; } /* Pallino di selezione "con personalità": più grande, colorato, con puntino animato */ .option-radio { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; aspect-ratio: 1 / 1; box-sizing: border-box; border: 2px solid var(--border); border-radius: 50%; background: var(--bg-dark); cursor: pointer; position: relative; transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s; flex-shrink: 0; } .option-radio:hover { border-color: var(--accent); transform: scale(1.08); } .option-radio:checked { border-color: var(--success); background: var(--success); box-shadow: 0 0 0 3px rgba(31, 169, 122, 0.22); } .option-radio:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: white; border-radius: 50%; transform: translate(-50%, -50%); } /* Badge lettera (A, B, C, D...) per le opzioni */ .option-letter { width: 28px; height: 28px; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; background: var(--border); color: var(--text-main); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); flex-shrink: 0; transition: background 0.2s, color 0.2s; } .option-row:has(.option-radio:checked) .option-letter { background: var(--success); color: white; } .opt-delete { padding: 0.4rem; width: 32px; height: 32px; } .opt-text[readonly] { color: var(--text-muted); cursor: default; } /* Menu utente: sostituisce la vecchia tendina di sistema + i pulsanti sciolti in fondo alla sidebar. È un pop-up che si apre VERSO L'ALTO (essendo ancorato al fondo della sidebar). */ .user-menu-wrap { position: relative; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--sidebar-border); } .user-menu-trigger { width: 100%; display: flex; align-items: center; gap: 0.4rem; background: transparent; border: none; color: var(--sidebar-text); font-weight: 600; font-size: var(--text-md); padding: 0.6rem 0.8rem; border-radius: 10px; cursor: pointer; height: auto; justify-content: flex-start; } .user-menu-trigger:hover { background: var(--sidebar-hover-bg); } .user-menu-caret { margin-left: auto; color: var(--sidebar-text-muted); transition: transform 0.2s; } .user-menu-wrap.open .user-menu-caret { transform: rotate(180deg); } .user-menu-dropdown { display: none; position: absolute; bottom: calc(100% + 0.5rem); left: 0; width: 100%; min-width: 220px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 28px rgba(30, 36, 51, 0.18); padding: 0.4rem; z-index: 600; } .user-menu-wrap.open .user-menu-dropdown { display: block; } /* --- Piccolo menu a tendina inline nelle tabelle (es. "Scarica" con più opzioni) --- */ .table-dropdown { display: inline-block; position: relative; } .table-dropdown-menu { display: none; position: absolute; top: calc(100% + 0.3rem); right: 0; min-width: 240px; width: max-content; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(30, 36, 51, 0.18); padding: 0.4rem; z-index: 50; flex-direction: column; gap: 0.2rem; } .table-dropdown.open .table-dropdown-menu { display: flex; } .table-dropdown-menu button { width: 100%; text-align: left; justify-content: flex-start; background: transparent; border: none; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: var(--text-sm); color: var(--text-main); height: auto; white-space: nowrap; } .table-dropdown-menu button:hover { background: var(--hover-tint); } .user-menu-item { width: 100%; display: flex; align-items: center; gap: 0.5rem; background: transparent; border: none; color: var(--text-main); font-weight: 500; font-size: var(--text-md); padding: 0.65rem 0.7rem; border-radius: 8px; cursor: pointer; height: auto; justify-content: flex-start; text-align: left; } .user-menu-item:hover { background: var(--hover-tint); } .user-menu-item-danger:hover { background: rgba(229, 83, 75, 0.1); color: var(--danger); } .template-download-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; } .template-download-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text-main); transition: border-color 0.15s, background 0.15s; } .template-download-item:hover { border-color: var(--primary); background: var(--hover-tint); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-dark); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--border); } /* ============================================================ UPLOAD DROPZONE Sostituisce il pulsante "Sfoglia" nativo del browser con un'area drag-and-drop coerente con lo stile dell'app. ============================================================ */ .upload-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; background: var(--surface-muted); border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.25rem 1rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: center; width: 100%; box-sizing: border-box; } .upload-dropzone:hover, .upload-dropzone.dragover { border-color: var(--primary); background: var(--hover-tint); } .upload-icon { font-size: 1.6rem; opacity: 0.55; line-height: 1; } .upload-label { font-size: var(--text-md); color: var(--text-main); } .upload-label u { color: var(--primary); text-decoration-color: var(--primary); } /* Stato «allegato caricato»: l'anteprima prende IL POSTO del contenuto della zona, dentro la stessa scatola — niente elementi che spuntano sotto e sembrano aggiunte. Il clic sulla zona resta «scegli un file», che ora significa chiaramente SOSTITUIRE; la X toglie. Vale per il modale del pool e per l'editor del costruttore. */ .upload-dropzone--loaded > .upload-icon, .upload-dropzone--loaded > .upload-label { display: none; } .upload-dropzone--loaded { flex-direction: row; justify-content: flex-start; text-align: left; border-style: solid; min-height: 0; } .upload-loaded { display: none; } .upload-dropzone--loaded .upload-loaded { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-width: 0; } .upload-thumb { height: 38px; width: 38px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: var(--bg-darker); } /* flex-basis 0 e width piena: il lettore ha una larghezza intrinseca generosa che, lasciata come base, sfonderebbe la colonna stretta del modale — così invece si adatta allo spazio e Chromium compatta i controlli da solo. */ .upload-loaded audio { height: 34px; flex: 1 1 0; width: 100%; min-width: 0; } .upload-loaded-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--text-muted); } .upload-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); color: var(--text-muted); cursor: pointer; min-height: 0; } .upload-x:hover { color: var(--danger, #e5484d); border-color: currentColor; } .upload-hint { font-size: var(--text-sm); color: var(--text-muted); min-height: 1rem; word-break: break-all; } /* ============================================================ MULTI-TAG — campo pill unificato per sezione + tag aggiuntivi ============================================================ */ .multitag-input { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 0.4rem 0.65rem; background: var(--bg-card); min-height: 2.6rem; cursor: text; transition: border-color 0.15s, box-shadow 0.15s; } .multitag-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-focus, rgba(59,111,224,0.15)); } .tag-pill { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 999px; padding: 0.18rem 0.6rem; font-size: var(--text-sm); font-weight: 500; line-height: 1.4; white-space: nowrap; } .tag-pill.tag-section { background: var(--primary); color: #fff; } .tag-pill.tag-extra { background: var(--bg-darker); color: var(--text-main); border: 1px solid var(--border); } .tag-pill-remove { cursor: pointer; opacity: 0.65; font-size: var(--text-md); line-height: 1; padding: 0 0.1rem; transition: opacity 0.1s; } .tag-pill-remove:hover { opacity: 1; } .tag-text-input { border: none; outline: none; background: transparent; flex: 1; min-width: 130px; font-size: var(--text-md); color: var(--text-main); padding: 0.1rem 0; } .tag-text-input::placeholder { color: var(--text-muted); } /* ============================================================ TOGGLE TEMPO AGGIUNTIVO — inline nella tabella studenti Allinea il checkbox al centro della cella senza margini extra lasciati dai vecchi stili ".custom-toggle" globali. ============================================================ */ td .toggle-extra-time { margin: 0; vertical-align: middle; } /* ============================================================ GDPR — Modal cancellazione account ============================================================ */ #delete-account-modal .modal-content { max-width: 480px; } #delete-account-modal p { margin: 0.6rem 0; line-height: 1.55; font-size: var(--text-md); } #delete-account-modal .field { margin-top: 1rem; } #delete-account-pending p { color: var(--result-danger); font-size: var(--text-md); } #delete-account-pending .modal-actions { flex-wrap: wrap; gap: 0.5rem; } /* La stella della formula predefinita resta accesa e non spenta come un pulsante disattivato: dice qual è la scelta corrente, non che l'azione non è disponibile. */ .btn-table-action.icon-btn.is-default, .btn-table-action.icon-btn.is-default:disabled { color: var(--warning, #d99e2b); opacity: 1; } /* Colonne ordinabili: la freccia compare al passaggio e resta su quella attiva. Senza un segno visibile non si capisce con che criterio è ordinata la tabella, e si finisce per dubitare che l'ordinamento sia avvenuto. */ .data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .data-table th.sortable::after { content: "↑"; margin-left: 0.35rem; opacity: 0; font-size: 0.85em; } .data-table th.sortable:hover::after { opacity: 0.4; } .data-table th.sortable.sorted::after { opacity: 1; color: var(--primary); } .data-table th.sortable.sorted.desc::after { content: "↓"; } /* ============================================================================ PANNELLO DI INGRESSO DEGLI STUDENTI ============================================================================ Codice, indirizzo di rete e codice QR nello stesso posto: i tre modi di entrare. Prima il codice compariva due volte, in piccolo, e senza un modo di raggiungere il programma che non fosse dettare a voce un indirizzo IP. */ .join-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3); margin: var(--space-2) 0 var(--space-3); background: var(--surface-muted); border-radius: var(--radius); } .join-code-block { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .join-code-label { font-size: var(--text-sm); color: var(--text-muted); } /* Grande: va letto dal fondo dell'aula, e la spaziatura fra le cifre serve a non confondere 0 e O quando si detta a voce. */ .join-code { font-size: 2.6rem; font-weight: 800; line-height: 1.1; letter-spacing: 0.12em; color: var(--text-main); } .join-url-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; } .join-url { font-size: var(--text-md); color: var(--primary); word-break: break-all; } .join-url--assente { color: var(--text-muted); max-width: 34ch; } .join-qr { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0.5rem; background: #fff; /* il QR va letto da una fotocamera: serve fondo bianco sempre, anche con il tema scuro attivo */ border-radius: var(--radius-sm); } .join-qr svg { display: block; width: 150px; height: 150px; } @media (max-width: 640px) { .join-panel { justify-content: center; text-align: center; } .join-code-block { align-items: center; } .join-code { font-size: 2.1rem; } } /* --- Codice QR ingrandito --- */ .join-qr--clickable { cursor: zoom-in; } .join-qr--clickable:hover { box-shadow: 0 0 0 3px var(--primary-focus); } .qr-modal-content { max-width: 520px; text-align: center; } /* Fondo bianco sempre, anche col tema scuro: lo legge una fotocamera. */ .qr-modal-frame { display: flex; align-items: center; justify-content: center; padding: 1.2rem; margin-bottom: 1rem; background: #fff; border-radius: var(--radius); } .qr-modal-frame svg { display: block; width: min(58vh, 380px); height: min(58vh, 380px); } /* Codice e indirizzo restano sotto il QR: chi non riesce a inquadrarlo digita, e in un'aula da venticinque quel caso capita sempre. */ .qr-modal-code { font-size: 2.4rem; font-weight: 800; letter-spacing: 0.12em; color: var(--text-main); } .qr-modal-url { margin-top: 0.3rem; font-size: var(--text-md); color: var(--primary); word-break: break-all; } /* Le schede dell'area account NON stanno qui. Le loro regole vivono dentro `templates/partials/account_tabs.html`, insieme al markup che descrivono. Non è una preferenza di stile: `?v=` su questo foglio cambia solo al RIAVVIO del server, quindi una correzione al CSS può restare invisibile per ore su un browser che ha la copia vecchia in cache — ed è successo, tre volte di fila, su queste stesse schede. Un blocco `