@charset "UTF-8";
/* Tema bianco e nero: caricato DOPO main.css, ne sovrascrive l'aspetto.
   Le classi di layout di main.css (row, col, flex-*) restano valide dove ancora usate. */

:root {
    --ink        : #3d3d3d;
    --ink-soft   : #4d4d4d;
    --text       : #333333;
    --muted      : #6e6e6e;
    --faint      : #a5a5a5;
    --line       : #e7e7e7;
    --line-strong: #d2d2d2;
    --bg         : #f5f5f4;
    --surface    : #ffffff;
    --hover      : #f6f6f6;
    --radius     : 12px;
    --radius-sm  : 8px;
}

/* main.css imposta colore, dimensione e transizione su "*": li riporto all'ereditarieta' */
* {
    color: inherit;
    font-size: inherit;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s;
}

body {
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- struttura ---------- */

/* intestazione in alto su tutta la larghezza, sotto menu e pagina */
body:has(> .topbar) { height: 100vh; overflow: hidden; }
.topbar {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
/* il nome del sito come nella home pubblica (landing.css .lp-brand). Occupa la larghezza della sidebar,
   cosi' il divisore cade sul bordo destro della sidebar e lo continua fino in cima */
.topbar-brand { flex: 0 0 207px; font-size: 20px; font-weight: 800; letter-spacing: -.035em; color: var(--accent, #635bff); text-decoration: none; }
.topbar-sep { align-self: stretch; width: 1px; background: var(--line); }
.topbar-org { margin-left: 40px; } /* allineato al contenuto della pagina (padding di .main) */
/* sidebar chiusa (solo icone): il nome non ci sta, il divisore torna una riga corta dopo il nome */
body:has(.app.sidebar-collapsed) .topbar-brand { flex-basis: auto; }
body:has(.app.sidebar-collapsed) .topbar-sep { align-self: center; height: 24px; margin: 0 18px; background: var(--line-strong); }
body:has(.app.sidebar-collapsed) .topbar-org { margin-left: 0; }
.topbar-org  { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 500; color: var(--muted); }

.app {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100vw;
    overflow: hidden;
}

.sidebar {
    flex: 0 0 232px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 12px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    color: var(--muted);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.nav-item:hover  { background: var(--hover); color: var(--ink); }
.nav-item.active { background: var(--line); color: var(--ink); font-weight: 600; }
/* "Crea diretta" nel menu: ultima voce, staccata da una riga grigio chiaro, in viola */
.nav-create { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.nav-create .nav-item,
.nav-create .nav-item:hover { color: var(--accent, var(--ink)); font-weight: 600; }
.nav-create .nav-item:hover { background: var(--accent-soft, var(--hover)); }

.sidebar-spacer { flex: 1; }

.sidebar-user {
    position: relative;
    margin: 8px 0 4px;
    padding: 12px 4px 4px 8px;
    border-top: 1px solid var(--line);
}
.sidebar-user-row { display: flex; align-items: center; gap: 10px; }
.sidebar-avatar {
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 8px; /* come le iniziali nelle intestazioni delle pagine (.hero-initials), in piccolo */
    background: var(--ink-soft);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
.sidebar-user-text { flex: 1; min-width: 0; }
.sidebar-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.sidebar-user-role { font-size: 12px; color: var(--muted); }
.sidebar-user-org  { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 42px; }
.sidebar-user-org > :first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
}
.sidebar-icon-btn:hover { background: var(--hover); color: var(--ink); }

.main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: var(--surface);
    padding: 32px 40px 56px;
}

/* ---------- icone (svg di static/icons usati come maschera: prendono il colore del testo) ---------- */

.ico {
    flex: 0 0 auto;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
            mask: var(--ico) center / contain no-repeat;
}
/* tutte le icone sono Lucide 0.469.0 (file in static/icons/lucide), usate come maschera: prendono il colore del testo */
.ico-search      { --ico: url('/static/icons/lucide/search.svg'); }
.ico-x           { --ico: url('/static/icons/lucide/x.svg'); }
.ico-trash       { --ico: url('/static/icons/lucide/trash-2.svg'); }
.ico-archive     { --ico: url('/static/icons/lucide/archive.svg'); } /* Archivia / Ripristina (superadmin) */
.ico-edit        { --ico: url('/static/icons/phosphor/pencil-simple-line-bold.svg'); } /* Phosphor 2.1.1, come nel vecchio progetto */
.ico-dots-v      { --ico: url('/static/icons/lucide/ellipsis-vertical.svg'); }
.ico-dots        { --ico: url('/static/icons/lucide/ellipsis.svg'); }
.ico-arrow-left  { --ico: url('/static/icons/lucide/arrow-left.svg'); }
.ico-plus        { --ico: url('/static/icons/lucide/plus.svg'); }
.ico-plus-bold   { --ico: url('/static/icons/lucide/plus-bold.svg'); }
.ico-copy        { --ico: url('/static/icons/lucide/copy.svg'); }
.ico-check       { --ico: url('/static/icons/lucide/check.svg'); }
.ico-menu        { --ico: url('/static/icons/lucide/menu.svg'); }
.ico-share       { --ico: url('/static/icons/lucide/share-2.svg'); }
.ico-shield      { --ico: url('/static/icons/lucide/shield-check.svg'); } /* Team (superadmin) */
.ico-settings    { --ico: url('/static/icons/lucide/settings.svg'); } /* Impostazioni (superadmin) */
.ico-radio       { --ico: url('/static/icons/lucide/radio.svg'); } /* "in onda": Crea diretta nel menu */
.ico-bookmark    { --ico: url('/static/icons/lucide/bookmark-plus.svg'); }
.ico-play        { --ico: url('/static/icons/lucide/play.svg'); }
.ico-caret-right { --ico: url('/static/icons/lucide/chevron-right.svg'); }
.ico-caret-left  { --ico: url('/static/icons/lucide/chevron-left.svg'); }
.ico-caret-down  { --ico: url('/static/icons/lucide/chevron-down.svg'); }
.ico-camera      { --ico: url('/static/icons/lucide/cctv.svg'); transform: scaleX(-1); } /* specchiata: rivolta verso destra */
.ico-play-circle { --ico: url('/static/icons/lucide/circle-play.svg'); }
.ico-clapper     { --ico: url('/static/icons/lucide/clapperboard.svg'); }
.ico-library     { --ico: url('/static/icons/lucide/library.svg'); }
.ico-users       { --ico: url('/static/icons/lucide/users.svg'); }
.ico-classes     { --ico: url('/static/icons/lucide/graduation-cap.svg'); }
.ico-building    { --ico: url('/static/icons/lucide/building-2.svg'); }
.ico-signout     { --ico: url('/static/icons/lucide/log-out.svg'); }
.ico-panel       { --ico: url('/static/icons/lucide/panel-left.svg'); }
.ico-grid        { --ico: url('/static/icons/lucide/layout-grid.svg'); }
.ico-list        { --ico: url('/static/icons/lucide/list.svg'); }
.ico-youtube     { --ico: url('/static/icons/lucide/youtube.svg'); }

/* ---------- pagina ---------- */

.page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
}
.page-narrow { max-width: 560px; }

.page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
}
.page-title {
    flex: 1;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--ink);
}
.page-count {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--faint);
}

.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------- card e liste ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}
.card-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.list-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: none; }
.list-row.pointer:hover { background: var(--hover); }

