:root {
    --widthSelection: 305px;
    --heightCollapsible: 30px;
}

/* ========================================================= */
/* =================== TOAST NOTIFICATIONS ================= */
/* ========================================================= */

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.toast {
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    animation: slideIn 0.3s ease-out;
    font-size: 14px;
    font-weight: 500;
}

.toast-loading {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    border-left: 4px solid #0d47a1;
}

.toast-success {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border-left: 4px solid #2e7d32;
}

.toast-error {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    border-left: 4px solid #c62828;
}

.toast-warning {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    border-left: 4px solid #e65100;
}

/* G19.45 — kind `info` mancava (background trasparente). */
.toast-info {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    border-left: 4px solid #0369a1;
}

/* G19.45 — dark theme variants: aumentano contrasto e box-shadow per
 * leggibilita' su sfondo scuro. */
body.fm-dark .toast {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65);
}
body.fm-dark .toast-loading {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    border-left-color: #60a5fa;
}
body.fm-dark .toast-success {
    background: linear-gradient(135deg, #16a34a, #15803d);
    border-left-color: #86efac;
}
body.fm-dark .toast-error {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-left-color: #fca5a5;
}
body.fm-dark .toast-warning {
    background: linear-gradient(135deg, #d97706, #b45309);
    border-left-color: #fcd34d;
}
body.fm-dark .toast-info {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    border-left-color: #7dd3fc;
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.toast-message {
    font-size: 13px;
    opacity: 0.95;
}

.toast-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.toast.removing {
    animation: slideOut 0.3s ease-out forwards;
}

/* Scoped to body.exercise-context so layout_es.css can be loaded globally
   without polluting home/dashboard layouts. Phase 21 — padding-top
   spostato su `body.fm-has-upbar` (solo pagine esercizio/verifica), così
   mappa/risdoc/bes (senza upbar) non riservano i 48px in alto. */
body.exercise-context {
    background-color: powderblue;
    min-width: 555px;
}
body.fm-has-upbar {
    padding-top: 48px;
}

/* ========================================================= */
/* ========================= TESTO ========================= */
/* ========================================================= */

h1 {
    color: blue;
    margin: 0px;
}

p {
    color: black;
    margin: auto;
}

.tab {
    display: inline-block;
    margin-left: 40px;
}

.ad {
    border: dotted;
    margin: 0px 20px 0px 20px;
    padding: 5px;
    display: inline-block;
}

.titolo {
    margin-bottom: 10px;
}

/* table{
  display: flex;
} */

.row-actions-header {
    background: linear-gradient(to right, #a095d5, transparent);
    /* Gradiente da #a095d5 a trasparente */
}

.VF table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

.VF table th {
    border: 1px solid black;
}

.VF table td {
    border: 1px solid black;
    text-align: left;
}
.vf-total-points-input{
    width: calc(100% - 29px);
    height: 15px;
    text-align: center; 
    border: 1px solid #ccc; 
    background: #fff;
    /* font-size: x-small; */
}
/* .checkboxVF { */
/* position: absolute; */
/* margin-left: 140px; */
/* padding: 0; */
/* } */
.tabelle {
    margin-top: 10px;
}

.tabelle table,
.RM table {
    /* width: 100%; */
    text-align: center;
    border-collapse: collapse;
}

.tabelle table th,
.RM table th {
    border: 1px solid black;
    text-align: left;
}

.tabelle table td,
.RM table td {
    border: 1px solid black;
    text-align: left;
}

/* .Aff {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-top: 15px;
} */

.dina {
    border-collapse: collapse;
    border: 0 solid;
    border-width: 0px 0;
    margin-left: auto;
    margin-right: auto;
}

.dina th:first-child,
.dina td:nth-child(1) {
    padding: 10px;
    background: linear-gradient(rgb(0, 0, 0) 50%, rgb(0, 0, 0) 50%) top right / 1px 100% no-repeat;
}

.dina td {
    vertical-align: middle;
    padding: 10px;
}

.dina th:nth-child(1) {
    padding: 10px;
    background-position: bottom right;
}

.dina th:nth-child(2) {
    padding: 10px;
}

/* ========================================================= */
/* ====================== TEMA UBPBAR ====================== */
/* ========================================================= */

.upbar {
    position: fixed;
    top: 0px;
    /* Full viewport (master-style): background si estende a tutta larghezza,
       ma il contenuto viene spinto a destra della sidebar tramite
       padding-left dinamico che si adatta a body.fm-sidebar-closed. */
    left: 0;
    width: 100vw;
    padding-left: var(--widthLsidebar);
    background: #5959a9;
    height: 74px;
    z-index: 4;
    padding-top: 5px;
    padding-bottom: 10px;
    box-sizing: border-box;
    transition: padding-left .3s ease;
    /* overflow: hidden; */
}
body.fm-sidebar-closed .upbar {
    padding-left: 34px;
}

/* Stato nascosto upbar */
.upbar.upbar-hidden {
    top: -90px;
}

/* Quando l'upbar è nascosta, il toggle rimane visibile (non segue top:-90px) */
.upbar.upbar-hidden #upbar-toggle-container {
    position: fixed;
    top: 10px;
    left: calc(var(--widthLsidebar) + 5px);
}
body.fm-sidebar-closed #upbar-toggle-container,
body.fm-sidebar-closed .upbar.upbar-hidden #upbar-toggle-container {
    left: 39px;
}

/* Contenitore toggle upbar — posizionato dopo la sidebar (refactor).
   `left` tiene conto di --widthLsidebar (aperta) vs 34px (chiusa). */
#upbar-toggle-container {
    position: absolute;
    top: 10px;
    left: calc(var(--widthLsidebar) + 5px);
    transition: left .3s ease;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ddd;
    border-radius: 22px;
    padding: 0.5px 0px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#upbar-toggle-container:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Checkbox nascosto */
#upbar-toggle {
    display: none;
}

/* Slider del toggle */
.upbar-slider {
    display: block;
    width: 30px;
    height: 30px;
    background-color: #7877db;
    border-radius: 100%;
    cursor: pointer;
    text-align: center;
    place-content: center;
    line-height: 22px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    transition: all 0.3s ease;
    user-select: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.upbar-slider:hover {
    transform: scale(1.02);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.upbar-slider:active {
    transform: scale(0.98);
}

/* .upbar:hover { */
/* overflow: hidden; */
/* } */

.scrollbarUpBar {
    position: relative;
    display: flex;
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    /* Margin-left ridotto: upbar ha già padding-left = sidebar, il
       contenuto parte subito dopo lo spazio del toggle ▼. */
    margin: 7px 10px 0 45px;
    gap: 10px;
    z-index: 4;
}

.scrollbarUpBar:hover {
    overflow-x: scroll;
    background-color: #6d6dcf;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Personalizzazione Scrollbar per .scrollbarUpBar */
.scrollbarUpBar::-webkit-scrollbar {
    height: 8px; /* Spessore scrollbar orizzontale (default: 16px) */
}

.scrollbarUpBar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1); /* Sfondo della traccia */
    border-radius: 4px;
}

.scrollbarUpBar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #4a4a9a, #6d6dcf); /* Colore del cursore */
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.scrollbarUpBar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #5a5aaa, #7d7ddf); /* Colore hover */
}

.scrollbarUpBar::-webkit-scrollbar-corner {
    background: transparent; /* Angolo tra scrollbar verticali/orizzontali */
}

/* .scrollbarUpBar:hover .dropdown {
  border: 2px solid white;
  padding: 0 0 0 10px;
} */

.upbar-controls-container {
    display: flex;
    align-items: baseline;
    place-self: flex-start;
    margin-top: 5px;
}

#wrapper-mods {
    position: relative;
    display: grid;
    align-items: center;
    width: fit-content;
    /* top: -7px;
    margin-left: 17px; */
    /* display: none; */
}

.wrapgrid{
    display: grid;
    margin-left: 7px;
    row-gap: 10px;
    /* align-self: self-end; */
}
.wrapgrid-checks{
    display: grid;
    margin-left: 7px;
    /* row-gap: 10px; */
    /* align-self: self-end; */
}

.labelBtnDrop {
    display: block;
    color: white;
    font-size: 8pt;
}

/* ========================================================= */
/* =================== DARK MODE BUTTON =================== */
/* ========================================================= */

.fm-sb-dark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #2c2c54, #40407a);
    border: 1px solid #57606f;
    border-radius: 20px;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 90px;
    height: 29px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.fm-sb-dark:hover {
    background: linear-gradient(135deg, #40407a, #5a5aaa);
    border-color: #747d8c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.fm-sb-dark:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.fm-sb-dark.active {
    background: linear-gradient(135deg, #ffa726, #ff9800);
    border-color: #ff8a65;
    color: #ffffff;
    box-shadow: 0 3px 6px rgba(255, 152, 0, 0.4);
}

.fm-sb-dark.active:hover {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    border-color: #ff7043;
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.5);
}

.darkmode-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.fm-sb-dark.active .darkmode-icon {
    transform: rotate(180deg);
}

.darkmode-text {
    font-family: inherit;
    letter-spacing: 0.5px;
}

/* ========================================================= */
/* ================== LOGOUT & ANALYTICS ================== */
/* ========================================================= */

/* Logout Module - Stile coerente con UpBar */
.logout-module {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    place-self: flex-start;;
    margin: 0px;
    padding: 5px;
    position: relative;
    font-family: inherit;
}

.logout-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 100px;
    height: auto;
}

/* Indicatori utente e sezione - layout verticale con stessa larghezza */
.user-indicator,
.section-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    width: 100%; /* Stessa larghezza del contenitore */
    box-sizing: border-box;
    min-height: 14px;
}

.user-indicator:before {
    content: "👤";
    margin-right: 4px;
}

.section-indicator:before {
    content: "📚";
    margin-right: 4px;
}

