/* GestioneSkuola — foglio di stile scritto a mano (niente build Tailwind disponibile in questo ambiente). Palette: slate+teal, sidebar verticale, card a bordo sottile. --teal-* sono iniettate per-richiesta in layout.php in base al colore scelto in Impostazioni; qui sotto restano solo i valori di default. */ :root { --teal-50: #f0f9f9; --teal-200: #7ae8e8; --teal-500: #25d8d7; --teal-600: #1FB5B4; --teal-700: #188e8d; --teal-600-rgb: 31, 181, 180; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-500: #64748b; --slate-700: #334155; --slate-800: #1e293b; --red-50: #fef2f2; --red-200: #fecaca; --red-600: #dc2626; --red-700: #b91c1c; --amber-50: #fffbeb; --amber-200: #fde68a; --amber-700: #b45309; --white: #ffffff; --hour-height: 48px; /* Token semantici: cambiano con il tema chiaro/scuro. Il resto del CSS usa questi invece di slate/white direttamente, cosicché il tema scuro si applichi ovunque senza duplicare le regole. */ --surface: var(--white); --surface-sunken: var(--slate-50); --surface-alt: var(--slate-100); --border: var(--slate-200); --border-strong: var(--slate-300); --text: var(--slate-800); --text-body: var(--slate-700); --text-muted: var(--slate-500); --sidebar-bg: var(--surface); --sidebar-text: var(--text-body); --sidebar-hover-bg: var(--surface-alt); --sidebar-active-bg: var(--teal-50); --sidebar-active-color: var(--teal-700); --sidebar-width: 232px; --sidebar-width-collapsed: 92px; /* Distanza fissa bordo-sinistro↔hamburger = hamburger↔logo (topbar-left) e bordo-sinistro↔icona principale nella colonna contratta: STESSO valore, così l'hamburger risulta sempre esattamente sopra le icone principali, in entrambi gli stati della sidebar. */ --rail-offset: 1.625rem; --rail-child-indent: 1.125rem; --topbar-height: 56px; } html[data-theme="dark"] { --surface: #1e293b; --surface-sunken: #0f172a; --surface-alt: #334155; --border: #334155; --border-strong: #475569; --text: #f1f5f9; --text-body: #e2e8f0; --text-muted: #94a3b8; --sidebar-active-bg: rgba(var(--teal-600-rgb), 0.18); --sidebar-active-color: var(--teal-200); } /* Temi "lettura facilitata" (vedi accessibility.js): ridefiniscono gli stessi token semantici del tema chiaro/scuro qui sopra, così l'intera app (card, sidebar, tabelle) li eredita senza regole duplicate. Vengono dopo il tema scuro apposta, per poterlo sovrascrivere quando entrambi sono attivi: è una scelta di accessibilità deliberata dell'utente. */ html[data-a11y-theme="cream"] { --surface: #fdf6e3; --surface-sunken: #f8f0dd; --surface-alt: #f5ecd7; --border: #e0d3ae; --border-strong: #cbb98a; --text: #4a3f2b; --text-body: #5a4d38; --text-muted: #7a6c50; } html[data-a11y-theme="blue"] { --surface: #eef3fb; --surface-sunken: #e8eff8; --surface-alt: #e2ebf7; --border: #c9d8ee; --border-strong: #a9c2e2; --text: #1f2937; --text-body: #33415a; --text-muted: #55648e; } html[data-a11y-theme="contrast"] { --surface: #000000; --surface-sunken: #000000; --surface-alt: #1a1a1a; --border: #d1d5db; --border-strong: #d1d5db; --text: #e5e7eb; --text-body: #e5e7eb; --text-muted: #d1d5db; } /* Dimensione testo e spaziatura aumentata si applicano solo al contenuto letto (.main-content), non al guscio dell'app (sidebar/topbar a larghezze fisse in px, che romperebbero layout con uno zoom generico). Quasi tutte le dimensioni di questo foglio di stile sono in rem, sempre relative alla root indipendentemente dalla profondità di annidamento - impostare font-size su .main-content non ha percio' alcun effetto sui discendenti in rem (era il bug: lo zoom non cambiava nulla). "zoom" invece ridimensiona l'intero rendering del sotto-albero, rem compresi, senza toccare la root - qui e' esattamente cio' che serve. */ /* Applicato a .app-shell (non solo .main-content) così lo zoom testo di Lettura facilitata ridimensiona anche la sidebar e la topbar (nome scuola/utente), non solo il contenuto centrale. Il pannello di accessibilità stesso vive fuori da .app-shell (appeso a ) apposta, per non ridimensionare i propri controlli insieme al resto. */ .app-shell { zoom: var(--a11y-font-scale, 1); } html.gs-a11y-spacing .main-content, html.gs-a11y-spacing .main-content * { letter-spacing: 0.04em !important; word-spacing: 0.14em !important; line-height: 1.85 !important; } .a11y-toggle-btn { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 3rem; height: 3rem; border-radius: 50%; border: none; background: var(--teal-600); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); cursor: pointer; z-index: 10000; display: flex; align-items: center; justify-content: center; } .a11y-toggle-btn:hover { background: var(--teal-700); } .a11y-toggle-btn svg { width: 1.5rem; height: 1.5rem; } .a11y-panel-title-icon { display: inline-flex; vertical-align: middle; width: 1.1rem; height: 1.1rem; margin-right: 0.2rem; } .a11y-panel-title-icon svg { width: 100%; height: 100%; } .a11y-panel { position: fixed; right: 1.25rem; bottom: 4.75rem; width: 300px; max-width: calc(100vw - 2rem); max-height: 75vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); padding: 1rem; z-index: 10000; display: none; } .a11y-panel.a11y-panel-open { display: block; } .a11y-panel-title { font-weight: 700; font-size: 0.95rem; margin: 0 0 0.75rem; color: var(--text); } .a11y-panel-row { margin-bottom: 0.9rem; } .a11y-panel-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.4rem; } .a11y-btn-group { display: flex; gap: 0.4rem; } .a11y-btn { flex: 1; padding: 0.4rem 0.3rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-alt); color: var(--text); cursor: pointer; font-size: 0.85rem; } .a11y-btn:hover { border-color: var(--border-strong); } .a11y-btn.a11y-btn-active { background: var(--teal-600); color: #fff; border-color: var(--teal-600); } .a11y-swatches { display: flex; gap: 0.5rem; } .a11y-swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; } .a11y-swatch.a11y-swatch-active { border-color: var(--teal-600); box-shadow: 0 0 0 2px var(--teal-600); } .a11y-reset-link { display: inline-block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; } * { box-sizing: border-box; } html, body { background: var(--surface-sunken); } body { margin: 0; min-height: 100vh; color: var(--text); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.45; } a { color: inherit; text-decoration: none; } /* ---------- Struttura app (topbar unica + sidebar + contenuto) ---------- */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; } .topbar { height: var(--topbar-height); flex: none; display: flex; align-items: stretch; justify-content: space-between; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; } /* topbar-left non ha più una larghezza fissa: si allarga in base al contenuto (vedi .sidebar-brand-name più sotto) così un nome scuola lungo può proseguire oltre la colonna della sidebar senza essere troncato. L'hamburger e il logo restano sempre alla stessa distanza dal bordo sinistro — vedi --rail-offset — indipendentemente da sidebar espansa o contratta: quel che cambia è solo la larghezza della colonna sotto. */ .topbar-left { flex: none; min-width: var(--sidebar-width); display: flex; align-items: center; gap: var(--rail-offset); padding: 0 0.75rem 0 var(--rail-offset); } .topbar-right { display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; } .topbar-icons { display: flex; align-items: center; gap: 0.4rem; } .topbar-icon-wrap { position: relative; display: flex; } .topbar-icon-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: transparent; border-radius: 999px; color: var(--text-muted); cursor: pointer; } .topbar-icon-btn:hover { background: var(--surface-alt); } .topbar-icon-btn svg { width: 19px; height: 19px; } .topbar-icon-btn-active { color: var(--teal-600); } .topbar-icon-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--red-600); color: var(--white); font-size: 0.65rem; font-weight: 700; line-height: 15px; text-align: center; } .topbar-notif-dropdown { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; width: 300px; max-height: 22rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 0.5rem; z-index: 20; } .topbar-notif-dropdown-open { display: block; } .topbar-notif-item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.6rem; border-radius: 0.5rem; font-size: 0.85rem; color: var(--text); } .topbar-notif-item:hover { background: var(--surface-alt); } .topbar-notif-item span { color: var(--text-muted); font-size: 0.8rem; } .topbar-notif-item-unread { background: var(--surface-sunken); } .topbar-title { font-size: 0.9rem; font-weight: 500; } .topbar-user-link { color: var(--teal-700); text-decoration: none; } .topbar-user-link:hover { text-decoration: underline; } .topbar-role { margin-left: 0.5rem; font-size: 0.75rem; font-weight: 400; color: var(--text-muted); } .sidebar-logo { flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .sidebar-logo img { width: 100%; height: 100%; object-fit: cover; } /* Niente troncamento: un nome scuola lungo prosegue naturalmente verso destra (topbar-left non ha più una larghezza fissa, cresce col contenuto — vedi sopra), invece di essere tagliato con "…". */ .sidebar-brand-name { flex: none; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; /* .topbar-left usa un gap uniforme (--rail-offset) fra hamburger/logo/nome: dimezzato qui solo fra logo e nome (senza toccare --rail-offset, che allinea anche l'hamburger alle icone della sidebar sotto). */ margin-left: calc(var(--rail-offset) / -2); } .sidebar-toggle { flex: none; width: 20px; height: 20px; box-sizing: content-box; padding: 6px; margin: -6px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 0.4rem; background: transparent; color: var(--text-muted); cursor: pointer; } .sidebar-toggle:hover { background: var(--surface-alt); color: var(--text); } .sidebar-toggle svg { width: 100%; height: 100%; } .app-body { display: flex; flex: 1; min-height: 0; } .sidebar { width: var(--sidebar-width); flex: none; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: var(--topbar-height); height: calc(100vh - var(--topbar-height)); transition: width 0.15s ease; overflow-x: hidden; border-right: 1px solid var(--border); } .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem; overflow-y: auto; } .sidebar-link { display: flex; align-items: center; gap: 0.75rem; /* padding-left è fisso a --rail-offset (meno il padding di .sidebar-nav) SIA espansa che contratta: se dipendesse da uno stato soltanto, l'icona si sposterebbe di un paio di pixel passando da uno stato all'altro (era il bug segnalato) — usando lo stesso valore ovunque resta allineata anche con l'hamburger in alto, che usa la stessa variabile. */ padding: 0.55rem 0.75rem 0.55rem calc(var(--rail-offset) - 0.75rem); border-radius: 0.5rem; font-size: 0.9rem; color: var(--sidebar-text); white-space: nowrap; } .sidebar-link:hover { background: var(--sidebar-hover-bg); } .sidebar-link-active { background: var(--sidebar-active-bg); color: var(--sidebar-active-color); font-weight: 600; } .sidebar-link-icon { flex: none; width: 20px; height: 20px; display: flex; opacity: 0.85; } .sidebar-link-icon svg { width: 100%; height: 100%; } .sidebar-link-active .sidebar-link-icon { opacity: 1; } .sidebar-link-label { overflow: hidden; text-overflow: ellipsis; flex: 1; } .sidebar-badge { flex: none; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; border-radius: 999px; background: var(--red-600); color: var(--white); font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } html.sidebar-collapsed .sidebar-badge { display: none; } /* ---------- Macrocategorie con sottomenu (accordion nativo) ---------- */ .sidebar-group summary.sidebar-link { cursor: pointer; } .sidebar-group summary.sidebar-link::-webkit-details-marker { display: none; } .sidebar-group summary.sidebar-link { list-style: none; } .sidebar-group-chevron { flex: none; width: 14px; height: 14px; display: flex; opacity: 0.6; transition: transform 0.15s ease; } .sidebar-group-chevron svg { width: 100%; height: 100%; } .sidebar-group[open] > summary .sidebar-group-chevron { transform: rotate(180deg); } /* Icone/testo di sottomenu e sotto-sottomenu alla stessa dimensione del menu principale (solo l'indentazione li distingue). L'indentazione usa la stessa formula a base --rail-offset SIA espansa che contratta (mai un valore diverso per stato), così le icone non si spostano di qualche pixel quando la sidebar si contrae/espande — stesso principio di .sidebar-link qui sopra. */ .sidebar-submenu { display: flex; flex-direction: column; gap: 0.125rem; margin-top: 0.125rem; } .sidebar-submenu .sidebar-link { padding-left: calc(var(--rail-offset) - 0.75rem + var(--rail-child-indent)); } /* Terzo livello (es. Gruppi sotto Classi): sempre visibile, senza un proprio toggle — solo un'indentazione ulteriore rispetto al secondo livello. */ .sidebar-subsubmenu { display: flex; flex-direction: column; gap: 0.125rem; } .sidebar-subsubmenu .sidebar-link { padding-left: calc(var(--rail-offset) - 0.75rem + var(--rail-child-indent) * 2); } html.sidebar-collapsed .sidebar-group-chevron { display: none; } .sidebar-footer { flex: none; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem; border-top: 1px solid var(--border); } /* ---------- Sidebar compressa (stile Gmail) ---------- */ /* La topbar (logo, nome scuola, hamburger, utente) resta invariata: solo la colonna sotto si restringe, così cliccare l'hamburger non sposta nulla sopra di essa. */ html.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); } html.sidebar-collapsed .sidebar-link-label { display: none; } /* Il padding-left di .sidebar-link (e dei sottomenu) è già lo stesso valore in entrambi gli stati — vedi sopra — quindi qui non serve più alcun override: le icone restano fisse a --rail-offset dal bordo, la stessa distanza usata dall'hamburger in alto, senza spostarsi contraendo. */ /* Tooltip a comparsa per la sidebar contratta: creato/posizionato via JS e agganciato a (non a .sidebar-link), perché .sidebar ha overflow-x:hidden per lo scroll verticale del menu e ritaglierebbe un ::after posizionato a destra dell'icona. Stile qui, logica in fondo alla pagina (funzione showSidebarTooltip). */ .sidebar-tooltip { position: fixed; background: var(--slate-800, #1e293b); color: #f8fafc; font-size: 0.75rem; font-weight: 500; padding: 0.35rem 0.6rem; border-radius: 0.35rem; white-space: nowrap; pointer-events: none; z-index: 250; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* Footer stile GitHub: discreto, centrato, sotto il contenuto. */ .app-footer { flex: none; padding: 1.25rem 1.5rem; border-top: 1px solid var(--border); text-align: center; } .app-footer-line { margin: 0.25rem 0; font-size: 0.8rem; color: var(--text-muted); } .app-footer-brand { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-muted); font-weight: 600; } .app-footer-brand img { display: block; } .app-footer-links { display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; } .main-content { flex: 1; padding: 1.5rem; max-width: 72rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; } /* ---------- Elementi comuni ---------- */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .page-title { font-size: 1.25rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 0.5rem; } .page-title-icon { display: inline-flex; flex: none; color: var(--text-muted); } .page-title-icon svg { width: 1.15rem; height: 1.15rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; overflow-x: auto; } .card-narrow { max-width: 32rem; } .flash { border-radius: 0.5rem; padding: 0.65rem 1rem; font-size: 0.875rem; border: 1px solid transparent; } .flash-success { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-700); } .flash-error { background: var(--red-50); border-color: var(--red-200); color: var(--red-700); } .flash-warning { background: var(--amber-50); border-color: var(--amber-200); color: var(--amber-700); } .empty-state { color: var(--text-muted); font-size: 0.9rem; margin: 0; } .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; } .btn-primary { background: var(--teal-600); color: var(--white); } .btn-primary:hover { background: var(--teal-700); } .btn-secondary { background: var(--surface); color: var(--text-body); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-alt); } .btn-danger { background: var(--red-600); color: var(--white); } .btn-danger:hover { background: var(--red-700, var(--red-600)); filter: brightness(0.92); } .btn-block { width: 100%; justify-content: center; } .link { font-size: 0.85rem; color: var(--teal-700); } .link:hover { text-decoration: underline; } .table-title-link { color: var(--teal-700); } .table-title-link:hover { text-decoration: underline; } .link-danger { color: var(--red-600); background: none; border: none; padding: 0; font: inherit; cursor: pointer; } .link-danger:hover { text-decoration: underline; } .link-underline { text-decoration: underline; } /* ---------- Form ---------- */ .form-stack { display: flex; flex-direction: column; gap: 1rem; } .form-inline { display: flex; align-items: center; gap: 0.5rem; } .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; } .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; border: 1px solid var(--border-strong); border-radius: 0.5rem; padding: 0.75rem; max-height: 16rem; overflow-y: auto; } .checkbox-option { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; } .lesson-mode-choice { display: flex; gap: 1.25rem; flex-wrap: wrap; } .nav-visibility-list { display: flex; flex-direction: column; gap: 0.5rem; } .nav-visibility-item { padding: 0.15rem 0; } .nav-visibility-icon { flex: none; width: 18px; height: 18px; display: flex; opacity: 0.85; } .nav-visibility-icon svg { width: 100%; height: 100%; } .form-label { display: block; font-size: 0.825rem; font-weight: 500; color: var(--text-body); margin-bottom: 0.3rem; } .form-label.required::after { content: " *"; color: var(--red-600); } .form-input { width: 100%; border: 1px solid var(--border-strong); border-radius: 0.5rem; padding: 0.5rem 0.7rem; font-size: 0.9rem; font-family: inherit; background: var(--surface); color: var(--text); } .form-input:focus { outline: 2px solid var(--teal-600); outline-offset: 1px; } .form-input-compact { width: auto; padding: 0.4rem 0.6rem; font-size: 0.85rem; } .form-error { color: var(--red-600); font-size: 0.8rem; margin: 0.25rem 0 0; } .profile-photo-preview { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-strong); } .profile-photo-thumb { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 0.4rem; } .lesson-more-options { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem 1rem; } .lesson-more-options summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text); list-style: none; } .lesson-more-options summary::-webkit-details-marker { display: none; } .lesson-more-options summary::before { content: '▸ '; } .lesson-more-options[open] summary::before { content: '▾ '; } .lesson-more-options > div, .lesson-more-options > div + div { margin-top: 1rem; } .form-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.25rem; } .help-group + .help-group { margin-top: 1rem; } .help-topic { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.6rem 0.9rem; margin-top: 0.6rem; } .help-topic summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--text); list-style: none; } .help-topic summary::-webkit-details-marker { display: none; } .help-topic summary::before { content: '▸ '; } .help-topic[open] summary::before { content: '▾ '; } .help-topic-body { margin-top: 0.75rem; font-size: 0.9rem; line-height: 1.55; } .help-topic-body p + p { margin-top: 0.6rem; } .form-actions-spacer { flex: 1; } .lesson-blocks-container { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; } .lesson-block-row { border: 1px solid var(--border-strong); border-radius: 0.5rem; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .lesson-block-row-header { display: flex; align-items: center; gap: 0.5rem; } .lesson-block-row-header select { flex: 1; } .lesson-block-row-header input[type="text"] { flex: 1; } .lesson-block-row-header .checkbox-option { flex: none; white-space: nowrap; } .lesson-block-type-icon { flex: none; width: 20px; height: 20px; opacity: 0.8; } .lesson-block-type-icon svg { width: 100%; height: 100%; } .lesson-assignment-section { border: 1px solid var(--border-strong); border-radius: 0.5rem; padding: 0.85rem; } .lesson-assignment-group-card { border: 1px solid var(--border-strong); margin-bottom: 1.25rem; } .lesson-assignment-group-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .lesson-assignment-group-header .dashboard-section-title { margin: 0; } .lesson-assignment-group-students { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.6rem 0.75rem; margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; max-height: 12rem; overflow-y: auto; } .lesson-assignment-group-editor { margin: 0.75rem 0; } .lesson-assignment-group-description { width: 100%; min-height: 120px; } .lesson-assignment-group-interactive-title { font-weight: 600; margin: 1.25rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border); } /* ---------- Campi anagrafici ripetibili (telefoni/email/documenti/indirizzi) ---------- */ .repeatable-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; } .repeatable-row { display: flex; align-items: center; gap: 0.5rem; } .repeatable-row .form-inline { flex: 1; flex-wrap: wrap; } .repeatable-row-address { align-items: flex-start; } .repeatable-row-fields { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .repeatable-row-remove { flex: none; font-size: 1.1rem; line-height: 1; padding: 0.3rem 0.4rem; } .section-divider { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; } /* ---------- Pagina classe/gruppo a 4 tab ---------- */ .tab-nav { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; } .tab-nav-item { padding: 0.6rem 1rem; color: var(--text-muted); border-bottom: 2px solid transparent; font-size: 0.9rem; font-weight: 500; } .tab-nav-item:hover { color: var(--text); } .tab-nav-item-active { color: var(--teal-600); border-bottom-color: var(--teal-600); } .lesson-notes-content { margin-bottom: 0.75rem; } .lesson-notes-content img { max-width: 100%; } .lesson-activity-media { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; font-size: 0.9rem; } .lesson-activity-card { background: var(--surface-alt); border-radius: 0.5rem; padding: 0.75rem 0.9rem; margin-bottom: 0.75rem; } .lesson-activity-title { font-size: 0.95rem; margin-bottom: 0.4rem; } .lesson-activity-question { margin-bottom: 0.6rem; } .lesson-activity-question p { margin-bottom: 0.3rem; font-size: 0.9rem; } .lesson-activity-question .checkbox-option { margin-bottom: 0.2rem; } .lesson-posts { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.75rem 0; } .lesson-post { background: var(--surface-alt); border-radius: 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.875rem; } .lesson-post p { margin-top: 0.25rem; } .materials-list { display: flex; flex-direction: column; gap: 0.5rem; } .material-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .material-row:last-child { border-bottom: none; } .material-icon { flex: none; width: 24px; height: 24px; opacity: 0.8; } .material-icon svg { width: 100%; height: 100%; } .material-info { flex: 1; min-width: 0; } .people-list { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; padding: 0; margin: 0; font-size: 0.9rem; } .people-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .people-list li:last-child { border-bottom: none; } /* ---------- Tabelle ---------- */ .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table th { text-align: left; padding: 0.5rem 0.75rem; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); } .table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .table-actions { display: flex; gap: 0.75rem; align-items: center; } .search-result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .badge { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--teal-700); background: var(--teal-50); border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; } /* ---------- Login / errori (schermate senza sidebar) ---------- */ .login-screen, .error-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; gap: 1.25rem; } /* Logo + nome scuola sopra il riquadro di login, stile GitHub. */ .login-header { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .login-header-logo { width: 3rem; height: 3rem; object-fit: contain; } .login-header-name { font-size: 1.2rem; font-weight: 600; color: var(--text); } .login-card, .error-card { width: 100%; max-width: 24rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 2rem; text-align: center; } .login-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 1.25rem; text-align: left; } .login-card form { text-align: left; } .login-password-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .login-password-row .link { font-size: 0.8rem; } /* Secondo riquadro sotto il login, stile GitHub, per "Non hai un account?". */ .login-secondary-card { width: 100%; max-width: 24rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.1rem; text-align: center; font-size: 0.85rem; color: var(--text-muted); } .error-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.5rem; } .error-body { color: var(--text-muted); margin: 0 0 1.25rem; } /* ---------- Bacheca / messaggi ---------- */ .announcement + .announcement { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .announcement-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.2rem; } .announcement-meta { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.5rem; } .announcement-body { margin: 0; white-space: pre-line; } .message-unread td { font-weight: 600; } /* ---------- Dashboard / Bacheca ---------- */ .dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } .dashboard-stat { display: flex; flex-direction: column; gap: 0.2rem; } .dashboard-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--teal-700); } .dashboard-stat-label { font-size: 0.8rem; color: var(--text-muted); } /* Riepilogo a barre orizzontali proporzionali (Statistiche, Contabilità): niente libreria grafica. */ .bar-chart { display: flex; flex-direction: column; gap: 0.6rem; } .bar-chart-row { display: grid; grid-template-columns: 130px 1fr 80px; align-items: center; gap: 0.6rem; font-size: 0.85rem; } .bar-chart-label { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-chart-track { background: var(--surface-alt); border-radius: 999px; height: 10px; overflow: hidden; } .bar-chart-fill { height: 100%; border-radius: 999px; } .bar-chart-value { text-align: right; font-weight: 600; } @media (max-width: 560px) { .bar-chart-row { grid-template-columns: 90px 1fr 60px; font-size: 0.8rem; } } .finance-category-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .finance-category-subtitle { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.75rem; } /* Riquadri di navigazione rapida in cima alla Bacheca (Calendario/Lezioni/ Messaggi): stessa griglia di .dashboard-stats, ma icona+etichetta invece di un numero — pensati per "andare da qualche parte", non per leggere una statistica. */ .dashboard-nav-tile { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; font-weight: 600; color: var(--text); } .dashboard-nav-tile:hover { border-color: var(--teal-600); color: var(--teal-700); } .dashboard-nav-tile-icon { flex: none; width: 28px; height: 28px; color: var(--teal-600); } .dashboard-nav-tile-icon svg { width: 100%; height: 100%; } .dashboard-nav-tile-label { display: flex; align-items: center; gap: 0.5rem; } .dashboard-nav-tile-badge { background: var(--red-600); color: var(--white); font-size: 0.7rem; font-weight: 700; min-width: 1.2rem; height: 1.2rem; padding: 0 0.35rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .dashboard-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .dashboard-section-title { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; } .dashboard-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; } .dashboard-shortcut { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border-strong); border-radius: 0.5rem; font-size: 0.88rem; color: var(--text-body); } .dashboard-shortcut:hover { border-color: var(--teal-600); color: var(--teal-700); } .dashboard-shortcut-icon { flex: none; width: 20px; height: 20px; display: flex; opacity: 0.85; } .dashboard-shortcut-icon svg { width: 100%; height: 100%; } /* ---------- Impostazioni ---------- */ .theme-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 0.5rem; overflow: hidden; } .theme-switch-option { padding: 0.45rem 1.1rem; font-size: 0.85rem; color: var(--text-body); background: var(--surface); border: none; border-left: 1px solid var(--border-strong); cursor: pointer; } .theme-switch-option:first-child { border-left: none; } .theme-switch-option:hover { background: var(--surface-alt); } .theme-switch-option-active { background: var(--teal-600); color: var(--white); } .widget-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.5rem 1rem; max-height: 26rem; overflow-y: auto; padding-right: 0.25rem; } .widget-option { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; cursor: pointer; } .widget-option-icon { flex: none; width: 18px; height: 18px; display: flex; opacity: 0.85; } .widget-option-icon svg { width: 100%; height: 100%; } .widget-option-label { flex: 1; } .widget-layout-select { flex: none; font-size: 0.8rem; padding: 0.2rem 0.4rem; border-radius: 0.4rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .widget-option-fixed-layout { flex: none; font-size: 0.8rem; color: var(--text-muted); } .settings-dashboard-preview { display: flex; flex-direction: column; gap: 1rem; background: var(--surface-sunken); border-radius: 0.75rem; padding: 1.25rem; } .settings-dashboard-preview .dashboard-stats, .settings-dashboard-preview-full { margin: 0; } .settings-dashboard-preview .dashboard-nav-tile, .settings-dashboard-preview-full { pointer-events: none; } .color-picker { display: flex; flex-wrap: wrap; gap: 0.6rem; } .color-swatch-option { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.45rem; border-radius: 0.6rem; border: 2px solid transparent; cursor: pointer; width: 3.75rem; } .color-swatch-option:has(input:disabled) { cursor: default; } /* Stato "selezionato" derivato dal radio :checked stesso (non da una classe calcolata lato server): reagisce all'istante al click, prima ancora del submit del form — altrimenti il colore appena scelto non risultava visibilmente selezionato finché la pagina non veniva ricaricata. */ .color-swatch-option:has(input:checked) { border-color: var(--teal-600); background: var(--teal-50); } .color-swatch-option:has(input:checked) .color-swatch::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .color-swatch-option input { position: absolute; opacity: 0; width: 0; height: 0; } .color-swatch { position: relative; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid rgba(0,0,0,0.1); } .color-swatch-label { font-size: 0.7rem; line-height: 1.2; min-height: 1.7rem; color: var(--text-body); text-align: center; } /* Swatch "Scegli colore": un input[type=color] nativo invisibile sovrapposto al cerchio, che mostra il colore scelto tramite lo sfondo dello span genitore (l'input in sé non è mai visibile, solo cliccabile). */ .color-swatch-custom { overflow: hidden; cursor: pointer; } .color-swatch-custom .color-swatch-native-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } /* Variante compatta: usata a fine form Nuova/Modifica lezione (swatch piccoli, senza etichetta di testo, solo title="" al passaggio del mouse). */ .color-picker-compact { gap: 0.35rem; } .color-picker-compact .color-swatch-option { width: auto; padding: 0.2rem; } .color-swatch-small { width: 1.1rem; height: 1.1rem; } .color-picker-compact .color-swatch-option:has(input:checked) .color-swatch::after { font-size: 0.65rem; } /* ---------- Calendario: toolbar comune a tutte le viste ---------- */ .calendar-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } .calendar-toolbar-nav { display: flex; align-items: center; gap: 0.6rem; } .calendar-toolbar-controls { display: flex; align-items: center; gap: 0.75rem; } .calendar-arrow { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-strong); font-size: 1.1rem; color: var(--text-body); } .calendar-arrow:hover { background: var(--surface-alt); } .calendar-range { font-size: 0.95rem; font-weight: 600; margin-left: 0.25rem; } .view-switch { display: flex; border: 1px solid var(--border-strong); border-radius: 0.5rem; overflow: hidden; } .view-switch-item { padding: 0.4rem 0.8rem; font-size: 0.8rem; color: var(--text-body); border-left: 1px solid var(--border-strong); } .view-switch-item:first-child { border-left: none; } .view-switch-item:hover { background: var(--surface-alt); } .view-switch-item-active { background: var(--teal-600); color: var(--white); } /* ---------- Calendario: vista Giorno/Settimana (griglia oraria) ---------- */ .calendar-grid-card { padding: 0; overflow: hidden; } .calendar-day-headers { display: flex; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; } .calendar-hours-col-spacer { width: 56px; flex: none; } .calendar-day-header { flex: 1; text-align: center; padding: 0.6rem 0.25rem; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.15rem; } .calendar-day-header-name { font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.03em; } .calendar-day-header-num { font-size: 1.05rem; font-weight: 600; } .calendar-day-header-today .calendar-day-header-num { color: var(--white); background: var(--teal-600); border-radius: 999px; width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; } .calendar-grid-wrapper { display: flex; overflow-x: auto; } .calendar-hours-col { width: 56px; flex: none; position: relative; } .calendar-hour-label { position: absolute; right: 0.5rem; transform: translateY(-50%); font-size: 0.7rem; color: var(--text-muted); } .calendar-days-row { flex: 1; display: flex; min-width: 640px; } .calendar-day-col { flex: 1; position: relative; border-left: 1px solid var(--border); cursor: pointer; } .calendar-day-col-today { background: var(--teal-50); } .calendar-hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); } .calendar-event { position: absolute; background: var(--teal-600); color: var(--white); border-radius: 0.35rem; padding: 0.15rem 0.4rem; font-size: 0.72rem; line-height: 1.25; overflow: hidden; cursor: default; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .calendar-event-time { font-weight: 600; margin-right: 0.25rem; } .calendar-event-subject { font-weight: 600; } .calendar-event-teacher { display: block; opacity: 0.85; } /* ---------- Calendario: vista Mese ---------- */ .calendar-month-card { padding: 0; } .calendar-month-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); } .calendar-month-weekday { text-align: center; padding: 0.6rem 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } .calendar-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-month-cell { min-height: 110px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); padding: 0.4rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; } .calendar-month-cell-outside { background: var(--surface-sunken); color: var(--text-muted); } .calendar-month-cell-today { background: var(--teal-50); } .calendar-month-cell-num { font-size: 0.85rem; font-weight: 600; } .calendar-month-event { background: var(--teal-600); color: var(--white); border-radius: 0.3rem; padding: 0.1rem 0.35rem; font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calendar-month-event-time { font-weight: 600; margin-right: 0.2rem; } .calendar-month-more { font-size: 0.7rem; color: var(--text-muted); } /* ---------- Statistiche: calendario multi-classe/insegnante ---------- */ .stats-calendar-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; } .stats-calendar-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; padding-top: 0.4rem; } .stats-calendar-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text); cursor: pointer; } .stats-calendar-swatch { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; } .stats-calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin-top: 1rem; } .stats-calendar-week-day { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem; min-height: 6rem; display: flex; flex-direction: column; gap: 0.3rem; } .stats-calendar-week-day-today { background: var(--teal-50); border-color: var(--teal-600); } .stats-calendar-week-day-selected { box-shadow: 0 0 0 2px var(--teal-600) inset; } a.stats-calendar-week-day:hover { border-color: var(--teal-600); } .stats-calendar-week-day-header { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); display: flex; justify-content: space-between; } .stats-calendar-week-day-num { color: var(--text); } .stats-calendar-week-empty { font-size: 0.72rem; margin: 0.2rem 0 0; } .stats-calendar-week-event { background: var(--teal-600); color: var(--white); border-radius: 0.3rem; padding: 0.2rem 0.4rem; font-size: 0.72rem; line-height: 1.3; } .stats-calendar-week-event-time { font-weight: 600; margin-right: 0.25rem; } @media (max-width: 720px) { .stats-calendar-week { grid-template-columns: repeat(2, 1fr); } } /* ---------- Calendario: vista Agenda ---------- */ .calendar-agenda-day { display: flex; gap: 1.25rem; } .calendar-agenda-day + .calendar-agenda-day { margin-top: -0.5rem; } .calendar-agenda-date { flex: none; width: 4rem; text-align: center; padding-top: 0.1rem; } .calendar-agenda-weekday { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); } .calendar-agenda-daynum { display: block; font-size: 1rem; font-weight: 600; } .calendar-agenda-date-today .calendar-agenda-daynum { color: var(--teal-700); } .calendar-agenda-list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .calendar-agenda-item { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.4rem 0.6rem; background: var(--surface-sunken); border-radius: 0.5rem; font-size: 0.85rem; border-left: 4px solid var(--calendar-agenda-item-color, var(--teal-600)); } .calendar-agenda-time { font-weight: 600; color: var(--teal-700); flex: none; } .calendar-agenda-subject { font-weight: 500; } .calendar-agenda-teacher { color: var(--text-muted); font-size: 0.8rem; } /* ---------- Modale di creazione rapida ---------- */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 10; } .modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 2rem); max-width: 26rem; max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--surface); border-radius: 0.75rem; padding: 1.5rem; z-index: 11; box-shadow: 0 10px 30px rgba(0,0,0,0.4); } .modal-backdrop.modal-open, .modal.modal-open { display: block; } .modal-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.25rem; } .modal-subtitle { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 1rem; } .modal-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } /* ---------- Strumenti: Visualizza PDF ---------- */ .pdf-frame { width: 100%; height: 800px; border: 1px solid var(--border-strong); border-radius: 0.5rem; } .pdf-mobile-hint { display: none; } @media (max-width: 768px) { .pdf-frame { display: none; } .pdf-mobile-hint { display: block; } } /* ---------- Strumenti: editor di testo / note (TinyMCE + TipTap) ---------- */ .editor-toolbar-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .editor-export-bar { margin-top: 1rem; padding: 1rem; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 0.5rem; } .editor-export-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; } .editor-page-options { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border-strong); font-size: 0.8rem; color: var(--text-muted); } .editor-page-options .form-input-compact { margin-left: 0.35rem; } /* ---------- Strumenti: libri-gioco ---------- */ .gamebook-choice-row { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; } .gamebook-choice-row .form-input { flex: 1; } .gamebook-choice-row input[type="number"] { max-width: 5rem; flex: none; } /* ---------- Strumenti: lettore libro-gioco (bleed fuori dal padding normale) ---------- */ .lg-lettura { font-family: Georgia, 'Times New Roman', serif; background: #f3ede1; margin: -1.5rem; min-height: calc(100vh - var(--topbar-height) - 3rem); color: #2b2015; } .lg-barra { background: #2b2015; color: #f3ede1; padding: 0.6rem 1rem; display: flex; justify-content: space-between; align-items: center; font-family: Arial, sans-serif; font-size: 0.85rem; gap: 1rem; } .lg-barra a { color: #f3ede1; } .lg-barra-azioni { display: flex; align-items: center; gap: 1rem; } .lg-schermo-intero { background: transparent; border: 1px solid #f3ede1; color: #f3ede1; padding: 0.3rem 0.6rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.8rem; font-family: Arial, sans-serif; } .lg-schermo-intero:hover { background: rgba(255,255,255,0.1); } .lg-pagina { max-width: 40rem; margin: 1.75rem auto; background: #fffdf8; border: 1px solid #d8cdb8; box-shadow: 0 2px 10px rgba(0,0,0,0.15); padding: 2.5rem 3rem; } .lg-pagina .numero { font-size: 1.6rem; font-weight: bold; text-align: center; margin-bottom: 1.5rem; border-bottom: 2px solid #2b2015; padding-bottom: 0.75rem; } .lg-pagina .testo { font-size: 1.15rem; line-height: 1.7; margin-bottom: 1.75rem; } .lg-pagina .testo p, .lg-pagina .testo li { font-size: 1.15rem; margin: 0 0 0.8em; } .lg-pagina .testo ul, .lg-pagina .testo ol { margin: 0 0 0.8em; padding-left: 1.4em; } .lg-pagina .scelte { border-top: 1px dashed #a89a7d; padding-top: 1.25rem; } .lg-pagina .scelta { margin-bottom: 0.75rem; font-size: 1.05rem; } .lg-pagina .scelta a { color: #7a3b1e; font-weight: bold; } .lg-pagina .scelta a:hover { text-decoration: underline; } .lg-pagina .scelta .mancante { color: #999; font-style: italic; } .lg-pagina .finale { text-align: center; font-size: 1.35rem; font-weight: bold; letter-spacing: 0.25em; color: #7a3b1e; } .lg-pagina .torna { margin-top: 1.25rem; font-size: 0.8rem; } .lg-pagina .torna a { color: #6b7280; } @media (max-width: 640px) { .lg-pagina { margin: 0.75rem; padding: 1.5rem; } } /* ---------- Strumenti: mappa libro-gioco (grafo SVG) ---------- */ .gamebook-map-toolbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .gamebook-map-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.82rem; color: var(--text-body); } .gamebook-map-legend-item { display: flex; align-items: center; gap: 0.4rem; } .gamebook-map-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; } .gamebook-map-swatch-normal { background: var(--surface); border: 1.5px solid var(--border-strong); } .gamebook-map-swatch-ending { background: var(--teal-50); border: 1.5px solid var(--teal-600); } .gamebook-map-swatch-unreachable { background: var(--amber-50); border: 1.5px dashed var(--amber-700); } .gamebook-map-swatch-ghost { background: var(--red-50); border: 1.5px dashed var(--red-600); } .gamebook-map-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--surface); max-height: 75vh; } .gamebook-map-wrap:focus { outline: 2px solid var(--teal-600); outline-offset: -2px; } .gamebook-map-wrap:fullscreen { max-height: 100vh; background: var(--surface); } .gamebook-map-wrap svg a { cursor: pointer; } .gamebook-map-wrap text { font-family: inherit; user-select: none; } .gamebook-map-node-rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; transition: stroke 0.1s ease; } .gamebook-map-wrap a:hover .gamebook-map-node-rect { stroke: var(--teal-600); stroke-width: 2; } .gamebook-map-node-start { stroke: var(--teal-600); stroke-width: 2.5; } .gamebook-map-node-ending { fill: var(--teal-50); stroke: var(--teal-600); } .gamebook-map-node-unreachable { fill: var(--amber-50); stroke: var(--amber-700); stroke-dasharray: 5 3; } .gamebook-map-node-ghost { fill: var(--red-50); stroke: var(--red-600); stroke-dasharray: 5 3; } .gamebook-map-wrap a:hover .gamebook-map-node-ghost { stroke-width: 2; } .gamebook-map-node-number { font-size: 13px; font-weight: 700; fill: var(--text); } .gamebook-map-node-text { font-size: 12px; fill: var(--text-body); } .gamebook-map-node-ending-label { font-size: 11px; font-weight: 700; fill: var(--teal-700); } .gamebook-map-node-ghost-cta { font-size: 11px; fill: var(--red-600); text-decoration: underline; } .gamebook-map-edge-normal { stroke: var(--text); stroke-width: 1.5; } .gamebook-map-edge-back { stroke: #3b5bdb; stroke-width: 1.5; } .gamebook-map-edge-missing { stroke: var(--red-600); stroke-width: 1.5; stroke-dasharray: 5 3; } .gamebook-map-edge-normal-fill { fill: var(--text); } .gamebook-map-edge-back-fill { fill: #3b5bdb; } .gamebook-map-edge-missing-fill { fill: var(--red-600); } /* ---------- Strumenti: giochi didattici (contenitore pagina) ---------- Lo stile del motore di gioco vero e proprio (cartuccia, HUD, temi) vive in un foglio dedicato, games_theme.css, non qui in app.css, per poterlo caricare solo sulle pagine che ospitano un gioco. */ .game-play-page { max-width: 46rem; margin: 0 auto; } .game-play-back { margin-bottom: 0.75rem; } /* ---------- Attività interattive della lezione (Video incorporato, Gioco didattico, Carica file, Quiz, Sondaggio, Scelta rapida) ---------- */ .lesson-interactive-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--border); } .lesson-interactive-toggle:first-of-type { border-top: none; } .lesson-interactive-toggle-label { font-weight: 500; } h4.lesson-interactive-toggle-label { margin: 1rem 0 0.4rem; font-size: 0.95rem; } .lesson-interactive-section { margin: 0.5rem 0 1.25rem; } .is-item-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.6rem; } .is-empty { color: var(--text-muted); font-style: italic; padding: 0.75rem; border: 1px dashed var(--border-strong); border-radius: 0.4rem; text-align: center; } .is-card { border: 1px solid var(--border-strong); border-left: 4px solid var(--teal-600); border-radius: 0.4rem; background: var(--surface-alt); padding: 0.75rem 0.9rem; } .is-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; font-weight: 600; font-size: 0.8rem; } .is-card-controls { display: flex; gap: 0.25rem; } .is-icon-btn { width: 1.6rem; height: 1.6rem; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 0.25rem; cursor: pointer; font-size: 0.85rem; line-height: 1; color: var(--text); } .is-icon-btn:hover { background: var(--surface-sunken); } .is-btn-danger { border-color: var(--red-600); color: var(--red-600); } .is-btn-danger:hover { background: var(--red-50); } .is-field { margin-bottom: 0.5rem; } .is-field label { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.2rem; } .is-input, .is-textarea, .is-select { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 0.3rem; font-size: 0.85rem; box-sizing: border-box; font-family: inherit; background: var(--surface); color: var(--text); } .is-textarea { min-height: 4.2rem; } .is-input-number { width: 6rem; } .is-settings-row { display: flex; gap: 0.6rem; } .is-settings-row .is-field { flex: 1; } .is-checkbox-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; margin: 0.5rem 0; } .is-hint { font-size: 0.75rem; color: var(--text-muted); margin: 0.25rem 0; } .is-btn { padding: 0.45rem 0.9rem; border: 1px solid var(--teal-600); background: var(--teal-600); color: #fff; border-radius: 0.3rem; cursor: pointer; font-size: 0.85rem; } .is-btn:hover { filter: brightness(0.94); } .is-btn-small { padding: 0.25rem 0.6rem; font-size: 0.75rem; } .is-btn-add { margin-top: 0.25rem; } .is-domande-wrap { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); } .is-domanda-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0.4rem; padding: 0.6rem; margin-bottom: 0.5rem; } .is-domanda-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.4rem; } .is-opzioni-wrap { margin-top: 0.4rem; } .is-opzione-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; } .is-opzione-row .is-input { flex: 1; } .is-vf-wrap { display: flex; gap: 1.25rem; margin: 0.4rem 0; } .is-radio-label { display: flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; } /* ---------- Costruttore giochi didattici: anteprima live ---------- */ .game-preview-frame { background: var(--surface-sunken); border-radius: 0.75rem; padding: 2rem 1.5rem; display: flex; justify-content: center; } .game-preview-frame #previewHost { width: 100%; max-width: 420px; } /* ---------- Costruttore giochi didattici: campo con emoji/immagine, righe dinamiche ---------- */ .cgd-field-row { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; } .cgd-field-row .form-input { flex: 1; } .cgd-icon-btn { flex: none; width: 2.1rem; height: 2.1rem; border: 1px solid var(--border-strong); border-radius: 0.4rem; background: var(--surface); cursor: pointer; font-size: 1rem; line-height: 1; } .cgd-icon-btn:hover { background: var(--surface-alt); } .cgd-row-block { position: relative; border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.85rem 2.25rem 0.85rem 0.85rem; margin-bottom: 0.75rem; background: var(--surface-alt); } .cgd-row-remove { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; } .cgd-row-remove:hover { background: var(--red-50); color: var(--red-600); } .cgd-inline-fields { display: flex; gap: 0.75rem; } .cgd-inline-fields > div { flex: 1; } .cgd-add-btn { margin-top: 0.25rem; } .cgd-generate-btn { margin: 0.5rem 0 1rem; } .cgd-option-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; } .cgd-option-row input[type="radio"] { flex: none; } .cgd-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin: 0.75rem 0; } .cgd-thumb { border: 2px solid var(--border-strong); border-radius: 0.5rem; padding: 0.5rem; cursor: pointer; background: var(--surface); text-align: center; font-size: 0.75rem; } .cgd-thumb-selected { border-color: var(--teal-600); background: var(--teal-50); } .cgd-thumb-grid-cells { display: grid; gap: 1px; margin: 0 auto 0.4rem; background: var(--border); } .cgd-thumb-cell { width: 12px; height: 12px; background: var(--surface); } .cgd-thumb-cell-filled { background: var(--teal-200); } /* ---------- Selettore emoji / immagine (overlay condiviso) ---------- */ .emoji-picker-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 10000; align-items: center; justify-content: center; padding: 1rem; } .emoji-picker-panel { background: var(--surface); border-radius: 0.75rem; width: 100%; max-width: 24rem; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; } .image-picker-panel { max-width: 36rem; } .emoji-picker-header { display: flex; gap: 0.5rem; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--border); } .emoji-picker-header .form-input { flex: 1; } .emoji-picker-close { border: none; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--text-muted); } .emoji-picker-tabs { display: flex; gap: 0.25rem; overflow-x: auto; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); } .emoji-picker-tab { flex: none; border: none; background: var(--surface-alt); border-radius: 0.4rem; padding: 0.3rem 0.5rem; cursor: pointer; font-size: 0.9rem; } .emoji-picker-tab-active { background: var(--teal-600); color: var(--white); } .emoji-picker-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.25rem; padding: 0.75rem; } .emoji-picker-btn { border: none; background: none; font-size: 1.3rem; padding: 0.3rem; border-radius: 0.3rem; cursor: pointer; } .emoji-picker-btn:hover { background: var(--surface-alt); } .image-picker-results { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.5rem; padding: 0.75rem; } .image-picker-card { border: 1px solid var(--border-strong); border-radius: 0.4rem; padding: 0; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: var(--surface-alt); } .image-picker-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .image-picker-detail { padding: 1rem; text-align: center; } .image-picker-pager { display: flex; justify-content: space-between; padding: 0.6rem 0.75rem; border-top: 1px solid var(--border); } @media (max-width: 640px) { .cgd-inline-fields { flex-direction: column; gap: 0; } .emoji-picker-grid { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 640px) { /* .calendar-toolbar-controls non va in wrap da sola (è un unico elemento flex agli occhi di .calendar-toolbar): senza questo, il filtro insegnante + i pulsanti vista non si accapigliano su più righe e forzano l'intera pagina a un viewport più largo dello schermo. */ .calendar-toolbar-controls { flex-wrap: wrap; } } /* ---------- Marketing ---------- */ .marketing-subnav { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0; } .marketing-subnav-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; } .marketing-subnav-help { font-size: 0.85rem; color: var(--teal-700); white-space: nowrap; padding: 0.5rem 0; } .marketing-subnav-help:hover { text-decoration: underline; } .marketing-subnav-item { padding: 0.5rem 0.9rem; font-size: 0.9rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .marketing-subnav-item:hover { color: var(--text); } .marketing-subnav-item-active { color: var(--teal-700); border-bottom-color: var(--teal-600); font-weight: 600; } .marketing-status { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .marketing-status-iscritto { background: var(--teal-50); color: var(--teal-700); } .marketing-status-in_attesa { background: var(--slate-100, #f1f5f9); color: var(--text-muted); } .marketing-status-disiscritto { background: var(--slate-100, #f1f5f9); color: var(--text-muted); } .marketing-status-bounced { background: var(--red-50); color: var(--red-600); } .marketing-status-reclamo { background: var(--red-50); color: var(--red-600); } .marketing-status-bozza { background: var(--slate-100, #f1f5f9); color: var(--text-muted); } .marketing-status-invio { background: var(--teal-50); color: var(--teal-700); } .marketing-status-inviata { background: var(--teal-50); color: var(--teal-700); } .marketing-preview-body { border: 1px solid var(--border); border-radius: 0.5rem; padding: 1.25rem; margin-top: 0.75rem; background: var(--surface); } @media (max-width: 640px) { .marketing-subnav-tabs { overflow-x: auto; flex-wrap: nowrap; } .marketing-subnav-item { flex: none; } .marketing-preview-body { padding: 1rem; } } /* ---------- Responsive ---------- */ .sidebar-mobile-backdrop { display: none; position: fixed; inset: var(--topbar-height) 0 0 0; background: rgba(15, 23, 42, 0.45); z-index: 19; } /* Sotto gli 860px la sidebar diventa un cassetto a scomparsa (stile Gmail mobile): niente più rail a sole icone, che non ha spazio per i sottomenu. L'hamburger apre/chiude il cassetto invece di comprimere/espandere. */ @media (max-width: 860px) { .topbar-left { padding: 0 0.5rem 0 0.75rem; min-width: 0; } .sidebar-brand-name { display: none; } /* Sotto i ~400px anche il blocco nome+ruolo con le icone in .topbar-right eccede la larghezza disponibile (nessun figlio si restringe di default in un flex row): meno padding/gap, testo troncato con ellissi invece di spingere il layout fuori dallo schermo. */ .topbar-right { padding: 0 0.75rem; gap: 0.5rem; min-width: 0; } .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38vw; } .sidebar { position: fixed; top: var(--topbar-height); left: 0; width: 260px; height: calc(100vh - var(--topbar-height)); transform: translateX(-100%); transition: transform 0.2s ease; z-index: 20; box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2); } html.sidebar-mobile-open .sidebar { transform: translateX(0); } html.sidebar-mobile-open .sidebar-mobile-backdrop { display: block; } .main-content { padding: 1rem; } .dashboard-stats { grid-template-columns: 1fr 1fr; } /* .lg-lettura/.game-play usano un margine negativo per "sforare" il padding di .main-content: deve corrispondere a quello di questo breakpoint, altrimenti si crea overflow orizzontale. */ .lg-lettura, .game-play:not(.game-play-standalone) { margin: -1rem; } }