.cell-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cell {
    flex: 0 0 auto;
    color: var(--muted);
    white-space: nowrap;
}
.cell-140 { flex: 0 0 140px; }
.cell-120 { flex: 0 0 120px; }
.cell-96  { flex: 0 0 96px; }
.cell-88  { flex: 0 0 88px; text-align: right; }
.cell-140, .cell-120, .cell-96, .cell-88 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.row-title {
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row-sub {
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* lista video della Library, sul modello di quella di cid-classroom:
   barra di ricerca, intestazione colonne, righe con miniatura; a tutta larghezza */
.page-full { max-width: none; }

.page-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 8px;
}
.hero-initials {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: var(--ink-soft);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.hero-count { margin-left: 10px; font-size: 20px; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.hero-text  { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hero-name  { font-size: 16px; font-weight: 600; color: var(--muted); }
.hero-title { font-size: 28px; font-weight: 700; letter-spacing: -.015em; color: var(--ink-soft); line-height: 1.15; }
/* Galleria: "Crea diretta" in alto a destra, all'altezza del titolo, come il tasto "Accedi" della home pubblica */
.hero-create {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border-radius: 16px;
    background: var(--accent);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.hero-create:hover { background: var(--accent-hover); }
.hero-create.btn-disabled { opacity: .45; pointer-events: none; } /* es. "Aggiorna classi" mentre sincronizza */

.vlist { margin: 0 -40px; }

.vlist-sticky {
    position: sticky;
    top: -32px; /* = padding-top di .main: si incolla al bordo superiore dell'area che scorre */
    z-index: 5;
    background: var(--surface);
}

.vlist-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 32px 0 40px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--faint);
}
.vlist-toolbar .ico-search { width: 18px; height: 18px; }
.vlist-toolbar input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
.vlist-toolbar input::placeholder { color: var(--faint); }
.vlist-range {
    margin-right: 4px;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.vlist-range.sync-status { font-weight: 400; color: var(--faint); } /* Classi: data dell'ultimo aggiornamento, in secondo piano */

.round-btn {
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--ink-soft);
    cursor: pointer;
}
.round-btn:hover  { background: var(--line); }
.round-btn:active { background: var(--line-strong); }

.vlist-head,
.vrow {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 40px;
    border-bottom: 1px solid var(--line);
}
.vlist-head {
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
}
.vrow { padding-top: 8px; padding-bottom: 8px; }

/* colonna della casella cliccabile per intero: copre tutta l'altezza della riga,
   il margine sinistro e lo spazio fino alla miniatura (annulla padding e gap della riga) */
.vcheck-cell {
    align-self: stretch;
    display: flex;
    align-items: center;
    margin: 0 -16px 0 -40px; /* annulla il padding della riga e il gap verso la miniatura */
    padding: 0 12px 0 24px; /* colonna stretta: casella piu vicina al bordo e alla miniatura */
    cursor: pointer;
}
.vrow .vcheck-cell { margin-top: -8px; margin-bottom: -8px; }
.vrow:hover { background: var(--hover); }

/* casella di selezione identica al vecchio progetto: icone Phosphor "fill" a 22px
   (square grigio chiaro, check-square / minus-square grigio scuro con il segno in trasparenza) */
.vcheck {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background-color: #bdbdbd;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48Z'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
}
.vcheck.checked {
    background-color: var(--ink-soft);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM181.66,101.66l-64,64a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32L112,148.69l58.34-58.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM181.66,101.66l-64,64a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32L112,148.69l58.34-58.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}
.vcheck.partial {
    background-color: var(--ink-soft);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM168,136H88a8,8,0,0,1,0-16h80a8,8,0,0,1,0,16Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM168,136H88a8,8,0,0,1,0-16h80a8,8,0,0,1,0,16Z'/%3E%3C/svg%3E");
}
.vrow.selected { background: var(--hover); }

.vcol-video {
    flex: 0 1 480px;
    min-width: 0; /* si restringe: il titolo finisce con i puntini */
    display: flex;
    align-items: center;
    gap: 12px;
}
.vlist-head .vcol-video { justify-content: space-between; }
.btn.btn-create { height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; border-color: transparent; background: var(--line); }
.btn.btn-create:hover { border-color: transparent; background: var(--line-strong); }

.vcol {
    flex: 1 1 0;
    min-width: 80px;
    max-width: 248px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vcol-date { flex: 0 1 190px; min-width: 120px; }
.vdate, .vroom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vroom { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--faint); }
.vrow .vcol { font-size: 14px; font-weight: 500; color: var(--ink-soft); }

.vcol.vcol-owner { flex: 1 1 0; min-width: 120px; max-width: 420px; overflow: visible; }
/* classi nella colonna: un cerchio con le prime due lettere per classe, leggermente sovrapposti
   (bordo bianco per staccarli); tooltip all'hover */
.vclasses {
    display: inline-flex;
    flex-wrap: wrap;
    row-gap: 4px;
    max-width: 100%;
    cursor: default;
}
.vclasses:empty { display: none; }
.vclasses-row { display: flex; align-items: center; gap: 6px; }
.vdate + .vclasses-row { margin-top: 6px; }
.vhead-actions { display: flex; gap: 8px; }
.btn.btn-dots { width: 34px; padding: 0; }

.vmore { position: relative; }
/* menu ⋮ nello stile del tooltip delle classi: scuro, compatto, freccia centrata sui puntini */
.vmenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 30;
    transform: translateX(-50%);
    padding: 4px;
    border-radius: 10px;
    background: var(--ink);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
.vmenu::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 2px;
    background: var(--ink);
    transform: rotate(45deg);
}
.vmenu-item {
    position: relative; /* sopra la freccia */
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.vmenu-item .ico { width: 14px; height: 14px; }
.vclass-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: -6px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--ink-soft);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.vrow:hover .vclass-dot { border-color: var(--hover); }
.vclass-dot:first-child { margin-left: 0; }
.vclass-dot.more { background: var(--line); color: var(--muted); box-shadow: none; }

/* tooltip con le classi: compare sotto la riga delle classi passandoci sopra */
.vtip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: max-content;
    max-width: 320px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    white-space: normal;
    display: none; /* nascosto davvero: da invisibile allargherebbe la pagina sugli schermi stretti */
    pointer-events: none;
}
.vtip::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: var(--ink);
    transform: rotate(45deg);
    border-radius: 2px;
}
.vclasses:hover + .vtip,
.vtopics:hover + .vtip { display: block; animation: vtip-in .15s ease-out; }
.vtopics { align-self: flex-start; max-width: 100%; cursor: default; } /* hover solo sul testo degli argomenti */
@keyframes vtip-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vtip-head  { margin-bottom: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .55); }
.vtip-item  { padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.vtip-head + .vtip-item { border-top: none; padding-top: 0; }
.vtip-course { font-size: 13px; font-weight: 600; color: #fff; }
.vtip-topic  { font-size: 12px; color: rgba(255, 255, 255, .65); }
.vtip-topic:empty { display: none; }

.vthumb {
    flex: 0 0 132px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border-radius: var(--radius-sm);
    background: var(--ink-soft);
    overflow: hidden;
}
.vthumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vthumb-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.vthumb-play .ico { width: 13px; height: 13px; margin-left: 2px; }
.vthumb-time {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.vthumb-time:empty { display: none; }

.vinfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
/* nella Galleria, come nel vecchio progetto: titolo e stato in alto, all altezza della miniatura */
#tpl-library:not(.grid) .vrow .vcol { align-self: flex-start; padding-top: 2px; }
/* il testo occupa tutta l'altezza della miniatura: i tasti vanno in fondo, all'altezza della durata del video */
#tpl-library:not(.grid) .vrow .vinfo { align-self: stretch; padding-top: 2px; }
#tpl-library:not(.grid) .vrow .vrow-actions { gap: 0; margin: auto 0 2px -4px; } /* icone vicine e allineate al testo */
#tpl-library:not(.grid) .vrow .vrow-actions .round-btn { flex-basis: 24px; width: 24px; height: 24px; }
.vtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vstatus { font-size: 13px; font-weight: 600; color: var(--faint); }
.vstatus.live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.vstatus.live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink);
    animation: live-pulse 1.4s ease-in-out infinite;
}
/* Modifica / Elimina nella riga: compaiono al passaggio del mouse (sempre visibili sugli schermi touch) */
.vrow-actions { flex: 0 0 auto; display: flex; gap: 4px; opacity: 0; }
.vrow:hover .vrow-actions { opacity: 1; }
@media (hover: none) { .vrow-actions { opacity: 1; } }

/* stato e, se gia caricato, la piccola icona YouTube accanto */
.vstatus-line { display: flex; align-items: center; gap: 6px; min-width: 0; }

.empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
}

.avatar {
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------- bottoni ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.btn:hover { border-color: var(--ink); }

.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-soft); }

.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { border-color: transparent; background: rgba(0, 0, 0, .05); }

.btn-sm    { height: 30px; padding: 0 10px; font-size: 12px; }
.btn-block { display: flex; width: 100%; }
.btn-icon  { width: 30px; padding: 0; }

.btn.btn-disabled { opacity: .4; }

/* scelta tra opzioni (es. ruolo utente): users.js segna quella scelta con .bg-gray-10 */
.segmented {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--hover);
    border: 1px solid var(--line);
}
.segmented-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 7px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
}
.segmented-item:hover { color: var(--ink); }
.segmented-item.bg-gray-10 {
    background-color: var(--surface) !important;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ---------- campi ---------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 12px; font-weight: 500; color: var(--muted); }

.input {
    width: 100%;
    height: 38px;
    padding: 0 12px !important;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    outline: none;
}
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.input::placeholder { color: var(--faint); }
.input-sm { height: 30px; font-size: 12px; }

/* input senza bordo che sembra testo finche' non lo si tocca (nome telecamera, titolo diretta) */
.input-plain {
    width: 100%;
    padding: 2px 0 !important;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    outline: none;
}
.input-plain:not([readonly]):hover,
.input-plain:not([readonly]):focus { border-bottom-color: var(--line-strong); }

.search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 280px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--faint);
}
.search:focus-within { border-color: var(--ink); }
.search input { flex: 1; border: none; outline: none; background: transparent; color: var(--text); }
.search input::placeholder { color: var(--faint); }

/* ---------- badge ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.badge-live { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

.chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--hover);
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------- modali e menu ---------- */

.modal-overlay {
    align-items: center;
    justify-content: center;
    background-color: rgba(40, 40, 40, .35) !important;
    backdrop-filter: blur(2px);
}
.modal {
    display: flex;
    flex-direction: column;
    width: 460px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 14px 20px;
    border-bottom: 1px solid var(--line);
}
.modal-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; }
/* intestazione e ricerca non si schiacciano quando la lista e' lunga: scorre solo il corpo */
.modal-head, .msearch { flex-shrink: 0; }

/* modale di condivisione ad altezza fissa: non cambia dimensione mentre si cerca */
#tpl-classroom-share-modal { height: min(640px, 80vh); }


.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: var(--hover); }
.menu-item.btn-disabled { color: var(--faint); }

.dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 50;
    width: 220px;
    max-height: 260px;
    margin-bottom: 8px;
    overflow-y: auto;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}
.dropdown .menu-item { min-height: 40px; padding: 8px 14px; }

/* ---------- condivisione classroom ---------- */

.share-course { border-bottom: 1px solid var(--line); }
.share-course:last-child { border-bottom: none; }
.share-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 20px;
}
.share-row-topic { padding-left: 66px; color: var(--muted); } /* allineati al nome del corso, dopo il cerchio */
.share-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msearch {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    color: var(--faint);
}
.msearch .ico-search { width: 18px; height: 18px; }
.msearch input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
.msearch input::placeholder { color: var(--faint); }

/* ---------- diretta ---------- */