/* Pulsante Logout - stessa larghezza degli indicatori */
.logout-btn {
    width: 100% !important; /* Stessa larghezza del contenitore */
    height: 18px !important;
    padding: 0px !important;
    font-size: 9px !important;
    font-weight: bold !important;
    border-style: outset !important;
    border-width: 2px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    
    /* Colori base ispirati al tema dell'UpBar */
    background: linear-gradient(135deg, #ff4444, #cc3333) !important;
    border-color: #aa2222 !important;
    color: white !important;
    
    /* Effetti visivi */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.logout-btn:hover {
    background: linear-gradient(135deg, #ff5555, #dd4444) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(255, 68, 68, 0.4) !important;
    border-color: #bb3333 !important;
}

.logout-btn:active {
    background: linear-gradient(135deg, #dd3333, #bb2222) !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.logout-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    background: #888888 !important;
    border-color: #666666 !important;
}

/* Analytics Button */
#analytics-btn {
    width: 80px;
    height: 29px;
    padding: 0px;
    font-size: 9px;
    font-weight: bold;
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    border: 2px outset #2E7D32;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

#analytics-btn:hover {
    background: linear-gradient(135deg, #66BB6A, #4CAF50);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
}

#analytics-btn:active {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Animazione loading */
@keyframes logout-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.logout-module .logout-loading {
    animation: logout-pulse 1s infinite;
}

/* Responsive per UpBar stretta */
@media (max-width: 768px) {
    .logout-section {
        margin-left: 10px;
        gap: 7px;
        min-width: 80px;
    }
    
    .user-indicator,
    .section-indicator {
        font-size: 10px;
        padding: 2px 2px;
        min-height: 12px;
    }
    
    .logout-btn {
        height: 17px !important;
        font-size: 10px !important;
    }
}

/* ========================================================= */
/* ====================== BUTT UBPBAR ====================== */
/* ========================================================= */

.btn-es {
    border-style: outset;
    height: 24px;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 90px;
}

.btn-esAct {
    background: linear-gradient(135deg, #ffff33, #f5f500);
    border: 2px outset #c4c400;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(255, 255, 0, 0.4);
}

.btn-esCopy {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: 2px solid #4b7ac1;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 102, 255, 0.4);
}

.btn-esCopy:hover {
    background: linear-gradient(135deg, #3385ff, #1a75ff);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 102, 255, 0.6);
}

.btn-esAct:hover {
    background: linear-gradient(135deg, #ffff66, #ffff33);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 255, 0, 0.6);
}

.No-drop,
.dropdown {
    /* margin: 0px 10px 10px 10px;
    padding: 5px; */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.selwrapbtncopy {
    display: none; /* Nascosto di default */
    margin-left: 6px;
    padding: 5px;
    border: 2px solid #f2ff00;
    border-radius: 4px;
    background: rgba(0, 0, 139, 0.1);
    min-width: 210px;
    place-self: flex-start;
    gap: 10px;
    /* Non schiacciare: impedisce che flex-shrink del .scrollbarUpBar
       compatti il gruppo e faccia overflow-ware i figli absolute. */
    flex-shrink: 0;
    position: relative;
}

/* Mostra la sezione solo per gli admin */
body.admin-access .selwrapbtncopy,
.upbar.admin-access .selwrapbtncopy {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.wrapbtn-es1 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 auto;
}

.wrapPrintmods {
    display: flex;
    flex-direction: column;
    gap:2px;
    align-items: flex-start;
    justify-content: center;
    /* padding: 4px; */
}

.wrapPrintmod {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wrapPrintmod input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.wrapPrintmod label {
    margin: 0;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}

.multiarg {
    cursor: pointer;
    margin: 0;
}

#multiarg + label {
    font-size: 12px;
    margin: 0;
}

.wrapbtn-es2 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: space-between;
    align-items: stretch;
    flex: 1;
}

.btn-UpBar,
.dropdown-button {
    width: 80px;
    /* height: 20px; */
    padding: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dropdown-button {
    font-size: 10px;
}

#btnP{
font-size: 7pt;
}

.dropdown-content {
    position: absolute;
    top: 92%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background-color: #f9f9f9;
    min-width: 50px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 12;
}
/* Phase 16 — apertura via click (bindDropdownToggle). */
.dropdown-content.is-open { display: block; }

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    border: 1px solid #c2bdbd;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    background-color: #ddd;
    color: black;
    height: 5px;
}

.dropdown-content a:hover {
    background-color: #453ae4;
    color: rgb(225, 233, 236);
}

.tooltip {
    position: fixed;
    background-color: #333;
    color: #fff;
    text-align: center;
    /* padding: 3px; */
    margin: 0px;
    border-radius: 3px;
    display: none;
    z-index: 1000;
    width: 200px;
    /* Larghezza fissa */
    height: auto;
    /* Altezza fissa */
    word-wrap: break-word;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.tooltip p {
    margin: 0;
    line-height: 1.4;
    font-size: 12px;
    color: white;
}

/* ========================================================= */
/* ===================== BUTT PROBLEMS ===================== */
/* ========================================================= */
/* Stile di base per il pulsante Inserisci */
/* #inserisciBtn {
  margin: 10px 0;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#inserisciBtn:hover {
  background-color: #0056b3;
} */
/* .DraggableContainer {
  margin-top: 15px;
} */

/* Stile per il dropdown */
.dropdown select {
    margin: 10px 0;
    width: 200px;
    border-radius: 5px;
}


/* 
.PosCheckEs {
    display: none;
} */

.problem {
    display: none;
    margin-bottom: 2px;
    width: fit-content;
    align-items: center;
    width: 100%;
    /* cursor: move; */
    background-color: #10139a;
    /* min-height: 20px; */
    position: relative;
    /* Aggiungi questa linea */
}

/* .problem {
  display: none;
} */

.collapsible {
    display: flex;
    position: relative;
    background-color: #5959a9;
    color: white;
    cursor: pointer;
    height: var(--heightCollapsible);
    border: none;
    text-align: left;
    align-items: center;
    width: 100%;
    gap: 10px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Scrollbar orizzontale sottilissima e quasi invisibile per .collapsible */
.collapsible::-webkit-scrollbar {
    height: 2px;
}

.collapsible::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.collapsible::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
}

.collapsible::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

.collapsible:before {
    content: '\002B';
    color: white;
    font-weight: bold;
    margin-right: 5px;
    flex-shrink: 0;
}

.collapsible > *:not(:before):not(.checkmod):not(.editEser) {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active,
.collapsible:hover {
    background-color: #5b92a1;
}

.collapsible.active:before {
    content: "\2212";
}

/* Sticky titolo e collapsible.active nelle sezioni [id^="type_verAll"] (admin-access) */
/* Solo l'h1 è sticky (non l'intero .titolo che contiene tutti i .problem) */
body.admin-access [id^="type_verAll"] > .titolo > h1 {
    position: sticky;
    z-index: 3;
    background-color: powderblue;
    /* top impostato dinamicamente da updateStickyTops() in script_sel-mod.js */
}
/* .collapsible.active: position:fixed gestito da JS via scroll listener.
   z-index elevato per sovrapporsi ai collapsible chiusi di .problem successivi. */
body.admin-access [id^="type_verAll"] .collapsible.active {
    z-index: 30;
}

.selection {
    display: flex;
    align-items: center;
    gap: 6px;
    float: left;
    background-color: #5959a9;
    text-align: center;
    height: var(--heightCollapsible);
    width: 0px;
    visibility: hidden;
}

/* Phase 16 — `.selection` server-rendered inline in ContractRenderer:
 * il legacy InsertCheckPos la popolava E la settava visibile. Ora che
 * è inline dal server, il CSS default la nascondeva (width:0 + visibility:
 * hidden). Override: se è dentro .PosCheckEs in body.admin-access, render
 * visibile con width=--widthSelection + opacity. */
body.admin-access .PosCheckEs > .selection {
    width: var(--widthSelection);
    visibility: visible;
    opacity: 1;
}

/* Phase 16 — .PosCheckEs + .collapsible side-by-side (replica pattern
 * legacy InsertCheckPos): .selection occupa --widthSelection a sinistra,
 * .collapsible il resto. Senza questa regola .PosCheckEs è block → .selection
 * va su una riga separata sopra il .collapsible. */
body.admin-access .problem > .PosCheckEs {
    float: left;
    width: var(--widthSelection);
    height: var(--heightCollapsible);
    margin: 0;
}
body.admin-access .problem > .collapsible {
    width: calc(100% - var(--widthSelection) - 8px);
    margin-left: 4px;
}
/* Chiarisci float dopo collapsible per far scendere .content */
body.admin-access .problem::after {
    content: "";
    display: block;
    clear: both;
}

/* Phase 16 — Editor panel dark mode override.
 * Il pannello editor usa palette chiara (#fffbe6 sfondo, #b58900 bordo) per
 * essere visibile in light mode. In dark mode i contrast sarebbero rotti:
 * overridiamo con palette scura coerente con body.fm-dark. */
body.fm-dark .fm-editor-panel {
    background: #2a2025 !important;
    border-color: #b58900 !important;
    color: #e0e0e0;
}
body.fm-dark .fm-editor-panel span,
body.fm-dark .fm-editor-panel label span,
body.fm-dark .fm-editor-panel > div > span { color: #e8c868 !important; }
body.fm-dark .fm-editor-panel textarea {
    background: #1a1520 !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}
body.fm-dark .fm-editor-panel input[type="text"],
body.fm-dark .fm-editor-panel input[type="number"] {
    background: #1a1520 !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}
body.fm-dark .fm-editor-panel .fm-editor-preview {
    background: #15101a !important;
    color: #f0f0f0 !important;
    border-color: #88b0d8 !important;
}
/* Metadata grid section: sfondo dark */
body.fm-dark .fm-editor-panel > div[style*="grid-template-columns"] {
    background: #1e1825 !important;
    border-color: #4a5a7a !important;
}
/* Tab "QUESITO" / "Preview" headers */
body.fm-dark .fm-editor-panel > div > div[style*="background:#eee"],
body.fm-dark .fm-editor-panel > div > div[style*="background: #eee"] {
    background: #3a2a35 !important;
    border-color: #555 !important;
    color: #ccc !important;
}
body.fm-dark .fm-editor-panel > div > div[style*="background:#e0f0ff"],
body.fm-dark .fm-editor-panel > div > div[style*="background: #e0f0ff"] {
    background: #1a2535 !important;
    border-color: #5a7a9a !important;
    color: #a8c0e0 !important;
}

/* Phase 16 — MathJax formule in dark mode: colore testo default è nero
 * (inherit da mjx-container) → invisibile su sfondo scuro. Override:
 * MathJax dark mode: duplicati rimossi. Vedi layout.css ~1380 per la
 * palette unica (no filter:invert, palette #dcdce0 per leggibilità). */

/* .selectionIN {
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  background-color: #5959a9;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  height: 20px;
  width: 0px;
  margin: 0;
  visibility: hidden;
} */

.Position {
    display: inline-block;
    display: flex;
    justify-content: space-between;
    width: 28px;
    margin: 0 4px 0 4px;
}

.defPositionImp {
    width: 18px;
    height: 12px;
    padding: 0;
    text-align: center;
    font-size: 10px;
}

.check {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-left: 2px solid powderblue;
    border-right: 2px solid powderblue;
    height: 20px;
    padding-right: 2px;
    /* width: 200px; */
}

.checkIN {
    /* Phase 16 — .checkIN allineato col .collex-item dashed yellow.
     * NO border-radius (bilanciamento col dashed-border flat). Margin 0.
     * Titolo_quesito è INSIDE, centrato.
     */
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 100%;
    background-color: #ffffff;
    min-height: 30px;
    margin: 0 0 6px 0;
    padding: 4px 10px;
    border-radius: 0;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Phase 16 — Sequenza elementi: ABin | pt | origin | color | (titolo centrato) | editQuesito | moveQuesito | sync */
.checkIN > .ABin              { margin-right: 4px; }
.checkIN > .input-wrapper-pt  { margin-right: 4px; }
.checkIN > .origin-selector,
.checkIN > .color-selector    { flex-shrink: 0; margin-right: 4px; }
/* titolo_quesito embedded, centrato, altezza fissa 20px senza margini */
.checkIN > .titolo_quesito    {
    flex: 1 1 auto;
    text-align: center;
    background: transparent;
    margin: 0 !important;
    padding: 0 8px;
    border-radius: 0;
    height: 20px;
    line-height: 20px;
    width: auto;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* editQuesito + moveQuesito + sync pushed a destra */
.checkIN > .editQuesito       { gap: 4px; margin-left: auto; }
.checkIN > .moveQuesito       { gap: 2px; }
.checkIN > .sync-quesito-btn  { margin-left: 4px; }

/* Phase 16 — .collex-item dashed yellow bilanciato con .checkIN */
body.fm-verifica-mode .collex-item {
    padding: 0;            /* niente gap interno, .checkIN ha già padding */
    box-sizing: border-box;
}
body.fm-verifica-mode .collex-item > .checkIN {
    margin: 0 0 4px 0;      /* attacca al top del dashed border */
}

/* Phase 16 — sticky header del `.problem` in editor mode.
 *
 * Comportamento (replica legacy `script_sel-mod.js updateStickyTops`):
 * quando un `.collex-item` ha l'editor aperto, il `.problem` riceve
 * `.fm-problem-editing`. Il solo `.collapsible` (header) sticky al top —
 * NON l'intero `.problem` — così:
 *   - il contenuto sottostante (l'editor, gli altri quesiti) scrolla
 *     normalmente sotto l'header ancorato;
 *   - l'effetto sticky si esaurisce naturalmente quando il `.problem`
 *     scorre fuori vista (evita il "non si ferma mai");
 *   - z-index 3 sta SOTTO `.upbar` e `#scrollbarInfo` (entrambi z:4),
 *     quindi upbar + infoVer restano visibili.
 *
 * Offset top: `--fm-problem-sticky-top` impostata via JS su <html> a
 * `86 + scrollbarInfo.offsetHeight` (86 = top di #scrollbarInfo). Fallback
 * 240px se lo script non gira. */
/* Phase 16 — replica legacy `script_sel-mod.js :: updateStickyTops` (commit
 * 8a71c7e). Scope: `body.admin-access` con verifiche renderizzate in:
 *   - sezione `[id^="type_verAll"]` (related-verifiche su /studio/esercizio)
 *   - wrapper `.fm-contract-wrap[data-kind="verifica"]` (topic page verifica)
 *
 * Comportamento:
 *   - l'h1 del titolo del contract è `position:sticky` sotto upbar+infoVer;
 *     `top` impostato dinamicamente da JS.
 *   - i `.collapsible.active` (problem aperti) vengono gestiti da JS con
 *     `position:fixed` + placeholder `.js-coll-ph` in-flow (non possiamo
 *     stackare più sticky al medesimo `top`).
 *
 * CSS qui: solo `position:sticky` + z-index. La logica di top/stacking è JS. */
body.admin-access [id^="type_verAll"] > .titolo > h1,
body.admin-access .fm-contract-wrap[data-kind="verifica"] > .titolo > h1 {
    position: sticky;
    z-index: 3;
    background: powderblue;
    /* top assegnato da `updateStickyTops()` */
}
/* `.collapsible.active` quando JS lo fixa — z-index alto per sovrapporsi
 * ai collapsible chiusi dei `.problem` successivi. */
body.admin-access [id^="type_verAll"] .collapsible.active,
body.admin-access .fm-contract-wrap[data-kind="verifica"] .collapsible.active {
    z-index: 30;
}
/* Placeholder invisibile che riempie il vuoto nel flusso quando il
 * collapsible diventa `position:fixed`. */
.js-coll-ph { display: block; visibility: hidden; pointer-events: none; }

/* Separator visivo + spacing consistente tra i gruppi logici */
.checkIN > .ABin              { margin-right: 4px; }
.checkIN > .input-wrapper-pt  { margin-right: 4px; }
.checkIN > .origin-selector,
.checkIN > .color-selector    { flex-shrink: 0; }
.checkIN > .editQuesito       { gap: 4px; margin-left: auto; }
.checkIN > .moveQuesito       { gap: 2px; }
.checkIN > .sync-quesito-btn  { margin-left: 4px; }
 .titolo_quesito{
    display: flex;
    align-items: center;
    position: relative;
    text-align: center;
    place-self: anchor-center;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    height: 20px;
    width: -webkit-fill-available;
    margin-right: 25px;
    margin-left: 10px;
    padding-left: 5px;
    padding-right: 10px;
    border-radius: 0px 0px 10px 10px;
    margin-bottom: 10px;
 }
 .titolo_quesito span {
    margin-right: 12px; /* spazio tra i pallini e il testo */
    margin-left: 0;
    flex-shrink: 0;
    /* puoi aggiungere altre regole per il posizionamento */
}

.collexercise {
    display: flex;
    flex-direction: column;
}

.collex-item {
    display: grid;
    align-items: flex-start;
    margin-bottom: 20px;
    /* Aggiungi spazio tra i div */
    height: fit-content;
    overflow: auto;
}

.li-inline {
    padding: 0;
    height: fit-content;
}

.collex {
    margin: 0;
}

.checkboxVF {
    margin: 0;
}

.labcheck {
    color: aliceblue;
}

/* Stile per checkboxAin */
.checkboxAin {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid #555;
    border-radius: 5px;
    cursor: pointer;
    background-color: #b0e0e6;
    position: relative;
    top: 1.7px;
}

.checkboxAin:checked {
    background-color: #2f2fff;
}

.checkboxAin:checked::after {
    background-color: #2f2fff;
}

.checkboxBin, .checkboxRin {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid #555;
    border-radius: 5px;
    cursor: pointer;
    background-color: #b0e0e6;
    position: relative;
    top: 1.7px;
    margin-left: 6px;
}

.checkboxBin:checked {
    background-color: #ff5858;
}

.checkboxBin:checked::after {
    background-color: #ff5858;
}

.labcheckIN {
    position: relative;
    top: -2px;
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: powderblue;
    scroll-margin: 20px;
}

.content:hover {
    overflow-x: hidden;
}

.scrollbarhide {
    overflow: hidden;
}

.scrollbarhide:hover {
    overflow-x: scroll;
}

hr {
    border: none;
    border-top: 1px dashed #000;
    color: powderblue;
    background-color: powderblue;
    width: 100%;
}

.checkmod {
    display: flex;
    align-items: center;
    position: static;
    margin-left: auto;
    gap: 4px;
    flex-shrink: 0;
}

.wrapcheckgiust {
    display: flex;
    align-items: center;
    width: auto;
    white-space: nowrap;
}

.wrapCheckCell {
    display: flex;
    align-items: center;
    gap: 5px;
}

.checkboxWrapper {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 2px;
    margin-right: 10px;
}

.btnCheckPos {
    font-size: 10px;
    padding: 2px 4px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    min-width: 20px;
    min-height: 20px;
}

.btnCheckPos:hover {
    background-color: #e0e0e0;
}

.btnCheckPos:active {
    background-color: #d0d0d0;
    border-style: inset;
}

.btnCheckTop {
    grid-column: 2;
    grid-row: 1;
}

.btnCheckBottom {
    grid-column: 2;
    grid-row: 3;
}

.btnCheckLeft {
    grid-column: 1;
    grid-row: 2;
}

.btnCheckRight {
    grid-column: 3;
    grid-row: 2;
}

.checkboxRM {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
}

.cellContent {
    display: inline;
}

/* Posizioni del checkbox wrapper rispetto al contenuto della cella */
.wrapCheckCell.pos-top {
    flex-direction: column;
    align-items: center;
}

.wrapCheckCell.pos-bottom {
    flex-direction: column-reverse;
    align-items: center;
}

.wrapCheckCell.pos-left {
    flex-direction: row;
    align-items: center;
}

.wrapCheckCell.pos-right {
    flex-direction: row-reverse;
    align-items: center;
}

.sol {
    /* margin: auto; */
    margin-top: 10px;
}

.wrapsolVF {
    display: flex;
    align-items: center;
}

/* Phase 20 — default visibile (coerente con .checkgiust checked di
 * default). JS UIComp.caricaGiust toggla via attributo [hidden] in
 * base allo stato del checkbox .checkgiust nel .problem. */
.giustifica[hidden] { display: none; }

.giustsol {
    margin-top: 10px;
}

.collex,
.sol,
.testo,
.giustsol {
    overflow-x: auto;
    overflow-y: hidden;
    width: -webkit-fill-available;
    padding: 0px 18px 0px 7px;
}

.wrapchecksol {
    display: flex;
    align-items: center;
}

/* .checksol {
  position: absolute;
  left: 0px;
  margin-left: 10px;
} */

.flex20 {
    display: flex;
    align-items: center;
    gap: 50px
}

.flex20.tabelle[data-align="vfill"] {
    flex-direction: column;
}

.block20 {
    align-items: center;
}

.block20 table {
    width: 100%;
    margin-top: 10px;
}

.block20 table td,
.block20 table tbody {
    width: 50%;
    /* margin-top: 10px; */
}

/* .freccia {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  margin: 3px;
  padding: 0;
  text-align: center;
} */

/* #passwordInput {
  position: fixed;
  top: 30px;
  right: 0px;
  z-index: 50;
} */


/* ========================================================= */


.edit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
}

.modificaBtn {
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f52f, #e8e52f);
    margin-left: 15px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 2px solid #c4c42a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modificaBtn:hover {
    background: linear-gradient(135deg, #ffff5a, #f5f52f);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(245, 245, 47, 0.4);
}

.modificaBtn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.editQ {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Phase 17 — `.editQ.clone` (cross-file: verifica → esercizi) visibile SOLO
 * dentro contesto verifica. Mirror del legacy: il check era su
 * `.DraggableContainer_ver`; in refactor usiamo `[data-kind="verifica"]`
 * sul `.fm-contract-wrap` + fallback `#type_verAll`. */
.editQ.clone { display: none; }
.fm-contract-wrap[data-kind="verifica"] .editQ.clone,
[id^="type_verAll"] .editQ.clone {
    display: flex;
}

/* Phase 16 — .editEser container con display:flex inline.
 * Nel legacy l'attributo inline style="display:flex" era hardcoded in
 * Elementi_Riservati.html. Il server-rendered ContractRenderer::renderCheckmod
 * non lo emette → senza regola CSS i bottoni .modificaBtn/.quick-saveBtn/
 * .eliminaBtn stackano verticalmente. Questa regola gli dà flex + gap. */
.checkmod .editEser,
.collapsible .editEser {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.single-modificaBtn {
    background: linear-gradient(135deg, #d9e24b, #c8d140);
    margin-left: 10px;
    border: 2px solid #a8b130;
}

.single-modificaBtn:hover {
    background: linear-gradient(135deg, #e8f05a, #d9e24b);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(208, 217, 75, 0.4);
}

.single-modificaBtn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.single-quick-saveBtn {
    background: linear-gradient(135deg, #FFA726, #FF9800);
    margin-left: 4px;
    border: 2px solid #F57C00;
}

.single-quick-saveBtn:hover {
    background: linear-gradient(135deg, #FFB74D, #FFA726);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(255, 152, 0, 0.4);
}

.single-quick-saveBtn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.single-quick-saveBtn img {
    scale: 0.015;
    filter: brightness(0) invert(1);
    pointer-events: none; /* Permette al click di passare attraverso l'immagine al pulsante */
}

#modHeaderBtn {
    border-radius: 50%;
    background-color: rgb(208, 217, 75, 0.762);
    margin-right: 5px;
    cursor: pointer;
}

.saveBtn,
.single-saveBtn, 
#saveBtnHeader {
    border-radius: 50%;
    background-color: rgb(227, 245, 68);
    margin-left: 4px;
    width: 40px;
    height: 20px;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #b8b832;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.saveBtn:hover,
.single-saveBtn:hover,
#saveBtnHeader:hover {
    background-color: #e5e377;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.saveBtn:active,
.single-saveBtn:active,
#saveBtnHeader:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.saveBtn img,
.single-saveBtn img,
#saveBtnHeader img {
    scale: 2.2;
    width: 16px;
    height: 16px;
    object-fit: contain;
    margin-left: 7px;
    pointer-events: none; /* Permette al click di passare attraverso l'immagine al pulsante */
}

.quick-saveBtn {
    border-radius: 50%;
    background: linear-gradient(135deg, #FFA726, #FF9800);
    margin-left: 4px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 2px solid #F57C00;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-saveBtn:hover {
    background: linear-gradient(135deg, #FFB74D, #FFA726);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(255, 152, 0, 0.4);
}

.quick-saveBtn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.quick-saveBtn img {
    scale: 0.015;
    filter: brightness(0) invert(1);
    pointer-events: none; /* Permette al click di passare attraverso l'immagine al pulsante */
}

#saveBtnHeader {
    /* border-radius: 10%; */
    /* Rende il div rotondo */
    /* background-color: rgb(240, 255, 101); */
    width: 130px;
    height: 20px;
    /* color: #000; */
    /* text-align: center; */
    /* border: outset; */
    /* cursor: pointer; */
}

.eliminaBtn {
    border-radius: 50%;
    background: linear-gradient(135deg, #ff5d5d, #e53935);
    margin-left: 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 2px solid #c62828;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eliminaBtn:hover {
    background: linear-gradient(135deg, #ff7a7a, #ff5d5d);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(255, 93, 93, 0.4);
}

.eliminaBtn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.addBtn {
    background: linear-gradient(135deg, #42A5F5, #2196F3);
    margin-left: 6px;
    border: 2px solid #1976D2;
}

.addBtn:hover {
    background: linear-gradient(135deg, #64B5F6, #42A5F5);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(33, 150, 243, 0.4);
}

.addBtn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.addBtn p {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: bold;
    pointer-events: none;
}

.clone {
    background: linear-gradient(135deg, #42A5F5, #2196F3);
    margin-left: 6px;
    border: 2px solid #1976D2;
}

.clone:hover {
    background: linear-gradient(135deg, #64B5F6, #42A5F5);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(33, 150, 243, 0.4);
}

.clone:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* G19 — `scale: 0.13` rimosso: combinato con width/height:12px (regola
 * unificata a riga ~1926) rendeva l'icona 1.5px (invisibile). I 12x12 +
 * object-fit:contain bastano per allineare l'icona alle altre. */
.clone img {
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.removeBtn {
    background: linear-gradient(135deg, #ff5d5d, #e53935);
    margin-right: 4px;
    margin-left: 6px;
    border: 2px solid #c62828;
}

.removeBtn:hover {
    background: linear-gradient(135deg, #ff7a7a, #ff5d5d);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(255, 93, 93, 0.4);
}

.removeBtn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.moveBtn {
    /* Phase 16 — inline dentro `.checkmod` (a destra dei bottoni editEser).
     * Niente più position:absolute → nessun overlap con .checkmod/.eliminaBtn. */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    cursor: move;
    background: transparent;
    border-radius: 4px;
    flex-shrink: 0;
}
.moveBtn:hover { background: rgba(200, 200, 220, 0.2); }

/* Phase 17 — feedback visivo drag-drop problem. */
.problem.fm-dragging {
    opacity: 0.5;
    cursor: move;
    outline: 2px dashed #2a5ac7;
    outline-offset: -2px;
}

.move-position-problem {
    width: 34px;
    height: 22px;
    margin-left: 2px;
    padding: 0 2px;
    font: 11px/1 system-ui;
    text-align: center;
    border: 1px solid #888;
    border-radius: 3px;
    background: #fff;
    color: #222;
    box-sizing: border-box;
    flex-shrink: 0;
}
.move-position-problem::-webkit-outer-spin-button,
.move-position-problem::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.fm-dark .move-position-problem {
    background: #1a1a28;
    color: #c8c8d4;
    border-color: #555;
}

/* Phase 20 — ogni SVG ha viewBox/dimensioni intrinseche diverse (es.
 * save.svg 545x370 vs quicksave.svg 800x800 vs edit.svg 24x24). Un
 * unico `scale` rendeva una icona bene e le altre sballate. Con
 * width/height espliciti + object-fit:contain tutte entrano nel
 * cerchio 20x20 preservando aspect ratio. */
.modificaBtn img,
.single-modificaBtn img,
#modHeaderBtn img,
.eliminaBtn img,
.addBtn img,
.clone img,
.removeBtn img,
.quick-saveBtn img,
.single-quick-saveBtn img,
.saveBtn img,
.single-saveBtn img {
    display: block;
    width: 12px;
    height: 12px;
    object-fit: contain;
    pointer-events: none;
}

/* Phase 20 — closeBtn: cerchio rosso con X centrata. Si attiva in edit
 * mode (.checkmod .editEser). L'img legacy (delete.svg) viene nascosta
 * a favore del glyph ✕ via ::before per coerenza visiva col pattern
 * chiusura modali. */
.edit.closeBtn,
.edit.single-closeBtn {
    position: relative;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6060, #e53030);
    border: 2px solid #c42a2a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.edit.closeBtn:hover,
.edit.single-closeBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(229, 48, 48, 0.45);
}
.edit.closeBtn:active,
.edit.single-closeBtn:active { transform: scale(0.95); }
.edit.closeBtn img,
.edit.single-closeBtn img { display: none; }
.edit.closeBtn::before,
.edit.single-closeBtn::before {
    content: "✕";
    color: #fff;
    font: bold 13px/1 system-ui, -apple-system, sans-serif;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}


.moveBtn img {
    scale: 0.5;
    pointer-events: none; /* Permette al click di passare attraverso l'immagine al pulsante */
}

.input-collex,
.input-giust,
.input-giustifica {
    width: calc(100%);
    /* padding: 5px; */
    box-sizing: border-box;
    /* border: 1px solid #ccc; */
    border-radius: 4px;
    resize: none;
    /* overflow: hidden; */
    min-height: 30px;
    /* Altezza minima */
    /* line-height: 1.5; */
    /* Altezza della linea */
}

.input-giustifica {
    margin-bottom: 20px;
}

.input-sol {
    /* width: calc(100%); */
    width: 70px;
    /* padding: 5px; */
    margin: 5px 0;
    box-sizing: border-box;
    /* border: 1px solid #ccc; */
    border-radius: 4px;
}

.input-wrapper {
    /* display: flex; */
    align-items: center;
    position: relative;
    margin-top: 10px;
}

.ABin {
    display: flex;
    width: 80px;
}

.input-wrapper-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Allinea a sinistra */
    width: calc(100% - 310px);
    /* Assicura che l'elemento riempia la larghezza disponibile */
    height: 14px;
}

.input-wrapper-quesito {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Allinea a sinistra */
    width: 100%;
    /* Assicura che l'elemento riempia la larghezza disponibile */
    /* height: 14px; */
}

.titolo_quesito {
    display: flex;
    align-items: center;
    /* width: calc(100% - 198px); */
    margin-left: 10px;
}

.collex-item,
.checkIN,
textarea,
.pt,
.labcheckIN,
.origin,
.titolo_quesito {
    transition: background-color 0.4s, color 0.4s;
}

.input-wrapper-title .input-titolo,
.input-wrapper-quesito .input-quesito,
.input-pt {
    flex: 1;
    /* Permette all'area di testo di riempire lo spazio rimanente */
    height: 20px;
    margin-left: 5px;
    resize: none;
    border-radius: 10px;
    line-height: 1;
    padding: 0;
    border: 1px solid #ccc;
    overflow: hidden;
    align-content: center;
}
.input-titolo{
    padding-left: 5px;
}

.editQuesito {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.moveQuesito {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 5px;
    padding: 0 5px;
}

.move-up-btn,
.move-down-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5959a9;
    color: white;
    border: 1px solid #4848a0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.move-up-btn:hover,
.move-down-btn:hover {
    background-color: #6d6dcf;
}

.move-up-btn:active,
.move-down-btn:active {
    background-color: #4848a0;
    transform: scale(0.95);
}

.move-position {
    width: 30px;
    height: 20px;
    padding: 0 2px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 11px;
    background-color: white;
}

.move-position:focus {
    outline: none;
    border-color: #5959a9;
    box-shadow: 0 0 3px rgba(89, 89, 169, 0.5);
}

/* Rimuove le frecce dai number input in Chrome, Safari, Edge */
.move-position::-webkit-outer-spin-button,
.move-position::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Rimuove le frecce dai number input in Firefox */
.move-position[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.sync-quesito-btn,
.sync-quesiti_ver-btn,
.sync-quesiti-btn {
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.sync-quesito-btn img,
.sync-quesiti_ver-btn img,
.sync-quesiti-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sync-quesito-btn:hover,
.sync-quesiti_ver-btn:hover,
.sync-quesiti-btn:hover {
    opacity: 0.7;
}

.sync-quesito-btn:active,
.sync-quesiti_ver-btn:active,
.sync-quesiti-btn:active {
    transform: scale(0.95);
}

.sync-quesito-btn:active {
    transform: scale(0.95);
}

.color-selector,
.origin-selector{
    margin-left: auto;
}


.input-wrapper-quesito .input-quesito {
    width: -webkit-fill-available;
    justify-items: center;
    /* margin-left: 10px; */
    /* position: absolute; */
    /* left: 120px; */
    /* right: 100px; */
}

.colorSelect option {
    color: white;
    font-weight: bold;
}


.input-wrapper-pt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 57px;
    height: 20px;
    margin-left: 10px;

}

/* .input-wrapper-pt {
    height: 20px;
    margin-left: 10px;
} */

.input-wrapper-pt_tot {
    display: flex;
    align-items: center;
    /* margin-top: 5px; */
    padding: 2px 4px;
    background-color: #dcdbff;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
         width: 80px;
}

.pt_totA,
.pt_totB {
    margin: 0;
    padding-right: 4px;
    color: #333;
    font-size: 11px;
    white-space: nowrap;
}

.total-points {
    color: #007bff;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.input-pt {
    width: 45px;
    text-align: center;
}

.draggable {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
    background-color: #f9f9f9;
    cursor: move;
}

.sortable-placeholder {
    border: 1px dashed #ccc;
    background-color: #f0f0f0;
    height: 100px;
    margin: 10px;
}

.Selezioni {
    width: 100%;
    /* height: 100%; */
    margin: 0 auto;
}


#header_pagep {
    margin: 0;
}

#header_page {
    border: outset;
    padding: 7px;
    position: relative;
}
#header_page p { margin: 4px 0; }

/* Phase 18 — dark mode: bg scuro + testo chiaro + link leggibili */
body.fm-dark #header_page {
    background-color: #2a2a3a;
    color: #e0e0e0;
    border-color: #555;
}
body.fm-dark #header_page .fm-header-body,
body.fm-dark #header_page .fm-source-citation {
    color: #e0e0e0;
}
body.fm-dark #header_page a { color: #9dc9ff; }
body.fm-dark #header_page a:hover { color: #bddfff; }
body.fm-dark #header_page strong, body.fm-dark #header_page b { color: #ffd88a; }

/* Phase 16 — #modHeaderBtn: pulsante "Modifica" in alto a destra del
 * `#header_page`, iniettato da JS quando body.admin-access. Stile pill
 * scuro leggibile su sfondo muted. */
#modHeaderBtn {
    position: absolute;
    top: 6px;
    right: 6px;
    height: 24px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border: 1px solid #2a5ac7;
    border-radius: 12px;
    background: #2a5ac7;
    color: #fff;
    font: 600 11px/1 system-ui;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.15s, transform 0.1s;
}
#modHeaderBtn:hover { background: #1e4aa0; transform: translateY(-1px); }
#modHeaderBtn:active { transform: translateY(0); }

#header_page.fm-header-editing {
    outline: 2px dashed #2a5ac7;
    outline-offset: -3px;
    padding-bottom: 14px;
}

/* Lista fonti quando >1: una per riga, marker •, indentata. */
#header_page .fm-source-list {
    margin: 4px 0 0 0;
    padding-left: 22px;
    list-style: disc;
}
#header_page .fm-source-list li { margin: 2px 0; }

/* Editor inline (apparent in edit mode) */
.fm-header-editor {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(42, 90, 199, 0.06);
    border: 1px solid #b8c4e0;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 13px/1.4 system-ui;
}
.fm-header-editor .fm-header-field { display: flex; flex-direction: column; gap: 4px; }
.fm-header-editor .fm-header-field > span { font-size: 11px; color: #555; font-weight: 600; }
.fm-header-editor textarea {
    width: 100%;
    padding: 6px 8px;
    font: 12px/1.4 Consolas, monospace;
    border: 1px solid #aac;
    border-radius: 4px;
    resize: vertical;
    box-sizing: border-box;
    background: #fff;
    color: #222;
}
.fm-header-editor .fm-header-auto {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #333;
}
.fm-header-editor .fm-header-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.fm-header-editor .fm-header-actions button {
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font: 600 12px/1 system-ui;
    border: 1px solid #aaa;
    background: #eee;
    color: #333;
}
.fm-header-editor .fm-header-save {
    background: #2a5ac7 !important;
    color: #fff !important;
    border-color: #2a5ac7 !important;
}
.fm-header-editor .fm-header-save:hover { background: #1e4aa0 !important; }

body.fm-dark #modHeaderBtn { border-color: #4a78e0; background: #3a4a7e; }
body.fm-dark #modHeaderBtn:hover { background: #4a5a9e; }
body.fm-dark .fm-header-editor {
    background: rgba(74, 120, 224, 0.08);
    border-color: #4a4a5a;
}
body.fm-dark .fm-header-editor textarea {
    background: #1e1e2a;
    color: #d0d0dc;
    border-color: #555;
}

/* #classe_page{
    display: flex;
}
#classe_page p{
    margin: 0; */
/* display: flex; */
/* } */
.ordering {
    margin: 10px;
}
/* ================================== */

.pagestyle{
    display: contents;
}

.pagestyle .selector-eser{
    position: sticky;
    top: 200px;
    z-index: 20;
}


[id^="type_verAll"] .selector-eser {
    position: sticky;
    top: 222px;
    z-index: 20;
}

/* G19.4 — restyle moderno della .selector-eser + .scelte-verifica-wrapper.
 *
 * Token color centrali: --fm-c-* (light/dark via body.fm-dark in layout.css)
 * con fallback hardcoded per render fuori contesto (admin pages legacy).
 *
 * Layout: pillbar orizzontale (gap 8px) con elementi *tutti* 28px height +
 * box-sizing border-box uniforme — i selects nativi rendono ~32px senza
 * height esplicita (sproporzione vs button). Border-radius 6px coerente.
 *
 * Variabile shared `--fm-elem-h: 28px` per allineare i 7 element types:
 * select.tipoEsercizio, .sync-quesiti-btn, .dropdown-button_gen,
 * .half-moon-button, .help-circle, select.tipoEsercizio_ver,
 * .sync-quesiti_ver-btn, .salva-scelte-btn, .carica-scelte-btn,
 * .scelte-versioni.
 */
.selector-eser {
    --fm-elem-h: 28px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 15px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--fm-c-surface, #f8fafc);
    border: 1px solid var(--fm-c-border, #cbd5e1);
    border-radius: 8px;
    box-sizing: border-box;
}
.selector-eser > *,
.selector-eser > .dropdown_gen > * {
    box-sizing: border-box;
}
body.fm-dark .selector-eser {
    background: #1f2330;
    border-color: #334155;
}

/* Wrapper per pulsanti Salva/Carica scelte verifica — restyle G19.4.
 * G19.5 — `display: inline-flex` SEMPRE (rimosso il `display:none` inline
 * dal template). Gli `!important` non servono perché ora niente lo nasconde
 * a monte. Visibility resta gated dal contesto: il wrapper è inside
 * `#scrollbarInfo` (visibile solo in admin/verifica-mode). */
.scelte-verifica-wrapper {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 0 10px;
    height: var(--fm-elem-h, 28px);
    margin-left: auto;
    background: var(--fm-c-surface-2, #eef2ff);
    border: 1px solid var(--fm-c-border, #c7d2fe);
    border-radius: 8px;
}
body.fm-dark .scelte-verifica-wrapper {
    background: #1e293b;
    border-color: #475569;
}

/* G19.10 — `.scelte-versioni` restyling: layout INLINE (label accanto al
 * radio, non sotto). Rimosso border + background propri (il container
 * `.scelte-verifica-wrapper` ha già il proprio bordo) per evitare il
 * "labels escono dai bordi" segnalato dall'utente.
 *
 * Pattern: piccoli pill button-like, "v1" "v2" "v3" inline, radio + label
 * orizzontali. Molto più compatto e contenuto. */
.scelte-versioni {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
}

.scelta-versione-option {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    color: var(--fm-c-text, #1e293b);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background-color .12s;
}
.scelta-versione-option:hover {
    background-color: var(--fm-c-primary-soft, #eff6ff);
}
body.fm-dark .scelta-versione-option { color: #cbd5e1; }
body.fm-dark .scelta-versione-option:hover {
    background-color: rgba(59, 130, 246, 0.15);
}

.scelta-versione-option span {
    font-size: 11px;
    line-height: 1;
    text-align: center;
}

.scelta-versione-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 11px;
    height: 11px;
    margin: 0;
    border-radius: 50%;
    border: 2px solid var(--fm-c-border-strong, #94a3b8);
    background-color: var(--fm-c-surface, #ffffff);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
body.fm-dark .scelta-versione-checkbox {
    border-color: #64748b;
    background-color: #0f172a;
}

.scelta-versione-checkbox:hover {
    transform: scale(1.1);
    border-color: var(--fm-c-primary, #2563eb);
}

.scelta-versione-checkbox:checked {
    background-color: var(--fm-c-primary, #2563eb);
    border-color: var(--fm-c-primary, #1d4ed8);
    box-shadow: 0 0 0 2px var(--fm-c-primary-soft, rgba(37, 99, 235, 0.25));
}
body.fm-dark .scelta-versione-checkbox:checked {
    background-color: #3b82f6;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.scelta-versione-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ffffff;
}

.scelte-verifica-wrapper button {
    height: 22px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    transition: background-color .15s, border-color .15s, transform .1s;
}
.scelte-verifica-wrapper button:active { transform: translateY(1px); }

.salva-scelte-btn {
    color: #ffffff;
    background-color: #16a34a;
    border-color: #15803d;
}
.salva-scelte-btn:hover {
    background-color: #15803d;
    border-color: #14532d;
}
.salva-scelte-btn:disabled {
    background-color: #d1d5db;
    border-color: #9ca3af;
    color: #6b7280;
    cursor: not-allowed;
}
body.fm-dark .salva-scelte-btn {
    background-color: #16a34a;
    border-color: #166534;
}

.carica-scelte-btn {
    color: #ffffff;
    background-color: #2563eb;
    border-color: #1d4ed8;
}
.carica-scelte-btn:hover {
    background-color: #1d4ed8;
    border-color: #1e3a8a;
}
.carica-scelte-btn:disabled {
    background-color: #d1d5db;
    border-color: #9ca3af;
    color: #6b7280;
    cursor: not-allowed;
}
body.fm-dark .carica-scelte-btn {
    background-color: #3b82f6;
    border-color: #2563eb;
}

/* G19.4/G19.11 — selects uniformati: 28px height + appearance reset.
 * G19.11 — quando dentro `.fm-eser-group` / `.fm-ver-group`, i select
 * hanno border-radius solo a sinistra (6px 0 0 6px) per incollarsi al
 * sync btn (rounded only a destra). Stesso pattern di
 * `.dropdown-button_gen` + `.half-moon-button`. */
.selector-eser select.tipoEsercizio,
.selector-eser select.tipoEsercizio_ver {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: var(--fm-elem-h, 28px);
    line-height: 1;
    padding: 0 26px 0 10px;
    margin: 0;
    border: 1px solid var(--fm-c-border, #cbd5e1);
    border-radius: 6px;
    background-color: var(--fm-c-surface, #ffffff);
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%),
                      linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--fm-c-text, #1e293b);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s;
    vertical-align: middle;
}
/* G19.11 — group containers: pill row con select+sync incollati. */
.selector-eser .fm-eser-group,
.selector-eser .fm-ver-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
/* Inside group: select arrotondato solo a sinistra. */
.selector-eser .fm-eser-group > select.tipoEsercizio,
.selector-eser .fm-ver-group > select.tipoEsercizio_ver {
    border-radius: 6px 0 0 6px;
    border-right: none;
}
.selector-eser select.tipoEsercizio:hover,
.selector-eser select.tipoEsercizio_ver:hover {
    border-color: var(--fm-c-primary, #2563eb);
}
.tipoEsercizio     { width: 175px; }
.tipoEsercizio_ver { width: 195px; margin-left: 0; }
body.fm-dark .selector-eser select.tipoEsercizio,
body.fm-dark .selector-eser select.tipoEsercizio_ver {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
    background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
                      linear-gradient(135deg, #94a3b8 50%, transparent 50%);
}

/* G19.11 — `.sync-quesiti-btn` / `.sync-quesiti_ver-btn` ora stile
 * analogo a `.half-moon-button`: green primary + icon bianca + bordi
 * raccordati a destra (incollati al select del proprio group).
 *
 * Pre-G19.11 erano icon-button neutri (white bg, gray border) con gap
 * tra select e sync. Ora seguono il pattern pill già usato per
 * "Seleziona origine + half-moon" → consistenza visiva. */
.selector-eser .sync-quesiti-btn,
.selector-eser .sync-quesiti_ver-btn {
    width: var(--fm-elem-h, 28px);
    height: var(--fm-elem-h, 28px);
    padding: 0;
    border: 1px solid #15803d;
    border-radius: 0 6px 6px 0;
    background: #16a34a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s;
    flex-shrink: 0;
}
.selector-eser .sync-quesiti-btn:hover,
.selector-eser .sync-quesiti_ver-btn:hover {
    background: #15803d;
}
.selector-eser .sync-quesiti-btn img,
.selector-eser .sync-quesiti_ver-btn img {
    width: 14px;
    height: 14px;
    display: block;
    /* Inverti colore PNG/SVG → bianco per matchare half-moon */
    filter: brightness(0) invert(1);
}

/* G19.4 — `.help-circle` `?` icon: stessa height + stondato. */
.selector-eser .help-circle {
    width: var(--fm-elem-h, 28px);
    height: var(--fm-elem-h, 28px);
    border-radius: 50%;
    border: 1px solid var(--fm-c-border, #cbd5e1);
    background: var(--fm-c-surface, #ffffff);
    color: var(--fm-c-text, #475569);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: help;
    flex-shrink: 0;
    position: relative;
}
.selector-eser .help-circle > span {
    line-height: 1;
    font-size: 13px;
}
body.fm-dark .selector-eser .help-circle {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

.dropdown_gen {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/* G19.10 — hover-trigger RIMOSSO: il popup origini ora è esclusivamente
 * click-toggle (vedi `bindOriginGenDropdown` in upbar-controls.js).
 * Il vecchio `.dropdown_gen:hover + .dropdown-content_gen { display: block }`
 * apriva il popup con CSS-only positioning (`left:0`, `top:32px`), quindi
 * il popup appariva sotto il PRIMO elemento di `.selector-eser` ("+ nuovo
 * esercizio") invece che sotto "Seleziona origine". Il JS positioning
 * di G19.9 funzionava solo su CLICK, quindi era bypassato all'hover. */

/* G19.4 — dropdown origini: pannello flottante con item rows uniformi.
 * G19.10 — `position: fixed` (era `absolute`) per escapare dall'overflow
 * di `#scrollbarInfo` (`overflow: auto` + `z-index: 1600`) che cliplava il
 * popup. `left/top` sono ora coordinate VIEWPORT-relative settate via JS
 * (`positionDropdownContentGen` in upbar-controls.js). z-index alto per
 * stare sopra `#scrollbarInfo`. */
.dropdown-content_gen {
    display: none;
    position: fixed;
    background-color: var(--fm-c-surface, #ffffff);
    border: 1px solid var(--fm-c-border, #cbd5e1);
    border-radius: 6px;
    width: fit-content;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1700;
    padding: 4px;
    max-height: 300px;
    overflow-y: auto;
}
.dropdown-content_gen.is-open {
    display: block;
}
body.fm-dark .dropdown-content_gen {
    background-color: #1f2330;
    border-color: #334155;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.dropdown-content_gen label {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 4px;
}
.dropdown-content_gen label:hover {
    background-color: var(--fm-c-primary-soft, #eff6ff);
}
body.fm-dark .dropdown-content_gen label:hover {
    background-color: #1e293b;
}

.dropdown-content_gen .option-checkbox {
    margin: 0 6px;
    cursor: pointer;
}

.dropdown-content_gen a {
    color: var(--fm-c-text, #1e293b);
    padding: 5px 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    flex: 1;
    border: none;
    font-size: 12px;
    font-family: ui-monospace, Consolas, monospace;
    border-radius: 4px;
}
body.fm-dark .dropdown-content_gen a { color: #cbd5e1; }

.dropdown-content_gen a:hover {
    background-color: transparent;
}

.dropdown_gen:hover .dropdown-content_gen,
.dropdown-content_gen:hover {
    display: block;
}

.dropdown-button_gen {
    height: var(--fm-elem-h, 28px);
    padding: 0 12px;
    margin: 0;
    border: 1px solid #15803d;
    border-right: none;
    border-radius: 6px 0 0 6px;
    background-color: #16a34a;
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
    transition: background-color .15s, border-color .15s;
    line-height: 1;
}
.dropdown-button_gen:hover {
    background-color: #15803d;
    border-color: #14532d;
}

.remove-btn,
.edit-btn {
    cursor: pointer;
    margin-left: 10px;
}

.remove-btn {
    color: red;
}

.edit-btn {
    color: blue;
}

/* G19.4 — `+` half-moon button accanto al dropdown-button_gen. Stessa
 * altezza degli altri elementi (28px) + bordi raccordati a destra. */
.half-moon-button {
    width: var(--fm-elem-h, 28px);
    height: var(--fm-elem-h, 28px);
    background-color: #16a34a;
    color: white;
    border: 1px solid #15803d;
    border-left: 1px solid rgba(255,255,255,0.25); /* divisore tra i due btn */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 0 6px 6px 0;
    margin-left: 0;
    z-index: 1;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s;
    flex-shrink: 0;
}
.half-moon-button:hover { background-color: #15803d; }
.half-moon-button span {
    position: static;
    transform: none;
    line-height: 1;
}

#sel-origin {
    display: none; /* Nascosto di default */
    background-color: #4CAF50;
}

/* Mostra #sel-origin solo per gli admin */
body.admin-access #sel-origin,
.upbar.admin-access #sel-origin {
    display: inline-flex;
}

/* Phase 15 — override legacy `.problem { display: none }`: in exercise
   context moderno il .problem è sempre visibile (era un vecchio hack
   legacy che dipendeva da JS che lo mostrava). */
body.exercise-context .problem { display: block; }
body.exercise-context .DraggableContainer { display: block; }

/* ── Studio DB-backed: override legacy .content/.collapsible collapse
      così i collex-item sono visibili di default, senza dipendere dal
      toggle JS legacy della collapsible. ── */
.fm-db-study .fm-db-collexercise {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fm-db-study .collex-item {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #c9cff0;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 8px 0;
    display: block;
}
.fm-db-study .collex-item .titolo_quesito {
    font-size: 12px;
    color: #555;
    margin-bottom: 6px;
}
.fm-db-study .collex-item details.sol {
    margin-top: 8px;
    padding: 6px 10px;
    background: #fff7d8;
    border-left: 3px solid #c9a227;
    border-radius: 4px;
}
.fm-db-study .collex-item details.sol summary {
    cursor: pointer;
    font-weight: bold;
    color: #7a5c00;
}

/* Alcune pagine studio non usano le coll-pagine legacy, assicuriamoci
   che l'.upbar placeholder non occupi altezza fissa su topics list. */
.fm-db-study #upbar:empty { display: none; }

/* Phase 15 — fm-problem-controls (sostituto moderno di .PosCheckEs
   legacy che era popolato via AJAX Elementi_Riservati.html). Visibile
   solo in modalità verifica-mode. */
.fm-problem-controls { display: none; }
body.fm-verifica-mode .fm-problem-controls {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 2px 8px;
    margin-right: 8px;
    background: #f2ff00;
    border: 1px solid #c4c400;
    border-radius: 3px;
    font-size: 12px;
}
.fm-problem-check { cursor: pointer; user-select: none; }
.fm-problem-check input { margin-right: 4px; }
body.fm-dark .fm-problem-controls {
    background: #3a3a2a;
    border-color: #666;
    color: #f0e8b0;
}

/* ── Modalità verifica (Phase 21: sempre-on per body.admin-access
       via ensureVerificaMode → body.fm-verifica-mode) ── */
/* Phase 17 — `.collex-pick` rimosso (feature obsoleta); CSS cancellato. */
body.fm-verifica-mode .collex-item {
    outline: 1px dashed #f2ff00;
    outline-offset: -2px;
}
/* Phase 21: .btn-esActive regola orfana (applicata da legacy toggleActive
   a #btnAct, ora rimosso). Lasciata per compat .btn-esAct_sidebar. */
.btn-esActive { filter: brightness(0.85) hue-rotate(-30deg); }

/* #analytics-btn è static in UpBar_Es.html; mostrato solo per admin */
#analytics-btn { display: none; }
body.admin-access #analytics-btn,
.upbar.admin-access #analytics-btn { display: inline-flex; }
#analytics-btn {
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #2ea043, #238636);
    border: 2px solid #1a6729;
    border-radius: 4px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    height: 32px;
}
#analytics-btn:hover { filter: brightness(1.1); }

/* Nascondi controlli admin di default */
#toggle-checkboxABin-control,
#select-all-controls {
    display: none !important;
}

/* #toggle-visibility-control sempre visibile per tutti */
#toggle-visibility-control,
.upbar #toggle-visibility-control,
body #toggle-visibility-control {
    display: grid !important;
    row-gap: 1px;
}

/* Mostra controlli admin solo per gli admin */
body.admin-access #toggle-checkboxABin-control,
.upbar.admin-access #toggle-checkboxABin-control {
    display: grid !important;
}

body.admin-access #select-all-controls,
.upbar.admin-access #select-all-controls {
    display: grid;
}

.latex-preview {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}



.help-circle {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #529fff;
    color: white;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
}

.help-message {
    width: 300px;
    display: none;
    position: absolute;
    top: 40px;
    left: 50%;
    background-color: #333;
    font-size: 12px;
    margin: 0;
    color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    white-space: normal;
    /* Cambia da nowrap a normal */
    z-index: 1000;
    word-wrap: break-word;
    word-break: break-word;
    /* Aggiungi questa proprietà */
    line-height: 1.2;
}

/* DSA Button Tooltip */
.dsaBtn {
    position: relative;
}

.dsa-tooltip {
    visibility: hidden;
    opacity: 0;
    width: 356px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: opacity 0.3s, visibility 0.3s;
    white-space: normal;
    word-wrap: break-word;
    pointer-events: none;
}

.dsaBtn:hover .dsa-tooltip {
    visibility: visible;
    opacity: 1;
}

#scrollbarInfo{
    position: sticky;
    top: 86px;
    z-index: 4;
    overflow-x: auto;
    transition: all 0.4s ease;
}
/* Phase 16 — quando `.upbar.upbar-hidden` è attiva (upbar off-screen),
 * `#scrollbarInfo` sale al top:0 per eliminare il gap vuoto. La classe
 * `body.fm-upbar-hidden` è impostata da `updateProblemStickyOffset`. */
body.fm-upbar-hidden #scrollbarInfo {
    top: 0;
}

/* Stato nascosto scrollbarInfo - nasconde solo infoVer */
#scrollbarInfo.scrollbarInfo-hidden #infoVer {
    display: none;
}

/* Contenitore toggle scrollbarInfo - absolute per default */
#scrollbarInfo-toggle-container {
    position: absolute;
    top: 10px;
    background: rgba(176, 224, 230, 0.95);
    border: 2px solid #ddd;
    border-radius: 22px;
    padding: 0.5px 0px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease;
    z-index: 11;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    opacity: 1;
}

/* Quando scrollbarInfo è nascosto, il toggle diventa fixed e si sposta in alto.
 * Phase 15 — il left deve rispettare la sidebar: quando aperta (--widthLsidebar)
 * il toggle va subito a destra, quando body.fm-sidebar-closed lo spingiamo al
 * bordo del pulsante switch (34px). */
#scrollbarInfo.scrollbarInfo-hidden #scrollbarInfo-toggle-container {
    position: fixed;
    top: 46px;
    left: calc(var(--widthLsidebar) + 5px);
}
body.fm-sidebar-closed #scrollbarInfo.scrollbarInfo-hidden #scrollbarInfo-toggle-container {
    left: 39px;
}

#scrollbarInfo-toggle-container:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Checkbox nascosto */
#scrollbarInfo-toggle {
    display: none;
}

/* Slider del toggle */
.scrollbarInfo-slider {
    display: block;
    width: 30px;
    height: 30px;
    background-color: #096663;
    border-radius: 100%;
    cursor: pointer;
    text-align: center;
    place-content: center;
    line-height: 22px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    transition: all 0.3s ease;
    user-select: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.scrollbarInfo-slider:hover {
    transform: scale(1.02);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.scrollbarInfo-slider:active {
    transform: scale(0.98);
}
/* Scrollbar orizzontale sottile per #infoVer */
#scrollbarInfo::-webkit-scrollbar {
    height: 4px;
}

#scrollbarInfo::-webkit-scrollbar-track {
    background: rgba(176, 224, 230, 0.3);
    border-radius: 2px;
}

#scrollbarInfo::-webkit-scrollbar-thumb {
    background: rgba(176, 224, 230, 0.8);
    border-radius: 2px;
}

#scrollbarInfo::-webkit-scrollbar-thumb:hover {
    background: powderblue;
}

#infoVer {
    position: sticky;
    /* position: sticky;
    top: 96px;
    z-index: 10; */
    background: 
        linear-gradient(to bottom, rgba(176, 224, 230, 0.6), rgba(89, 89, 169, 0) 20%, rgba(89, 89, 169, 0) 80%, rgba(176, 224, 230, 0.6)),
        linear-gradient(to right, powderblue, #096663 5%, #5959a9 95%, powderblue);
    /* display: flex; */
    margin-top: 10px;
    margin-bottom: 20px;
    /* border: outset; */
    padding: 15px 65px 15px 65px;
    min-width: 1200px;
}

#infoVer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -7px;
    height: 7px;
    background: linear-gradient(to top, rgba(176, 224, 230, 0.6), powderblue 111%, rgba(89, 89, 169, 0) 00%, rgba(176, 224, 230, 0.6)), 
                linear-gradient(to right, powderblue, #096663 5%, #5959a9 95%, powderblue);
    z-index: 10;
    opacity: 80%;
}
#infoVer::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 20px;
    background: linear-gradient(to bottom, rgba(176, 224, 230, 0.6), powderblue 111%, rgba(89, 89, 169, 0) 00%, rgba(176, 224, 230, 0.6)), 
                linear-gradient(to right, powderblue, #096663 5%, #5959a9 95%, powderblue);
    z-index: 10;
    opacity: 80%;
}
#infoVer p {
    color: white;
}

#wrapInfoSchool,
#wrapInfoVer {
    display: flex;
    margin-bottom: 5px;
    align-items: center;
}
#wrapInfoStudent{
    display: flex;
    margin-left: 25px;
    gap: 5px;
    width: -webkit-fill-available;
}

#wrapInfoStudent input {
    padding: 2px 5px;
    width: 50%;
}

#wrapInfoSchool{
    align-items: self-end;
}

#wrapDSA {
    /* width: 60px; */
    display: flex;
    background-color: blueviolet;
    color: white;
    border-radius: 10px;
    padding: 0px 5px;
}
#wrapGriglieMisure{
    display: flex;
    background-color: #00a3f8;
    color: white;
    border-radius: 10px;
    padding: 0px 5px;
    margin-left: 5px;
    min-width: max-content;
}

input#DSA {
    margin-left: 7px;
}

label[for="Compensa"] {
    border-right: 4px solid powderblue;
    padding-right: 10px;
}
label[for="griglie"] {
    border-right: 4px solid powderblue;
    padding-right: 10px;
}

#verTitle {
    margin-left: 5px;
    width: -webkit-fill-available;
}

/* #addressSchool,
#istituto,
#verTime,
#verTitle {
    margin-left: 5px;
} */

#anno {
    width: 40px;
    text-align: center;
}

#addressSchool {
    width: 100px;
}
#versione,
#vers,
#istituto {
    width: 63px;
}


#verTime {
    width: 50px;
    text-align: center;
}

#classe, 
#sezione {
    /* margin-left: 5px;
    width: 30px; */
    text-align: center;
    width: 30px;
}

#nPrint,
#versione {
    /* margin-left: 25px; */
    text-align: center;
}

#SumPtotA,
#SumPtotB {
    /* margin-left: 25px; */
    width: 50px;
    text-align: center;
    background-color: #e6f3ff;
    border: 2px solid #007bff;
    border-radius: 4px;
    font-weight: bold;
    color: #0056b3;
    padding: 2px;
}

input::placeholder {
    color: #ccc;
    /* Colore sbiadito */
    font-style: italic;
    /* Stile corsivo */
}

#vers,
#numCopy {
    /* margin-left: 26px; */
    font-size: small;
    /* margin-top: 10px; */
}

/* #numCopy {
    margin: 6px 0 0 48px;
} */

/* #vers {
    margin: 6px 0 0 60px;
} */

#SumTot{
    margin: 6px 0 0 26px;
}

.wrapInfoBasic {
    display: grid;
    text-align: center;
    align-items: center;
    margin-left: 3px;
}

.wrapInfoBasic p {
    margin: 0;
    font-size: small;
    /* font-weight: bold; */
    color: #333;
}

#savePrintInfoBtn {
    height: 39px;
    margin-left: 5px;
    padding: 0px 3px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.2s ease;
}

#savePrintInfoBtn:hover {
    background: #45a049;
}

#savePrintInfoBtn:active {
    background: #3d8b40;
    transform: scale(0.98);
}

.wrapInfoPrint
{
       margin-left: 5px;
    width: 40px;
    text-align: center;
}
.inputPrint{
    width: 30px;
    text-align: center;
}
.sub_wrapInfoSchool{
    margin-left: 25px;
    text-align: center;
}
#SumTotA,
#SumTotB {
    width: max-content;
}
.AddBtn-tables,
.DelBtn-tables,
.AddBtn-tables_from0 {
    width: 20px;
    height: 20px;
    background-color: #f0f0f0;
    color: black;
    border: 2px outset #ccc;
    border-radius: 5px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s, border-style 0.1s;
}

#from0 {
    left: 235px;
    top: 13px;
}

.AddBtn-tables {
    left: 235px;
}

.DelBtn-tables {
    left: 255px;
    background-color: #f78080;
    font-size: medium;
}

.DelBtn-tables:active {
    border-style: inset;
    background-color: #e33e3e;
}

.AddBtn-tables:hover,
.AddBtn-tables_from0:hover {
    background-color: #e0e0e0;
}

.AddBtn-tables:active,
.AddBtn-tables_from0 {
    border-style: inset;
    background-color: #d0d0d0;
}


/* insertcheckbox-Cell quando è dentro una cella con wrapCheckCell (edit mode) */
td > .insertcheckbox-Cell {
    position: static;
    margin-right: 5px;
    vertical-align: middle;
}

.CheckDel-Row {
    place-items: center;
}

.insertcheckbox-Row,
.insertcheckbox-Col {
    width: 14px;
    transform: scale(1.5);
}

td.row-actions {
    vertical-align: middle;
    display: flex;
    align-items: center;
}

td.column-actions {
    height: 20px;
    justify-content: center;
}

.AddDel-Col {
    display: flex;
    gap: 2px;
}

.input-mixtr,
.input-mpagew,
.input-mixcol,
.input-typecell {
    display: inline-block;
    text-align: center;
    border-style: inset;
    padding: 2px 5px 2px 5px;
}

.input-mpagew {
    margin: 0px 10px 0px 10px;
}

.input-mpagew input {
    width: 20px;
    text-align: center;
}

.typecell-input {
    width: 10px;
    text-align: center;
}

.typecell-container {
    display: inline-flex;
    gap: 3px;
}

.input-modTable {
    display: flex;
    align-items: center;
    margin: 10px;
    border: outset;
    padding: 5px;
    min-width: 346px;
    width: fit-content;
}

.numTable {
    font-weight: bold;
    margin-right: 5px;
}

.numTableT {
    width: 25px;
    font-weight: bold;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    background: linear-gradient(to right, #a095d5, transparent);
}

.tabelle-align-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 10px 2px;
    font-size: 13px;
}

.align-toggle {
    display: flex;
    border: 1px solid #aaa;
    border-radius: 4px;
    overflow: hidden;
}

.align-btn {
    padding: 3px 10px;
    border: none;
    background: #f0f0f0;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.align-btn.active {
    background: #7877db;
    color: white;
}

/* ========================================================= */
/* ================ TOGGLE SLIDER EXERCISES ================ */
/* ========================================================= */

/* Scope-ato: colpisce solo gli switch esercizi (quelli che contengono
   un .slider-toggle); NON il .switch della sidebar globale. */
.switch:has(> .slider-toggle) {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 12px;
}

.switch:has(> .slider-toggle) input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-toggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider-toggle:before {
    position: absolute;
    content: "";
    height: 9px;
    width: 9px;
    left: 2px;
    bottom: 1.5px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider-toggle {
    background-color: #4CAF50;
}

input:checked + .slider-toggle:before {
    transform: translateX(42px);
}

.slider-toggle:hover {
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* ========================================================= */
/* ================ SELECT ALL CHECKBOXES ================== */
/* ========================================================= */

.checkbox-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: right;
}

.select-all-checkbox {
    width: 14px;
    /* height: 20px; */
    cursor: pointer;
    accent-color: #4CAF50;
}

/* ========================================================= */
/* ================ VERSIONE TOOLTIP ======================= */
/* ========================================================= */

#versione-tooltip {
    /* G19.19 — `position: fixed` (era absolute) per uscire dall'overflow
     * di `#scrollbarInfo` (overflow:auto, z-index:1600) che cliplava il
     * tooltip. `top/left` sono ora coordinate VIEWPORT-relative settate
     * via JS (initializeVersioneTooltip in event-handler.js). z-index
     * alto per stare sopra `#scrollbarInfo`. */
    position: fixed;
    background: #fff;
    border: 2px solid #4CAF50;
    border-radius: 4px;
    padding: 12px;
    z-index: 1700;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    display: none;
    min-width: 300px;
    max-width: 420px;
    font-size: 12px;
    line-height: 1.6;
    max-height: 80vh;
    overflow-y: auto;
}

#versione-tooltip h4 {
    margin: 0 0 8px 0;
    color: #4CAF50;
    font-size: 14px;
    font-weight: bold;
}

#versione-tooltip .ultima-versione {
    background: #f0f0f0;
    padding: 6px;
    margin-bottom: 10px;
    border-radius: 3px;
    font-weight: bold;
}

#versione-tooltip .esempio {
    margin: 4px 0;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s;
}

#versione-tooltip .esempio:hover {
    background-color: #e8f5e9;
}

#versione-tooltip .esempio strong {
    color: #2196F3;
    font-weight: bold;
    font-family: monospace;
}

#versione-tooltip .loading {
    color: #999;
    font-style: italic;
}

/* G19.46 — categorie tooltip (Verifica classica / recupero / prova) */
#versione-tooltip .versione-cat {
    margin: 8px 0 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e2e8f0;
}
#versione-tooltip .versione-cat:first-of-type { margin-top: 4px; }

/* Dark theme */
body.fm-dark #versione-tooltip {
    background: #1f2330;
    color: #e2e8f0;
    border-color: #16a34a;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
body.fm-dark #versione-tooltip h4 { color: #86efac; }
body.fm-dark #versione-tooltip .ultima-versione {
    background: #0f172a;
    color: #cbd5e1;
}
body.fm-dark #versione-tooltip .esempio:hover { background-color: rgba(22, 163, 74, 0.18); }
body.fm-dark #versione-tooltip .esempio strong { color: #60a5fa; }
body.fm-dark #versione-tooltip .versione-cat {
    color: #94a3b8;
    border-bottom-color: #334155;
}

/* Aumenta l'altezza di #infoVer quando il tooltip è visibile */
#infoVer.tooltip-expanded {
    padding-bottom: 320px; /* Spazio sufficiente per il tooltip */
    transition: padding-bottom 0.3s ease;
}

