zibo-dashboard/public/userarea/include/worksheets-linked-modals.php

<style>
    .ws-tabs {
        display: flex;
        gap: 8px;
        border-bottom: 2px solid #dbeafe;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }

    .ws-tab {
        border: 0;
        background: #f1f5f9;
        color: #475569;
        font-weight: 700;
        padding: 10px 18px;
        border-radius: 12px 12px 0 0;
        cursor: pointer;
        font-size: 1rem;
    }

    .ws-tab.active {
        background: #0d6efd;
        color: #fff;
    }

    .ws-tab[data-tab="disegni"].active {
        background: #6f42c1;
    }

    .ws-tab[data-tab="strumenti"].active {
        background: #fd7e14;
    }

    .ws-tab[data-tab="cicli"].active {
        background: #0f9d77;
    }

    .ws-tab-count {
        display: inline-block;
        min-width: 24px;
        padding: 1px 7px;
        margin-left: 6px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .12);
        font-size: .8rem;
    }

    .ws-tab-pane {
        display: none;
    }

    .ws-tab-pane.active {
        display: block;
    }

    .ws-disegni-list {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }

    .ws-disegno-item {
        border: 2px solid #6f42c1;
        background: #fff;
        color: #6f42c1;
        font-weight: 700;
        padding: 8px 14px;
        border-radius: 10px;
        cursor: pointer;
    }

    .ws-disegno-item.active {
        background: #6f42c1;
        color: #fff;
    }

    .ws-disegno-item[data-kind="strumenti"] {
        border-color: #fd7e14;
        color: #fd7e14;
    }

    .ws-disegno-item[data-kind="strumenti"].active {
        background: #fd7e14;
        color: #fff;
    }

    .ws-disegno-item[data-kind="cicli"] {
        border-color: #0f9d77;
        color: #0f9d77;
    }

    .ws-disegno-item[data-kind="cicli"].active {
        background: #0f9d77;
        color: #fff;
    }

    .ws-disegno-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        flex-wrap: wrap;
    }

    .ws-disegno-viewer {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        background: #f8fafc;
        height: 70vh;
    }

    .ws-disegno-viewer iframe {
        width: 100%;
        height: 100%;
        border: 0;
        background: #fff;
        display: block;
    }

    .ws-disegno-viewer .img-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #111;
    }

    .ws-disegno-viewer img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
</style>

<!-- MODALE LISTA FOGLI DI LAVORO -->
<div class="modal fade" id="worksheetsListModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-worksheet-list">
        <div class="modal-content">
            <div class="modal-header" style="background:linear-gradient(135deg,#e7f1ff,#d6e9ff);">
                <div>
                    <h5 class="modal-title mb-0">
                        <i class="fa-solid fa-clipboard-list me-2"></i>Fogli di lavoro collegati
                    </h5>
                    <small class="text-muted">Elenco fogli associati al profilo selezionato</small>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <input type="hidden" id="wl_idmatrice">
                <div class="fw-semibold mb-3" id="wl_matrice_name" style="color:#0b3d91;"></div>

                <div id="worksheetsListContainer">
                    <div class="text-muted">Caricamento fogli di lavoro...</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MODALE DETTAGLIO FOGLIO DI LAVORO -->
<div class="modal fade" id="worksheetDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-worksheet-view">
        <div class="modal-content" style="min-height:92vh;">
            <div class="modal-header" style="background:linear-gradient(135deg,#e7f1ff,#d6e9ff);">
                <div>
                    <h5 class="modal-title mb-0">
                        <i class="fa-solid fa-file-lines me-2"></i>Dettaglio foglio di lavoro
                    </h5>
                    <small class="text-muted">Visualizzazione completa in sola lettura</small>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body" id="worksheetDetailContainer">
                <div class="text-muted">Caricamento dettaglio foglio...</div>
            </div>
        </div>
    </div>
</div>