.player {
    background: var(--ink);
    border-radius: var(--radius);
}
.player .overlay { color: rgba(255, 255, 255, .75); font-size: 14px; }
.player video { object-fit: contain; background: #000; }


/* pagina del singolo video, stile YouTube: header come le liste (titolo e stato sotto),
   poi il video con sotto azioni e informazioni; a destra classi condivise e altri video delle stesse classi */
.live-hero-text { flex: 1; }
.live-main .page-hero { padding: 0 0 8px; }
/* titolo su al massimo due righe, poi i puntini (su una riga sola si leggeva poco) */
.live-hero-title { overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.live-sub { display: flex; flex-wrap: wrap; align-items: center; line-height: 18px; font-size: 13px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.live-sub > :empty,
.live-sub > :has(> :last-child:empty) { display: none; } /* es. durata di una diretta non ancora iniziata */
.live-hero-sub { margin-top: 2px; }
.live-sub > :not(:first-child)::before { content: "·"; margin: 0 7px; } /* separatore tra le voci */

.live-grid {
    display: grid;
    grid-template-columns: minmax(0, 1000px) 300px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1100px) {
    .live-grid { grid-template-columns: minmax(0, 1fr); }
}
.live-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.live-bar { display: flex; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.live-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.live-actions .btn-primary { height: 34px; padding: 0 14px; font-size: 13px; font-weight: 600; }
/* "Inizia" / "Termina diretta": stessa forma degli altri tasti della fila, viola o rosso, con l'icona */
.live-actions [data-field='liveActionBtn'] { gap: 8px; height: 44px; padding: 0 20px 0 16px; border-radius: 16px; font-size: 16px; } /* grande come "Crea diretta" */
.live-actions [data-field='liveActionBtn']::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.live-actions .live-start { --ico: url('/static/icons/lucide/play.svg'); }
.live-actions .live-stop  { --ico: url('/static/icons/lucide/square.svg'); background: var(--danger, #df1b41); border-color: var(--danger, #df1b41); color: #fff; }
.live-actions .live-stop:hover { background: var(--danger-hover, #c81538); border-color: var(--danger-hover, #c81538); }
/* ⋮ (Modifica, Elimina) tutto a destra della fila */
.live-bar .live-actions { flex: 1 1 auto; }
.live-actions [data-field='liveMoreWrap'] { margin-left: auto; }
.live-yt-btn { gap: 6px; }
.live-yt-btn.busy { pointer-events: none; color: var(--faint); font-variant-numeric: tabular-nums; }
/* nessun tasto visibile: niente riga vuota */
.live-actions:not(:has(> .btn:not([style*="none"]), > .vmore:not([style*="none"]))) { display: none; }


.live-side .card-title { margin-bottom: 6px; }
.live-related-row { display: flex; gap: 10px; padding: 6px; margin: 0 -6px; border-radius: var(--radius-sm); cursor: pointer; }
.live-related-row:hover { background: var(--hover); }
.live-related-row .vthumb { flex-basis: 120px; height: 68px; }
.live-related-row .vthumb-play { display: none; } /* "Altri video" a destra: niente tasto play sulle miniature */
.live-related-row .vinfo { gap: 2px; }
.live-related-row .vtitle { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.live-related-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-related-row .vstatus { font-size: 12px; }
.live-related-row .vstatus:empty { display: none; }
.live-side { display: flex; flex-direction: column; gap: 24px; }

/* descrizione del video: testo semplice, 3 righe e poi "Mostra altro" */
.live-desc { margin-top: 2px; } /* con il gap della colonna: 14px sotto il bordino, come sopra */
.live-desc-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    white-space: pre-line; /* rispetta gli a capo scritti nella modale */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.live-desc-text.expanded { display: block; }
/* menu ⋮ della pagina video: Modifica separata da Elimina con un bordino */
.live-actions .vmenu { min-width: 132px; }
.live-edit-item { border-radius: 6px 6px 0 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.live-edit-item:has(+ .vmenu-item[style*="none"]) { border-bottom: none; } /* senza Elimina sotto non serve */
.live-desc-more { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.live-desc-more:hover { text-decoration: underline; }

/* capitoli sotto la descrizione: minuto, titolo e nota; cliccando si salta a quel punto */
.live-chapters { display: flex; flex-direction: column; gap: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); } /* chiuso in basso come "Condiviso con" */
.live-chapters-head { display: flex; align-items: center; gap: 10px; min-height: 28px; cursor: pointer; user-select: none; }
.live-side .live-chapters-head .card-title { flex: 1; margin-bottom: 0; }
.live-chapters-count { font-size: 13px; color: var(--muted); }
.live-chapters > .live-chapters-list { display: none; margin-top: 4px; }
.live-chapters.expanded > .live-chapters-list { display: block; }
/* nota per il proprietario quando i capitoli sono gia' su YouTube (classe "locked" da live.js) */
.live-chapters.expanded .live-chapters-count { visibility: hidden; } /* come i cerchi delle classi: la riga non cambia */
.live-chapters.expanded .live-shares-caret { transform: rotate(180deg); }
/* ogni capitolo chiuso da una riga chiara; l'ultimo no, c'e' gia' il bordo della sezione */
.chapter-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}
.chapter-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.chapter-time {
    flex: 0 0 auto;
    min-width: 40px;
    padding-top: 1px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent, var(--ink));
}
.chapter-text  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chapter-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.chapter-title.untitled { color: var(--faint); font-weight: 500; }
.chapter-desc  { font-size: 13px; color: var(--muted); white-space: pre-line; }
.chapter-desc:empty { display: none; }
.chapter-edit  { opacity: 0; margin: -4px 0; }
.chapter-row:hover .chapter-edit { opacity: 1; }
.chapter-row:hover .chapter-time { text-decoration: underline; }
/* capitolo in riproduzione (con il player nostro) */
.chapter-row.current .chapter-title { color: var(--accent, var(--ink)); } /* il minuto e' il "link" che porta a quel punto */
@media (hover: none) { .chapter-edit { opacity: 1; } }
.live-actions .btn-create { gap: 6px; }

/* modale del capitolo: minuto stretto accanto al titolo; Elimina a sinistra, lontano da Salva */
.soft-form-row > .field.chapter-time-field { flex: 0 0 88px; }
.chapter-delete-btn { margin-right: auto; color: var(--danger, var(--ink)); }

textarea.input { height: auto; min-height: 96px; padding: 10px 12px !important; font: inherit; line-height: 1.45; resize: vertical; }
.live-shares { display: flex; flex-direction: column; }

/* box "Condiviso su Classroom" espandibile: chiuso mostra solo i cerchi delle classi */
.live-shares-head { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.live-side .live-shares-head .card-title { flex: 1; margin-bottom: 0; }
.live-shares-head .vclass-dot { width: 40px; height: 40px; font-size: 13px; } /* chiuso: i cerchi accanto a "Condiviso con", grandi come nella Galleria e in Classi */
.live-shares-caret { width: 16px; height: 16px; color: var(--faint); transition: transform .15s; }
.live-shares-box { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.live-shares-box > .live-shares { display: none; margin-top: 4px; }
.live-shares-box.expanded > .live-shares { display: flex; }
.live-shares-box.expanded .live-shares-head .vclasses { visibility: hidden; } /* nascosti ma con il loro spazio: la riga non cambia altezza */
.live-shares-box.expanded .live-shares-caret { transform: rotate(180deg); }
.live-share { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.live-share .vclass-dot { flex: 0 0 40px; width: 40px; height: 40px; font-size: 13px; } /* aperto: elenco delle classi */
.live-share-text { min-width: 0; }
.live-share .vtip-course { color: var(--ink); }
.live-share-topic { font-size: 12px; color: var(--muted); }
/* classi pubblicate su Classroom: si apre il materiale (tutta la riga, o il singolo argomento) */
a.live-share.has-link { margin: 0 -8px; padding: 6px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
a.live-share.has-link:hover { background: var(--line); }
.live-share-topic a { color: var(--accent); text-decoration: none; }
.live-share-topic a:hover { text-decoration: underline; }

/* ---------- login ---------- */

.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 16px;
}
.login-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 360px;
    max-width: 100%;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.login-title { font-size: 20px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }

/* ---------- modale di conferma (identica a "areYouSure" del vecchio progetto) ---------- */

.confirm-overlay {
    justify-content: center;
    align-items: center;
    padding: 32px 0;
    backdrop-filter: saturate(180%) blur(2px);
}
.confirm-box {
    flex: 0 0 480px;
    max-width: 90%;
    padding: 0 24px;
    border-radius: 12px;
    background-color: #f6f6f6;
    overflow: hidden;
}
.confirm-question {
    display: flex;
    align-items: center;
    min-height: 60px;
    font-size: 16px;
    font-weight: 600;
}
.confirm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 72px;
}
.confirm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    border-radius: 16px;
    background-color: var(--line);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.confirm-btn:hover  { background-color: var(--line-strong); }
.confirm-btn:active { opacity: .5; }

/* ---------- modali "morbide" (scelta telecamera, condivisione Classroom): stesso stile della modale di conferma ---------- */

.soft-modal {
    width: 480px;
    max-width: 90%;
    border-radius: 12px;
    background-color: #f6f6f6;
    box-shadow: none;
}
.soft-modal .modal-head {
    min-height: 60px;
    padding: 0 16px 0 24px;
    border-bottom: none;
}
.soft-modal .modal-title { font-size: 16px; font-weight: 600; color: var(--text); }
.soft-modal .btn-icon { border-radius: 50%; }
.soft-modal .btn-icon:hover { background: var(--line); }
.soft-modal .msearch { padding: 0 24px; border-top: 1px solid var(--line); }
.soft-modal .share-row { padding-left: 24px; padding-right: 24px; }
.soft-modal .share-row-topic { padding-left: 24px; } /* tutti i cerchi di selezione in colonna, a sinistra */
.soft-modal .share-row-topic .share-name { padding-left: 46px; } /* nome dell'argomento allineato al nome del corso (dopo la sigla) */
.soft-modal .share-row.selectable:hover { background: var(--line); }
.soft-modal .vclass-dot { border-color: #f6f6f6; margin-left: 0; }
.soft-modal .modal-body { border-top: 1px solid var(--line); }
.soft-modal .msearch + .modal-body { border-top: none; }

/* righe semplici (es. telecamere): nome e stato sotto, evidenziate al passaggio */
.soft-row {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 8px 24px;
    border-bottom: 1px solid var(--line);
}
.soft-row:last-child { border-bottom: none; }
.soft-row.pointer:hover { background: var(--line); }
.soft-row.selected,
.soft-row.selected:hover { background: var(--line); }

/* cerchio di selezione (vuoto / pieno con il punto bianco quando la riga e' scelta) */
.soft-radio {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-right: 14px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
}
.soft-row.selected .soft-radio {
    border-color: var(--ink-soft);
    background: var(--ink-soft);
    box-shadow: inset 0 0 0 3px var(--surface);
}
.soft-row.btn-disabled .soft-radio { opacity: .5; }

/* piede con Annulla / Conferma, come la modale di conferma */
.soft-foot {
    flex-shrink: 0;
    padding: 0 24px;
    border-top: 1px solid var(--line);
}
.confirm-btn.disabled { opacity: .45; pointer-events: none; }
.soft-row.btn-disabled .row-title { color: var(--faint); }

/* selezione multipla di corsi/argomenti, come la scelta telecamera */
.soft-modal .share-row.selectable { cursor: pointer; }
.soft-modal .share-row.selected,
.soft-modal .share-row.selected:hover { background: var(--line); }
.soft-modal .share-row .soft-radio { margin-right: 2px; }
.soft-modal .share-row.selected .soft-radio,
.soft-modal .share-row.done .soft-radio {
    border-color: var(--ink-soft);
    background: var(--ink-soft);
    box-shadow: inset 0 0 0 3px var(--surface);
}
.soft-modal .share-row.done .soft-radio { opacity: .35; }
.share-done { display: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.share-row.done .share-done { display: block; }
.share-sub { margin-top: 1px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-sub:empty { display: none; }

/* corsi chiusi di default: la freccia a destra apre/chiude i suoi argomenti */
.share-course:not(.expanded) .share-topics { display: none; }
.share-caret {
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: -6px;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
}
.share-caret:hover { background: var(--line-strong); color: var(--ink-soft); }
.share-caret .ico { width: 14px; height: 14px; transition: transform .15s; }
.share-course.expanded .share-caret .ico { transform: rotate(180deg); }
/* la freccia compare passando sulla riga del corso (e resta visibile se il corso e' aperto, per poterlo richiudere) */
.share-course .share-caret { opacity: 0; }
.share-course [data-field='courseRow']:hover .share-caret,
.share-course.expanded .share-caret { opacity: 1; }

/* ---------- Library su schermi stretti: le righe non escono dalla pagina ---------- */
.vlist-head .vcol-video > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
    .vthumb { flex-basis: 96px; height: 58px; }
    .vthumb-time { display: none; }
}
/* lista video: la miniatura resta sempre a grandezza piena (con la durata), si stringe il titolo */
@media (max-width: 1100px) {
    #tpl-library:not(.grid) .vthumb { flex-basis: 132px; height: 80px; }
    #tpl-library:not(.grid) .vthumb-time:not(:empty) { display: block; }
}
/* lista video: niente tasto play sulle miniature (si apre cliccando la riga) */
#tpl-library .vthumb-play { display: none; }
#tpl-library .vowner-missing { color: var(--faint); font-style: italic; }
/* lista video (Galleria istituto): fila del filtro per stato sotto la ricerca */
#tpl-library .vfilters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 32px 10px 40px; border-bottom: 1px solid var(--line); }
#tpl-library .vpills { display: flex; gap: 4px; margin-right: 8px; }
#tpl-library .vpill { padding: 5px 10px; border-radius: 5px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
#tpl-library .vpill:hover { background: var(--hover); color: var(--ink); }
#tpl-library .vpill.active { background: var(--ink); color: #fff; }

#tpl-library .vrow.selected { background: var(--hover); } /* righe selezionate grigie, non lilla */
#tpl-library .vclass-dot { width: 40px; height: 40px; margin-left: -7px; font-size: 13px; } /* classi un po' piu' grandi nella lista video */
#tpl-library .vclass-dot:first-child { margin-left: 0; }
/* lista video: "Apri su YouTube" nella riga delle azioni, compare con Modifica ed Elimina; rosso al passaggio */
#tpl-library .vyt-btn { text-decoration: none; }
/* Galleria istituto: niente "Crea diretta" (tranne il superadmin, .can-create), caselle di selezione ne' tasto per eliminare */
#tpl-library.school:not(.can-create) [data-field='createBtn'],
#tpl-library.school .vcheck-cell,
#tpl-library.school [data-field='deleteBtn'] { display: none; }

/* ---------- lista utenti (stessa struttura della Library) ---------- */

/* riquadro con le iniziali, come nel vecchio progetto */
.user-initials {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--ink-soft);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
#tpl-user-list .vrow { min-height: 64px; }
/* tabelle: le colonne si restringono finche' la tabella e' larga almeno la soglia,
   sotto l'area principale scorre in orizzontale (soglie scelte perche' la colonna principale resti leggibile) */
#tpl-user-list .vlist { min-width: 760px; } /* nome/email ~140px */
#tpl-classroom .vlist { min-width: 560px; } /* nome della classe ~200px */
#tpl-library .vlist   { min-width: 720px; } /* titolo del video ~210px */
#tpl-cam-list .vlist  { min-width: 580px; } /* nome della telecamera ~155px */
#tpl-user-list .vstatus { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* email lunghe con i puntini */
.vcol.vcol-num { flex: 0 0 72px; min-width: 72px; }
/* colonne corte a larghezza fissa: quando manca spazio si restringe la colonna Utente (email con i puntini) */
#tpl-user-list .vcol-video { flex: 1 1 480px; }
.vcol.vcol-role   { flex: 0 0 100px; min-width: 100px; }
.vcol.vcol-access { flex: 0 0 230px; min-width: 230px; max-width: 230px; }

/* ---------- Team (superadmin) ---------- */
#tpl-team .vlist-head { border-top: 1px solid var(--line); } /* niente ricerca: la riga sopra l'intestazione la mette questa */
#tpl-team .vcol-access { flex: 0 0 200px; }
.team-delete-btn { color: var(--danger, var(--ink)); }
#tpl-team-modal .team-delete-btn + .user-invite-btn { margin-left: 0; } /* Elimina e Manda invito vicini, a sinistra */
.team-note { padding: 12px 0 4px; font-size: 13px; color: var(--muted); }
.team-password { padding: 6px 0; font-family: ui-monospace, Menlo, monospace; font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--ink); user-select: all; }

/* ruolo come badge, angoli appena smussati, un colore per ruolo */
.role-badge { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.role-badge.role-teacher    { background: #e6f0fb; color: #1f5fa8; } /* docente: azzurro */
.role-badge.role-admin      { background: var(--accent-soft, #f0efff); color: var(--accent, #635bff); } /* admin: viola */
.role-badge.role-superadmin { background: #fff1e6; color: #b3540e; } /* superadmin: arancione */

/* utente non eliminabile (se stessi, superadmin, chi ha dirette): casella spenta, motivo nel tooltip */
.vcheck-cell.blocked { cursor: not-allowed; }
.vcheck-cell.blocked .vcheck { opacity: .35; }

/* docenti: lista in sola lettura, senza caselle */
#tpl-user-list.readonly .vcheck-cell { display: none; }

/* ---------- pagina Classi ---------- */
#tpl-classroom .vrow { min-height: 64px; }
#tpl-classroom .vcol-video { flex: 1 1 480px; }
#tpl-classroom .vclass-dot { flex: 0 0 40px; width: 40px; height: 40px; margin-left: 0; font-size: 13px; } /* un po' piu' grandi, come nella Galleria */
#tpl-classroom .skel-dot { width: 40px; height: 40px; }
#tpl-classroom .vstatus { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* argomenti lunghi con i puntini */
.vcol.vcol-shared { flex: 0 0 130px; min-width: 130px; }

/* ---------- form dentro le modali (es. Nuovo utente) ---------- */
/* prova: campi senza contorni ne' evidenziazione al focus, solo una linea in basso per ogni riga */
.soft-form { display: flex; flex-direction: column; padding: 4px 24px 12px; }
.soft-form-row { display: flex; gap: 24px; }
.soft-form-row > .field { flex: 1; min-width: 0; }
.soft-form .field { gap: 2px; padding: 12px 0 8px; border-bottom: 1px solid var(--line); }
.soft-form > .field:last-child { border-bottom: none; } /* l'ultima riga e' gia' chiusa dalla linea del footer */
.soft-form .input,
.soft-form .input:focus {
    height: 30px;
    padding: 0 !important;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-size: 14px;
}


/* ---------- modale utente ---------- */
.user-modal-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-modal-head .user-initials { flex-basis: 36px; width: 36px; height: 36px; border-radius: 8px; font-size: 13px; }
.user-modal-head .modal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ruolo: righe larghe quanto la modale (l'evidenziazione arriva ai bordi), la linea della riga chiude il campo */
.soft-form .user-role-choice { margin: 6px -24px -8px; }
.soft-form .user-role-choice .soft-row { min-height: 52px; padding: 6px 24px; }
.soft-form .user-role-choice .row-title { font-size: 14px; }
.user-invite-btn { margin-right: auto; } /* a sinistra, lontano da Annulla / Salva */
.user-access-text { margin-top: 4px; font-size: 14px; color: var(--text); }


/* ---------- pagina Telecamere ---------- */
#tpl-cam-list .vrow { min-height: 64px; }
#tpl-cam-list .vcol-video { flex: 1 1 420px; }

/* icona della telecamera nello stesso riquadro scuro delle iniziali degli utenti */
.cam-icon {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--ink-soft);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.cam-icon .ico { width: 20px; height: 20px; }
#tpl-cam-list .vstatus { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vcol.vcol-camstatus { flex: 0 1 300px; min-width: 120px; max-width: 300px; }
.vcol-camstatus.live { color: var(--ink); font-weight: 600; }
.vcol.vcol-toggle { flex: 0 0 64px; min-width: 64px; overflow: visible; }

/* interruttore on/off (attiva / disattiva) */
.toggle {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--line-strong);
    cursor: pointer;
}
.toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .15s;
}
.toggle.on { background: var(--ink-soft); }
.toggle.on::after { transform: translateX(16px); }

/* chi non puo' selezionare (non superadmin) non vede le caselle; chi non puo' attivare non vede l'interruttore */
#tpl-cam-list.no-select .vcheck-cell { display: none; }
#tpl-cam-list.no-toggle .vcol-toggle { display: none; }

/* ---------- sidebar chiudibile: chiusa resta una striscia con le sole icone ---------- */
.sidebar { transition: flex-basis .2s ease, padding .2s ease; overflow: hidden; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-toggle { margin-bottom: 8px; color: var(--faint); }

.app.sidebar-collapsed .sidebar { flex-basis: 64px; padding-left: 10px; padding-right: 10px; }
.app.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .sidebar-user { display: none; }
.app:not(.sidebar-collapsed) .nav-collapsed-only { display: none; }
.nav-item[data-field='userInitialsMini'],
.nav-item[data-field='userInitialsMini']:hover { width: 32px; height: 32px; margin: 0 auto 4px; padding: 0; border-radius: 8px; background: var(--ink-soft); color: #fff; font-size: 11px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); cursor: default; }

.sidebar .ico { width: 18px; height: 18px; }

/* lista video: etichetta sopra i tasti della riga (app.js), uguale al tooltip della sidebar chiusa (.nav-tip) */
.row-tip {
    position: fixed;
    z-index: 100;
    display: none;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    transform: translate(-50%, -100%);
    pointer-events: none;
}
/* stessa freccia della sidebar, girata verso il basso */
.row-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 10px;
    height: 12px;
    margin-left: -5px;
    background: var(--ink);
    transform: rotate(-90deg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M10 0 L1.8 4.7 Q0 6 1.8 7.3 L10 12 Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M10 0 L1.8 4.7 Q0 6 1.8 7.3 L10 12 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.row-tip.show { display: block; }

/* tooltip a destra delle icone con la sidebar chiusa, nello stile scuro degli altri tooltip */
.nav-tip {
    position: fixed;
    z-index: 100;
    display: none;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    transform: translateY(-50%);
    pointer-events: none;
}
/* freccia a triangolo allungato con la punta arrotondata (svg come maschera: prende il colore del tooltip) */
.nav-tip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -9px;
    width: 10px;
    height: 12px;
    margin-top: -6px;
    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M10 0 L1.8 4.7 Q0 6 1.8 7.3 L10 12 Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M10 0 L1.8 4.7 Q0 6 1.8 7.3 L10 12 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav-tip.show { display: block; animation: nav-tip-in .15s ease-out; }
@keyframes nav-tip-in {
    from { opacity: 0; margin-left: -4px; }
    to   { opacity: 1; margin-left: 0; }
}

/* ---------- Galleria: vista a griglia (stesse righe della lista, impaginate come schede) ---------- */
.vview-btn { margin-left: 8px; }
.vview-btn .ico { width: 18px; height: 18px; }

#tpl-library.grid .vlist { min-width: 0; }
#tpl-library.grid .vlist-head .vcol { display: none; } /* niente intestazioni di colonna: restano "Video", seleziona tutti e i tasti */
#tpl-library.grid .vlist-head .vcol-video { flex: 1 1 auto; } /* tasti a destra, sopra l'ultima colonna */
#tpl-library.grid #tpl-library-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px 16px;
    padding: 16px 32px 32px; /* con il padding delle schede: 24px sotto il bordino, come i lati */
}
#tpl-library.grid .empty { grid-column: 1 / -1; }

#tpl-library.grid .vrow {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border-bottom: none;
    border-radius: 12px;
}
#tpl-library.grid .vrow .vcol-video { flex: none; flex-direction: column; align-items: stretch; gap: 10px; }
/* in griglia i tasti stanno sulla miniatura, in alto a destra */
#tpl-library.grid .vrow .vcol-video, #tpl-library.grid .vrow .vinfo { position: static; } /* i tasti si posizionano rispetto alla scheda */
#tpl-library.grid .vrow-actions { position: absolute; top: 14px; right: 14px; margin: 0; }
#tpl-library.grid .vrow-actions .round-btn { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
#tpl-library.grid .vrow-actions .round-btn:hover { background: var(--hover); }
#tpl-library.grid .vthumb { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9; }
#tpl-library.grid .vthumb-time { display: block; }
#tpl-library.grid .vthumb-time:empty { display: none; }
#tpl-library.grid .vtitle { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
#tpl-library.grid .vrow .vcol { flex: none; max-width: none; min-width: 0; overflow: visible; }
#tpl-library.grid .vcol-date { display: flex; flex-wrap: wrap; align-items: baseline; }
#tpl-library.grid .vcol-date .vroom { margin-top: 0; }
#tpl-library.grid .vcol-date .vroom:not(:empty)::before { content: "·"; margin: 0 6px; }
#tpl-library.grid .vrow .vcol-date .vdate { font-size: 13px; font-weight: 600; color: var(--faint); }
#tpl-library.grid .vrow .vcol-owner { position: relative; font-size: 13px; }
#tpl-library.grid .vcol-owner:not(:has(.vdate)):not(:has(.vclass-dot)) { display: none; }

/* in griglia niente selezione: si seleziona dalla vista a elenco */
#tpl-library.grid .vcheck-cell { display: none; }

/* ---------- pagina Organizzazione: impostazioni a righe ---------- */
.org-head { border-top: 1px solid var(--line); }
.org-row { min-height: 64px; }
/* riepilogo: riquadri divisi da linee sottili, vanno a capo sugli schermi stretti.
   Ogni cella disegna la linea a destra e sotto; quelle sul bordo del riquadro vengono tagliate */
.org-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.org-stat { padding: 20px 24px 22px 40px; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.org-stat-value { font-size: 28px; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.org-stat-label { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.org-stat-sub   { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--faint); }
.org-row .vinfo { gap: 2px; }
.org-row .vstatus { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-row > .ico { flex: 0 0 18px; width: 18px; height: 18px; color: var(--faint); }

.org-google-status { margin-top: 4px; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }

/* ---------- chat di assistenza (static/js/support.js) ---------- */
.ico-chat { --ico: url('/static/icons/lucide/message-circle.svg'); }
.ico-send { --ico: url('/static/icons/lucide/send-horizontal.svg'); }

/* pallino delle non lette nel menu (a menu chiuso sull'icona) */
.nav-item { position: relative; }
.nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--live, var(--ink));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.app.sidebar-collapsed .nav-badge { position: absolute; top: 3px; right: 8px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
.nav-item.active-panel { background: var(--line); color: var(--ink); }

/* pannello a destra (docenti e admin), sotto l'intestazione */
.support-panel {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: 100vw;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: -8px 0 24px rgba(0, 0, 0, .08);
    animation: support-in .18s ease-out;
}
@keyframes support-in { from { transform: translateX(24px); opacity: 0; } }
.support-panel-head {
    display: flex;
    align-items: center; /* solo il titolo "Assistenza" e la ✕, sulla stessa riga */
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px 14px 20px;
    border-bottom: 1px solid var(--line);
}

/* messaggi */
.support-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
}
.support-empty { margin: auto; padding: 24px; text-align: center; font-size: 13px; color: var(--muted); }
.support-day { align-self: center; margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--faint); }
.support-msg { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; } /* non si schiacciano: la conversazione scorre */
.support-msg.mine { align-self: flex-end; align-items: flex-end; }
.support-msg-name { margin: 4px 0 3px 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.support-bubble {
    padding: 8px 12px;
    border-radius: 14px 14px 14px 4px;
    background: var(--line);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.support-msg.mine .support-bubble { border-radius: 14px 14px 4px 14px; background: #e2dfff; color: #3a32b8; } /* viola medio con testo viola scuro: piu' deciso del viola chiarissimo, meno pesante del pieno */
.support-msg-time { margin: 2px 4px 0; font-size: 11px; color: var(--faint); }

/* campo di scrittura */
.support-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--bg); /* tutta la fascia in basso dello stesso grigio della casella */
}
.support-input {
    flex: 1;
    overflow-y: hidden;
    box-sizing: border-box;
    min-height: 38px;
    max-height: 120px;
    padding: 9px 12px;
    border: none;
    border-radius: 12px;
    background: var(--bg); /* grigio chiarissimo, senza bordo; nessun colore al focus */
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    outline: none;
}
.support-send {
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px; /* quadrato con gli angoli come la casella */
    background: var(--accent); /* viola con l'aeroplanino bianco quando c'e' qualcosa da mandare */
    color: #fff;
    cursor: pointer;
}
.support-send:hover { background: var(--accent-hover); }
.support-send.disabled { background: var(--line-strong); color: var(--muted); pointer-events: none; } /* casella vuota: grigio */

/* pagina Messaggi (superadmin): conversazioni a sinistra, quella aperta a destra */
#tpl-support .hero-initials .ico { width: 26px; height: 26px; }
.main:has(#tpl-support) { padding-bottom: 0; } /* la chat arriva al bordo in basso, senza spazio sotto */
.support-layout {
    display: flex;
    height: calc(100vh - 188px); /* fino in fondo alla finestra: barra in alto 60 + margine 32 + intestazione 88 + 8 */
    min-height: 420px;
    margin: 8px -40px 0; /* da bordo a bordo, come gli elenchi delle altre pagine */
    border-top: 1px solid var(--line);
}
.support-threads { flex: 0 0 340px; overflow-y: auto; border-right: 1px solid var(--line); }
.support-thread {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px 12px 40px; /* iniziali allineate al riquadro in alto, come nelle liste */
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}
.support-thread:hover { background: var(--hover); }
.support-thread.selected { background: var(--accent-soft, var(--line)); }
.support-thread .user-initials { flex-basis: 36px; width: 36px; height: 36px; font-size: 12px; }
.support-thread-text { flex: 1; min-width: 0; }
.support-thread-top { display: flex; align-items: baseline; gap: 8px; }
.support-thread-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ink); }
.support-thread-time { font-size: 12px; color: var(--faint); }
.support-thread-org  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.support-thread-last { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.support-thread.unread .support-thread-last { color: var(--ink); font-weight: 600; }
.support-unread-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent, var(--ink)); visibility: hidden; }
.support-thread.unread .support-unread-dot { visibility: visible; }
.support-conversation { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.support-conv-head { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: 76px; padding: 14px 20px; border-bottom: 1px solid var(--line); } /* alta come una riga dell'elenco a sinistra */
.support-conv-head > * { flex: none; } /* nome e info vicini, centrati in altezza */

@media (max-width: 760px) {
    .support-panel { width: 100vw; }
    .support-threads { flex-basis: 220px; }
}

/* ======================================================================
   COLORI (prova, ispirata all'interfaccia di Stripe)
   grigi freddi al posto dei grigi neutri, un solo colore d'accento (viola Stripe)
   per azioni principali e selezioni, rosso per la diretta e per eliminare,
   ambra per gli stati in attesa. Per tornare al bianco e nero: cancellare questa sezione.
   ====================================================================== */
:root {
    --ink        : #353a44;
    --ink-soft   : #414552;
    --text       : #414552;
    --muted      : #687385;
    --faint      : #a3acb9;
    --line       : #ebeef1;
    --line-strong: #d5dbe1;
    --bg         : #f6f8fa;
    --hover      : #f5f6f8;

    --accent       : #635bff;
    --accent-hover : #5851ea;
    --accent-soft  : #f0efff;
    --accent-ring  : rgba(99, 91, 255, .22);
    --live         : #df1b41;
    --danger       : #df1b41;
    --danger-hover : #c81538;
    --pending      : #b3540e;
}

/* menu laterale: voce attiva in viola, come la navigazione di Stripe */
.nav-item.active { background: var(--accent-soft); color: var(--accent); }

/* azioni principali */
/* ("Crea diretta", "Nuovo utente", "Nuova telecamera", "Aggiorna classi" ora sono .hero-create, in alto a destra) */
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* nelle modali il tasto di conferma (l'ultimo del piede) e' quello principale */
.soft-foot > .confirm-btn:last-child { background-color: var(--accent); color: #fff; }
.soft-foot > .confirm-btn:last-child:hover { background-color: var(--accent-hover); }
/* la modale di conferma oggi si usa solo per eliminare: conferma in rosso */
.confirm-box .confirm-btn[data-action=ok] { background-color: var(--danger); color: #fff; }
.confirm-box .confirm-btn[data-action=ok]:hover { background-color: var(--danger-hover); }

/* selezioni: caselle, cerchi di scelta, righe selezionate */
.vcheck.checked,
.vcheck.partial { background-color: var(--accent); }
.vrow.selected { background: var(--accent-soft); }
.soft-row.selected .soft-radio,
.soft-modal .share-row.selected .soft-radio { border-color: var(--accent); background: var(--accent); }

/* campi attivi */
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.search:focus-within { border-color: var(--accent); }

/* diretta in corso: rosso, come su YouTube */
.vstatus.live { color: var(--live); }
.vstatus.live::before { background: var(--live); }
.badge-live { background: var(--live); border-color: var(--live); }

/* in attesa dello stream / registrazione in elaborazione */
.vstatus.pending { color: var(--pending); }

/* YouTube: errore nel caricamento */
.live-yt-btn.error { color: var(--danger); }

/* ---------- caricamento: righe "scheletro" e lista sbiadita (per ora nella Galleria, riusabili nelle altre liste) ---------- */

.skel {
    border-radius: 6px;
    background: var(--line);
    animation: skel-pulse 1.4s ease-in-out infinite;
}
.vthumb.skel { background: var(--line); } /* la miniatura vera e' scura: qui grigio chiaro come le righe */
.skel-line { height: 12px; margin: 3px 0 0; }
.skel-line + .skel-line { margin-top: 6px; } /* stessa distanza in tutte le colonne (anche dentro .vinfo, che e' flex) */
.skel-line.skel-sm { height: 10px; }
.skel-row { pointer-events: none; }
.skel-row .vinfo { gap: 0; }
#tpl-library.grid .skel-row .vcol-date { display: block; }
.skel-dot { width: 34px; height: 34px; border-radius: 50%; } /* come il cerchio di una classe (.vclass-dot) */
.skel-line + .skel-dot { margin-top: 8px; }
/* altre liste: iniziali / icona (quadrato come .user-initials e .cam-icon) e sigla della classe (cerchio come .vclass-dot) */
.skel-square { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; }
.skel-circle { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; }
.skel-row .vcol { overflow: visible; }
/* Organizzazione mentre arrivano i dati: iniziali, nome della scuola e valori delle impostazioni in grigio */
#tpl-organization.is-loading .hero-initials { background: var(--line); box-shadow: none; animation: skel-pulse 1.4s ease-in-out infinite; }
#tpl-organization.is-loading [data-field='orgTitle'],
#tpl-organization.is-loading [data-field='orgNameValue'] { border-radius: 6px; background: var(--line); animation: skel-pulse 1.4s ease-in-out infinite; }
#tpl-organization.is-loading [data-field='orgTitle'] { width: 320px; height: 28px; margin-top: 4px; }
#tpl-organization.is-loading [data-field='orgNameValue'] { width: 200px; height: 10px; margin-top: 6px; } /* Galleria istituto: sotto il nome del docente, staccato come nelle righe vere */
#tpl-library:not(.school) .skel-owner { display: none; } /* Galleria personale: la colonna ha solo le classi */

@keyframes skel-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
    .skel,
    #tpl-organization.is-loading .hero-initials,
    #tpl-organization.is-loading [data-field='orgTitle'],
    #tpl-organization.is-loading [data-field='orgNameValue'] { animation: none; }
}

/* ricerca, cambio pagina, filtri: le righe attuali restano visibili ma sbiadite finche' arrivano le nuove */
#tpl-library-rows.loading { opacity: .5; pointer-events: none; }

/* ---------- pagina del video (#tpl-live-video): tasti, frecce, colonna destra, avvio, scheletro ---------- */

/* tasti sotto il video e frecce in alto: stessa forma e stesso grigio dei tasti nel piede delle modali
   (.confirm-btn: 44px, angoli 16px, testo 16px). "Avvia/Termina diretta" (btn-primary) restano a parte */
#tpl-live-video .live-bar .btn.btn-create,
#tpl-live-video .live-nav-btn {
    height: 44px; padding: 0 16px; border: none; border-radius: 16px;
    background: var(--line); color: var(--ink); font-size: 16px; font-weight: 600;
}
#tpl-live-video .live-bar .btn.btn-create:hover,
#tpl-live-video .live-nav-btn:hover { background: var(--line-strong); }
/* ⋮ alto uguale ma senza sfondo */
#tpl-live-video .live-bar .btn.btn-create.btn-dots { width: 44px; padding: 0; background: transparent; }
#tpl-live-video .live-bar .btn.btn-create.btn-dots:hover { background: var(--hover); }
/* YouTube a destra, accanto a ⋮ (con YouTube visibile e' lui a spingere a destra) */
/* cappello di laurea di "Classroom" un po' piu' grande: alla stessa scala del "+" di "+ Capitolo" */
#tpl-live-video .live-bar [data-field='shareClassroomBtn'] .ico { width: 19px; height: 19px; }
#tpl-live-video .live-bar .live-yt-btn { margin-left: auto; }
#tpl-live-video .live-yt-btn:not([style*="none"]) ~ [data-field='liveMoreWrap'] { margin-left: 0; }
#tpl-live-video .live-bar .live-yt-btn.busy { color: var(--faint); } /* "Caricamento 45%" non e' cliccabile */

/* frecce lezione precedente / successiva, in alto a destra accanto al titolo */
#tpl-live-video .live-nav { display: flex; gap: 6px; margin-left: auto; align-self: flex-start; padding-top: 4px; }
#tpl-live-video .live-nav-btn { flex-basis: 44px; width: 44px; padding: 0; }
#tpl-live-video .live-nav-btn .ico { width: 18px; height: 18px; }
#tpl-live-video .live-nav-btn.disabled { opacity: .35; pointer-events: none; }

/* colonna destra: capitoli e "Condiviso con" anche vuoti, per il proprietario (solo l'invito, i tasti sono sotto il video) */
#tpl-live-video .live-side-empty { display: none; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--muted); }
#tpl-live-video .is-empty > .live-side-empty { display: block; }
#tpl-live-video .live-chapters.is-empty > .live-chapters-list { display: none; }
#tpl-live-video .live-chapters.is-empty .live-chapters-head,
#tpl-live-video .live-shares-box.is-empty .live-shares-head { cursor: default; }
#tpl-live-video .live-chapters.is-empty .live-chapters-count,
#tpl-live-video .live-chapters.is-empty .live-shares-caret,
#tpl-live-video .live-shares-box.is-empty .live-shares-caret { display: none; }

/* diretta in programma: "Diretta da Aula 107" e il tasto "Avvia diretta" al centro del player (solo il proprietario) */
#tpl-live-video .live-start-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
#tpl-live-video .live-start-text { font-size: 15px; color: rgba(255, 255, 255, .7); }
#tpl-live-video .live-start-btn {
    display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 16px;
    background: #fff; color: var(--ink); font-size: 17px; font-weight: 600; cursor: pointer; user-select: none;
}
#tpl-live-video .live-start-btn:hover { background: #f1f2f4; }
#tpl-live-video .live-start-btn.busy { opacity: .7; pointer-events: none; }

/* scheletro mentre arrivano i dati (.is-loading = /getVideo, .related-loading = altri video della colonna destra) */
#tpl-live-video:not(.is-loading) .live-skel { display: none; }
#tpl-live-video.is-loading .hero-name,
#tpl-live-video.is-loading .hero-title,
#tpl-live-video.is-loading .live-hero-sub,
#tpl-live-video.is-loading .live-nav,
#tpl-live-video.is-loading .live-actions,
#tpl-live-video.is-loading [data-field='liveStatus'] { display: none; }
#tpl-live-video.is-loading .hero-initials,
#tpl-live-video.is-loading [data-field='liveStreamArea'] { background: var(--line); box-shadow: none; animation: skel-pulse 1.4s ease-in-out infinite; }
#tpl-live-video .live-skel-nav { display: flex; gap: 6px; margin-left: auto; align-self: flex-start; padding-top: 4px; }
#tpl-live-video .live-skel-bar { display: flex; gap: 8px; flex: 1; }
#tpl-live-video .live-skel-bar .skel,
#tpl-live-video .live-skel-nav .skel { height: 44px; border-radius: 16px; }
#tpl-live-video.is-loading .live-side > :not(.live-side-skel) { display: none !important; } /* capitoli e classi arrivano con il video */
#tpl-live-video:not(.is-loading):not(.related-loading) .live-side-skel { display: none; }
#tpl-live-video .live-side-skel .live-related-row { cursor: default; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    #tpl-live-video.is-loading .hero-initials,
    #tpl-live-video.is-loading [data-field='liveStreamArea'] { animation: none; }
}

/* Galleria: tasti con i video selezionati come nella pagina del video ("Classroom" grigio, ⋮ senza sfondo) */
#tpl-library .vhead-actions .btn.btn-create { background: var(--line); color: var(--ink); }
#tpl-library .vhead-actions .btn.btn-create:hover { background: var(--line-strong); }
#tpl-library .vhead-actions .btn.btn-create.btn-dots { background: transparent; }
#tpl-library .vhead-actions .btn.btn-create.btn-dots:hover { background: var(--hover); }
/* Galleria: cappello di laurea ("Condividi su Classroom") nelle righe un po' piu' grande delle altre icone, come nella pagina del video */
#tpl-library [data-field='shareRowBtn'] .ico { width: 18px; height: 18px; }

/* lista o pagina vuota (ricerca senza risultati, nessun video/utente/telecamera/classe, assistenza): tutto al centro;
   il tasto come gli altri grigi (stessa forma dei tasti nel piede delle modali). Vedi createEmptyState in app.js */
.empty.page-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 50vh; padding: 40px 20px; text-align: center;
}
.page-empty-ico { width: 32px; height: 32px; color: var(--faint); margin-bottom: 14px; }
.page-empty-title { font-size: 18px; font-weight: 700; color: var(--ink-soft); }
.page-empty-text { margin-top: 6px; font-size: 14px; color: var(--muted); }
.page-empty-text:empty { display: none; }
.page-empty-btn {
    display: flex; align-items: center; height: 44px; margin-top: 20px; padding: 0 16px; border-radius: 16px;
    background: var(--line); color: var(--ink); font-size: 16px; font-weight: 600; cursor: pointer; user-select: none;
}
.page-empty-btn:hover { background: var(--line-strong); }
/* spazi stretti: piu' piccolo e senza altezza minima */
.empty.page-empty.compact { min-height: 0; padding: 32px 16px; }
.page-empty.compact .page-empty-ico { width: 24px; height: 24px; margin-bottom: 10px; }
.page-empty.compact .page-empty-title { font-size: 15px; }
.page-empty.compact .page-empty-text { font-size: 13px; }
/* assistenza: "Scegli una conversazione" al centro della colonna destra */
.support-conversation > .page-empty { flex: 1; min-height: 0; }

/* pagina del video, solo superadmin: box "Sporfie" con i dati tecnici dell'evento */
#tpl-live-video .live-sporfie-state { font-size: 13px; color: var(--muted); }
#tpl-live-video .live-sporfie-state.waiting { color: var(--pending); }
#tpl-live-video .live-sporfie-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 2px 0; }
#tpl-live-video .live-sporfie-label { flex: 0 0 96px; font-size: 13px; color: var(--muted); }
#tpl-live-video .live-sporfie-value { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tpl-live-video .live-sporfie-value.missing { color: var(--faint); }
#tpl-live-video .live-sporfie-copy { flex: 0 0 auto; width: 28px; height: 28px; }
#tpl-live-video .live-sporfie-copy .ico { width: 14px; height: 14px; }

/* ---------- telefono: la sidebar sparisce, si apre sopra la pagina dal tasto ☰ in alto ---------- */
.topbar-menu-btn, .sidebar-backdrop { display: none; }
@media (max-width: 760px) {
    .topbar { padding: 0 16px; }
    .topbar-menu-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 6px 0 -8px; border-radius: 10px; color: var(--ink); cursor: pointer; }
    .topbar-menu-btn .ico { width: 22px; height: 22px; }
    .topbar-brand { flex-basis: auto; }
    .topbar-sep { align-self: center; height: 24px; margin: 0 14px; background: var(--line-strong); }
    .topbar-org { margin-left: 0; }

    .app .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 900;
        width: 280px; max-width: 85vw; padding-top: 16px;
        border-right: 0; box-shadow: 0 0 40px rgba(0, 0, 0, .2);
        transform: translateX(-100%); visibility: hidden;
        transition: transform .2s ease, visibility 0s .2s;
    }
    .app.mobile-menu-open .sidebar { transform: none; visibility: visible; transition: transform .2s ease; }
    .sidebar-toggle .ico { --ico: url('/static/icons/lucide/x.svg'); } /* "Chiudi menu" con la ✕ */
    .app.mobile-menu-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 899; background: rgba(15, 23, 42, .4); }
}

/* tasto viola nell'intestazione della tabella, solo sul telefono, al posto di quello in alto
   ("Nuovo" in Utenti, "Aggiorna" in Classi); .off = l'utente non puo' usarlo */
.vhead-mobile-btn { display: none; }
.btn.btn-create.vhead-mobile-btn { padding: 0 18px; border-radius: 12px; background: var(--accent); color: #fff; } /* arrotondato come gli altri tasti (44px/16, qui 34px) */
.btn.btn-create.vhead-mobile-btn:hover { background: var(--accent-hover); }
.vhead-mobile-btn.btn-disabled { opacity: .45; pointer-events: none; }
@media (max-width: 760px) {
    .vhead-mobile-btn:not(.off) { display: flex; align-items: center; }
}

/* ---------- telefono, Utenti: solo la colonna Utente (ruolo, dirette e ultimo accesso nascosti) ---------- */
@media (max-width: 760px) {
    #tpl-user-list .vlist { min-width: 0; }
    #tpl-user-list .vcol-role,
    #tpl-user-list .vcol-num,
    #tpl-user-list .vcol-access { display: none; }
    /* in alto niente tasto: si crea dal "Nuovo" nell'intestazione, piu' vicino al bordo destro */
    #tpl-user-list .hero-create { display: none !important; }
    #tpl-user-list .vlist-head { padding-right: 16px; }
    /* menu ⋮ (Elimina) allineato a destra del tasto: centrato usciva dallo schermo */
    #tpl-user-list .vmenu { left: auto; right: 0; transform: none; }
    #tpl-user-list .vmenu::before { left: auto; right: 12px; margin-left: 0; }
}

/* ---------- telefono, Classi: solo la colonna Classe (argomenti e video condivisi nascosti); "Aggiorna" nell'intestazione ---------- */
@media (max-width: 760px) {
    #tpl-classroom .vlist { min-width: 0; }
    #tpl-classroom .vcol-num,
    #tpl-classroom .vcol-shared { display: none; }
    #tpl-classroom .hero-create { display: none !important; }
    #tpl-classroom .vlist-head { padding-right: 16px; }
    #tpl-classroom .sync-status { display: none; } /* "Aggiornate il..." schiacciava la ricerca */
}

/* ---------- telefono, Telecamere: tutte le colonne si stringono, i testi lunghi con i puntini ---------- */
@media (max-width: 760px) {
    #tpl-cam-list .vlist { min-width: 0; }
    #tpl-cam-list .vlist-head,
    #tpl-cam-list .vrow { padding-right: 16px; }
    #tpl-cam-list .vcol-video { flex: 1 1 0; min-width: 0; }
    #tpl-cam-list .vcol-video > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #tpl-cam-list .vinfo { min-width: 0; }
    #tpl-cam-list .vcol.vcol-camstatus { flex: 1 1 0; min-width: 0; max-width: none; }
    #tpl-cam-list .vcol.vcol-toggle { flex: 0 0 auto; min-width: 0; }
    #tpl-cam-list .hero-create { display: none !important; }
    #tpl-cam-list .vlist-toolbar { padding-right: 16px; }
    #tpl-cam-list .vlist-toolbar input { min-width: 0; }
    #tpl-cam-list .vmenu { left: auto; right: auto; left: 0; transform: none; }
    #tpl-cam-list .vmenu::before { left: 12px; margin-left: 0; }
}

/* ---------- telefono, Galleria: niente caselle di selezione (si elimina dal cestino della riga), niente colonne
   "Data e aula" e "Docente e classi"; "Crea diretta" in alto diventa "Crea" nell'intestazione (solo Galleria personale) ---------- */
@media (max-width: 760px) {
    #tpl-library .vlist { min-width: 0; }
    #tpl-library .vcheck-cell,
    #tpl-library .vcol-date,
    #tpl-library .vcol-owner { display: none; }
    #tpl-library .hero-create { display: none !important; }
    #tpl-library.school:not(.can-create) .vhead-mobile-btn { display: none; }
    #tpl-library .vlist-head { padding-right: 16px; }
    /* senza la casella la riga partiva a 40px: miniature e "Video" piu' vicini al bordo */
    #tpl-library .vlist-head,
    #tpl-library .vrow,
    #tpl-library .vlist-toolbar { padding-left: 16px; }
    #tpl-library .vhead-actions .btn.btn-create.vhead-mobile-btn { padding: 0 24px; background: var(--accent); color: #fff; } /* viola, non grigio come gli altri tasti della Galleria */
    #tpl-library .vlist-toolbar input { min-width: 0; }
    #tpl-library .vlist-range { display: none; } /* "1-50 di 102": la ricerca resta piu' larga; restano le frecce */
    #tpl-library .vfilters { display: none; } /* Galleria istituto: niente riga dei filtri per stato */
    #tpl-library .vview-btn { display: none; } /* niente griglia sul telefono */
}

/* ---------- telefono, pagina del video (si rifa' un punto alla volta) ---------- */
@media (max-width: 760px) {
    #tpl-live-video .live-nav { display: none; } /* niente frecce lezione precedente / successiva */
    #tpl-live-video .live-skel-nav { display: none; } /* e neanche nello scheletro */
    /* l'intestazione (iniziali, docente, titolo, stato) sotto il video, prima dei tasti */
    #tpl-live-video .live-main > .page-hero { order: 1; }
    #tpl-live-video .live-main > .live-bar,
    #tpl-live-video .live-main > .live-desc { order: 2; }
    /* player da bordo a bordo: annulla i 16px di margine della pagina, senza angoli arrotondati.
       L'altezza 16:9 (padding 56.25%) e' calcolata sulla larghezza della pagina: + 56.25% dei 32px aggiunti = 18px */
    #tpl-live-video .live-main > .video-container { width: calc(100% + 32px); max-width: none; margin: 0 -16px; padding-bottom: calc(56.25% + 18px); border-radius: 0; }
    #tpl-live-video .live-main > .video-container .cplayer,
    #tpl-live-video .live-main > .video-container video { border-radius: 0; }
    .main:has(#tpl-live-video) { padding-top: 0; padding-left: 16px; padding-right: 16px; } /* video subito sotto la barra, margini ai lati di 16px */
    /* intestazione sotto il video: testi piu' piccoli (docente 16 -> 14, titolo 28 -> 20, stato 13 -> 12) */
    #tpl-live-video .live-main .hero-name { font-size: 14px; }
    #tpl-live-video .live-hero-title { font-size: 20px; }
    #tpl-live-video .live-hero-sub { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 16px; } /* mai su due righe */
    #tpl-live-video .live-hero-sub > * { flex: 0 0 auto; }
    #tpl-live-video .live-hero-sub > [data-field='liveDate'] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* se non ci sta, la data con i puntini */
    #tpl-live-video .live-main .page-hero { padding: 0; } /* senza gli 8px sotto */
    /* tasti sotto il video un po' piu' piccoli (44 -> 38px, testo 16 -> 13px): cosi' stanno su una riga */
    #tpl-live-video .live-actions { gap: 6px; }
    #tpl-live-video .live-bar .btn.btn-create { gap: 6px; height: 38px; padding: 0 10px; border-radius: 13px; font-size: 13px; }
    #tpl-live-video .live-bar .btn.btn-create.btn-dots { width: 34px; padding: 0; }
    #tpl-live-video .live-bar .btn.btn-create .ico { width: 14px; height: 14px; }
    #tpl-live-video .live-bar [data-field='shareClassroomBtn'] .ico { width: 16px; height: 16px; }
    #tpl-live-video .live-actions [data-field='liveActionBtn'] { height: 38px; padding: 0 14px 0 12px; border-radius: 13px; font-size: 13px; }
    /* ⋮ (Modifica / Elimina) a destra del titolo (spostato da live.js), senza sfondo come nella fila dei tasti;
       il menu allineato a destra del tasto: centrato usciva dallo schermo */
    /* il ⋮ sta sopra l'angolo in alto a destra: fa spazio solo a docente e titolo, la riga delle info resta larga */
    #tpl-live-video .live-main > .page-hero { position: relative; }
    #tpl-live-video .page-hero > .vmore { position: absolute; top: 0; right: -8px; }
    #tpl-live-video .page-hero:has(> .vmore:not([style*="none"])) :is(.hero-name, .live-hero-title) { padding-right: 28px; }
    #tpl-live-video .page-hero > .vmore .btn-dots { width: 34px; height: 38px; padding: 0; border: none; border-radius: 13px; background: transparent; color: var(--ink); }
    #tpl-live-video .page-hero > .vmore .btn-dots:hover { background: var(--hover); }
    #tpl-live-video .page-hero > .vmore .vmenu { left: auto; right: 0; transform: none; }
    #tpl-live-video .page-hero > .vmore .vmenu::before { left: auto; right: 12px; margin-left: 0; }
    /* riga sotto il titolo: solo stato, aula e data (niente orario inizio-fine e durata) */
    #tpl-live-video .live-hero-sub [data-field='liveTimeInfo'],
    #tpl-live-video .live-hero-sub [data-field='liveDuration'] { display: none; }
    #tpl-live-video .live-main .hero-initials { flex-basis: 48px; width: 48px; height: 48px; border-radius: 10px; font-size: 14px; } /* iniziali 60 -> 48px */
}

/* ---------- telefono, modale di conferma: "Elimina definitivamente" su una riga ---------- */
@media (max-width: 760px) {
    .confirm-box { max-width: calc(100% - 32px); padding: 0 16px; }
    .confirm-box .confirm-btn { height: 40px; padding: 0 12px; border-radius: 13px; font-size: 13px; white-space: nowrap; } /* come i tasti della pagina del video sul telefono */
}

/* ---------- telefono, Team: colonne strette con i puntini; "Nuovo superadmin" in alto diventa "Nuovo" nell'intestazione ---------- */
@media (max-width: 760px) {
    #tpl-team .hero-create { display: none !important; }
    #tpl-team .vlist { min-width: 0; }
    #tpl-team .vcol-video { flex: 1 1 0; min-width: 0; }
    #tpl-team .vinfo { min-width: 0; }
    #tpl-team .vtitle,
    #tpl-team .vstatus { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #tpl-team .vcol-access { display: none; } /* niente "Ultimo accesso": "Nuovo" va in fondo a destra */
    #tpl-team .vlist-head { padding-right: 16px; }
}

/* ---------- telefono, modale utente: descrizioni dei ruoli su una riga con i puntini ---------- */
@media (max-width: 760px) {
    .user-role-choice .soft-row > div:last-child { min-width: 0; }
    .user-role-choice .row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* "Nuovo utente": tre tasti non ci stanno, resta "Crea senza invito" + "Crea e invita" (si chiude con la X) */
    #tpl-user-modal .soft-foot:has([data-field='userCreatePlainBtn']) > .confirm-btn[onclick="closeUserModal()"] { display: none; }
    #tpl-user-modal .soft-foot > .confirm-btn { white-space: nowrap; }
}

/* ---------- Galleria: "Condividi su Classroom" grigio finche' il video non e' su YouTube ---------- */
#tpl-library .round-btn.share-off { opacity: .35; cursor: default; }
#tpl-library .round-btn.share-off:hover { background: transparent; }

/* ---------- Galleria: tooltip delle classi cliccabile (apre la classe o l'argomento in Classroom) ----------
   resta aperto passandoci sopra; ::after copre lo spazio tra i cerchi e il tooltip, cosi' non si chiude a meta' strada */
#tpl-library .vtip { pointer-events: auto; }
#tpl-library .vtip:hover { display: block; }
#tpl-library .vtip::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
#tpl-library a.vtip-item { display: block; margin: 0 -6px; padding: 5px 6px; border-radius: 6px; color: inherit; text-decoration: none; }
#tpl-library a.vtip-item:hover { background: rgba(255, 255, 255, .1); }
#tpl-library .vtip-topic a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); }
#tpl-library .vtip-topic a:hover { text-decoration-color: #fff; }

.soft-form .org-file-field { cursor: pointer; } /* Organizzazione -> YouTube: la riga del client apre la scelta del file */

/* ---------- Galleria: caricamento su YouTube accanto allo stato ("· YouTube: caricamento 45%") ---------- */
.vyt-progress { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vyt-progress:not(:empty)::before { content: "·"; margin-right: 6px; color: var(--faint); }
.vyt-progress.error { color: var(--live); }

/* ---------- pagina del video, riquadro tecnico "Classroom" (superadmin): classe e argomento sopra i dati di ogni condivisione ---------- */
#tpl-live-video .live-info-sub { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
#tpl-live-video .live-info-sub:first-child { margin-top: 4px; }

/* "Diretta non riuscita" (stream mai arrivato) nella Galleria e nelle liste */
.vstatus.failed { color: var(--live); }

/* "Diretta non riuscita" nella pagina del video (stato sotto il titolo) */
#tpl-live-video [data-field='liveBadge'].failed { color: var(--live); }

/* ---------- attese di Sporfie (stream, registrazione, avvio, chiusura): spinner accanto alla scritta,
   nel player e sotto il titolo della pagina del video e nelle righe della Galleria ---------- */
@keyframes cid-spin { to { transform: rotate(360deg); } }
#tpl-live-video .overlay.waiting { gap: 10px; }
#tpl-live-video .overlay.waiting::before,
#tpl-live-video [data-field='liveBadge'].pending::before,
#tpl-library .vstatus.pending::before {
    content: "";
    flex: none;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cid-spin .8s linear infinite;
}
#tpl-live-video [data-field='liveBadge'].pending,
#tpl-library .vstatus.pending { display: inline-flex; align-items: center; gap: 6px; }
#tpl-live-video [data-field='liveBadge'].pending::before,
#tpl-library .vstatus.pending::before { width: 9px; height: 9px; border-width: 1.5px; }

/* ---------- modale "Scegli una telecamera": titoletti dei gruppi (piu' usate / tutte) e nessun risultato ---------- */
#tpl-video-modal .cam-modal-group { padding: 14px 20px 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--faint); }
#tpl-video-modal .cam-modal-empty { padding: 24px 20px; font-size: 14px; color: var(--muted); text-align: center; }
/* altezza fissa (quella massima delle modali, 80% dello schermo): cercando la modale non si accorcia ne' "salta" */
#tpl-video-modal { height: 80vh; }

/* ---------- pagina del video: matita accanto al titolo (solo il proprietario) e titolo in modifica ---------- */
#tpl-live-video .live-title-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 50%;
    color: var(--faint);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
#tpl-live-video .live-title-edit:hover { background: var(--line); color: var(--ink); }
#tpl-live-video .live-title-edit .ico { width: 17px; height: 17px; }
/* titolo e matita in riga: il taglio a 2 righe sta solo sul testo, cosi' la matita resta sempre visibile */
#tpl-live-video .live-hero-title { display: flex; align-items: flex-start; gap: 4px; overflow: visible; -webkit-line-clamp: unset; }
#tpl-live-video .live-title-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* proprietario: il titolo stesso si clicca per modificarlo; al passaggio solo una linea sotto, come il campo in modifica */
#tpl-live-video .live-title-text.editable { cursor: text; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .15s; }
#tpl-live-video .live-title-text.editable:hover { box-shadow: inset 0 -2px 0 var(--line-strong); }
#tpl-live-video .live-title-edit { flex: none; margin-left: 0; margin-top: 2px; }
#tpl-live-video .live-hero-title.editing { display: block; }
#tpl-live-video .live-title-input {
    width: 100%;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 2px solid var(--accent);
    background: transparent;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    outline: none;
    resize: none;
    overflow: hidden;
    display: block;
}
#tpl-live-video .live-title-input::selection { background: var(--accent); color: #fff; }

/* ---------- verifica su Sporfie (superadmin): tasto nel riquadro e modale con confronto e JSON ---------- */
.ico-refresh { --ico: url('/static/icons/lucide/rotate-cw.svg'); }
#tpl-live-video .live-sporfie-verify { flex: 0 0 26px; width: 26px; height: 26px; margin-left: -4px; color: var(--muted); }
/* riquadro Sporfie: l'icona subito dopo il titolo, lo stato ("Completo") resta a destra */
#tpl-live-video .live-side .live-shares-head:has(.live-sporfie-verify:not([style*="none"])) .card-title { flex: 0 0 auto; }
#tpl-live-video .live-shares-head:has(.live-sporfie-verify:not([style*="none"])) .live-sporfie-state { margin-left: auto; }
#tpl-live-video .live-sporfie-verify .ico { width: 14px; height: 14px; }
#tpl-sporfie-check { width: 640px; height: 80vh; }
#tpl-sporfie-check .modal-body { padding: 16px 24px; }
#tpl-sporfie-check .sporfie-check-note { padding: 24px 0; font-size: 14px; color: var(--muted); text-align: center; }
#tpl-sporfie-check .sporfie-check-row { display: grid; grid-template-columns: 110px 20px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
#tpl-sporfie-check .sporfie-check-label { font-weight: 600; color: var(--ink); }
#tpl-sporfie-check .sporfie-check-mark { font-weight: 700; color: var(--accent); }
#tpl-sporfie-check .sporfie-check-row.differs .sporfie-check-mark { color: var(--live); }
#tpl-sporfie-check .sporfie-check-row.missing .sporfie-check-mark { color: var(--faint); }
#tpl-sporfie-check .sporfie-check-values div { display: flex; gap: 8px; min-width: 0; }
#tpl-sporfie-check .sporfie-check-values span { flex: 0 0 54px; color: var(--muted); }
#tpl-sporfie-check .sporfie-check-values em { min-width: 0; font-style: normal; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tpl-sporfie-check .sporfie-check-json {
    margin: 16px 0 0;
    padding: 12px;
    border-radius: 10px;
    background: var(--bg);
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
#tpl-live-video a.live-sporfie-value { color: var(--accent); text-decoration: none; }
#tpl-live-video a.live-sporfie-value:hover { text-decoration: underline; }

/* ---------- pagina del video: descrizione modificabile (solo il proprietario) ---------- */
/* stessa altezza a riposo, al passaggio e in modifica: la linea sotto resta nello stesso punto */
#tpl-live-video .live-desc-text.editable { min-height: 44px; cursor: text; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .15s; }
#tpl-live-video .live-desc-text.editable:hover { box-shadow: inset 0 -2px 0 var(--line-strong); }
#tpl-live-video .live-desc-text.placeholder { color: var(--faint); }
#tpl-live-video .live-desc-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    box-shadow: inset 0 -2px 0 var(--accent);
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    resize: none;
    overflow: hidden;
    outline: none;
}
#tpl-live-video .live-desc-input::placeholder { color: var(--faint); }
#tpl-live-video .live-desc-input::selection { background: var(--accent); color: #fff; }

/* ---------- avviso (alertModal, al posto di alert() del browser): testo con aria sopra, "OK" viola come conferma ---------- */
.alert-box .confirm-question { padding-top: 22px; font-size: 15px; font-weight: 500; line-height: 1.45; white-space: pre-line; }
.alert-box .confirm-actions .confirm-btn[data-action=ok] { min-width: 72px; background-color: var(--accent); color: #fff; }
.alert-box .confirm-actions .confirm-btn[data-action=ok]:hover { background-color: var(--accent-hover); }

/* ---------- toast in basso al centro (showToast in app.js), come nel vecchio progetto ---------- */
.ico-circle-check { --ico: url('/static/icons/lucide/circle-check.svg'); }
.app-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 248px;
    max-width: calc(100vw - 32px);
    height: 48px;
    padding: 0 22px 0 14px;
    border-radius: 32px;
    background: #2d2d2d;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 100px);
    transition: transform .4s ease, opacity .4s ease;
}
.app-toast.show { opacity: 1; transform: translate(-50%, 0); }
.app-toast .ico { flex: none; width: 22px; height: 22px; }