/* Nasconde il bordo inferiore ::after quando il tooltip è visibile */
#infoVer.tooltip-expanded::after {
    display: none;
}

/* Aumenta l'altezza di #infoVer quando il dropdown è visibile.
 * `.fm-origin-open` è impostata da `bindOriginGenDropdown` (click-based).
 * I selettori `:hover` restano come fallback per navigazione desktop. */
#infoVer.fm-origin-open,
#infoVer:has(.dropdown_gen:hover),
#infoVer:has(.dropdown-content_gen:hover) {
    padding-bottom: 250px;
    transition: padding-bottom 0.3s ease;
}

#infoVer.fm-origin-open::after,
#infoVer:has(.dropdown_gen:hover)::after,
#infoVer:has(.dropdown-content_gen:hover)::after {
    display: none;
}

#infoVer.tooltip-expanded::after {
    height: 340px; /* Estende anche il gradient finale */
}

/* ─────────────────────────────────────────────────────────────────────
 * Phase 24.36 — Studio preview PT-rendered content
 * Wrapper emesso da PtToHtml render in ContentStudyController.
 * Styling consistente con risdoc/contract per coerenza visuale.
 * ─────────────────────────────────────────────────────────────────── */
.fm-pt-rendered {
    background: var(--fm-risdoc-card-bg, #fff);
    border: 1px solid var(--fm-risdoc-border, #cbd5e1);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 12px 0;
    line-height: 1.5;
}
/* Phase 24.45 — layout=custom: pagina senza scaffolding #header_page.
 * Margini più ampi per simulare A4 leggibile. */
.fm-pt-custom-page {
    max-width: 880px;
    margin: 18px auto;
    padding: 0 16px 32px;
}
.fm-pt-custom-page > .fm-pt-rendered {
    margin-top: 0;
}
.fm-pt-rendered .fm-pt-item-title {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--fm-risdoc-accent, #2a5ac7);
    font-size: 1.05em;
    color: var(--fm-risdoc-accent, #2a5ac7);
}
.fm-pt-rendered .pt-section-header {
    margin: 14px 0 8px;
    color: var(--fm-risdoc-accent, #2a5ac7);
    font-weight: 600;
}
.fm-pt-rendered .pt-section-selectors {
    color: var(--fm-risdoc-text-muted, #64748b);
    font-weight: 400;
    font-size: 0.85em;
}
.fm-pt-rendered .pt-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4px 12px;
    margin: 8px 0;
}
.fm-pt-rendered .pt-cb-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.45;
}
.fm-pt-rendered .pt-cb-item .pt-cb-state {
    font-size: 1.1em;
    color: var(--fm-risdoc-accent, #2a5ac7);
}
.fm-pt-rendered .pt-cb-list {
    margin: 6px 0 6px 22px;
    padding: 0;
}
.fm-pt-rendered .pt-cb-list li { margin: 2px 0; }
.fm-pt-rendered .pt-cb-inline {
    display: inline;
    color: var(--fm-risdoc-accent, #2a5ac7);
    font-weight: 500;
}
.fm-pt-rendered .pt-table {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
}
.fm-pt-rendered .pt-table th,
.fm-pt-rendered .pt-table td {
    border: 1px solid var(--fm-risdoc-border, #cbd5e1);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}
.fm-pt-rendered .pt-table thead th {
    background: var(--fm-risdoc-bg-field, #f8fafc);
    font-weight: 600;
}
.fm-pt-rendered .pt-table caption {
    caption-side: bottom;
    padding-top: 6px;
    font-style: italic;
    color: var(--fm-risdoc-text-muted, #64748b);
    font-size: 0.9em;
}
.fm-pt-rendered .pt-table-note {
    margin: 4px 0;
    color: var(--fm-risdoc-text-muted, #64748b);
    font-size: 0.9em;
}
.fm-pt-rendered .pt-field-missing {
    color: var(--fm-risdoc-error-fg, #b91c1c);
    background: var(--fm-risdoc-error-bg, #fee2e2);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.85em;
}
.fm-pt-rendered .pt-rawtex {
    background: var(--fm-risdoc-bg-field, #f1f5f9);
    border-left: 3px solid var(--fm-risdoc-text-muted, #64748b);
    padding: 6px 10px;
    overflow-x: auto;
    font-size: 0.85em;
}
.fm-pt-rendered .pt-select-rendered,
.fm-pt-rendered .pt-textfield-rendered {
    display: inline-block;
    margin: 0 2px;
}
.fm-pt-rendered .pt-form-checkbox-rendered {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin: 0 6px 0 0;
}

/* Dark mode adjustments */
body.fm-dark .fm-pt-rendered {
    background: var(--fm-risdoc-card-bg-dark, #1e293b);
    border-color: var(--fm-risdoc-border-dark, #334155);
    color: var(--fm-risdoc-text-dark, #e2e8f0);
}
body.fm-dark .fm-pt-rendered .pt-table thead th {
    background: var(--fm-risdoc-bg-field-dark, #0f172a);
}