/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#ecf0f1;min-height:100vh}

/* Screens */
.screen{display:none}
.screen.active{display:block}

/* Login */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px}
.login-container{background:#fff;border-radius:10px;padding:40px;box-shadow:0 10px 40px rgba(0,0,0,0.2);max-width:400px;width:100%}
.logo{text-align:center;margin-bottom:30px}
.logo h1{color:#667eea;font-size:28px;margin-bottom:5px}
.logo p{color:#666;font-size:14px}
.login-info{margin-top:30px;padding-top:20px;border-top:1px solid #eee;font-size:12px;color:#666}

/* Forms */
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:5px;color:#333;font-weight:500;font-size:14px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:5px;font-size:14px;font-family:inherit;transition:border-color 0.3s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#3498db}
.form-group small{display:block;margin-top:5px;color:#999;font-size:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* Buttons */
.btn{padding:12px 24px;border:none;border-radius:5px;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.3s;font-family:inherit}
.btn-primary{background:#3498db;color:#fff;width:100%}
.btn-primary:hover{background:#2980b9;transform:translateY(-2px)}
.btn-secondary{background:#95a5a6;color:#fff}
.btn-secondary:hover{background:#7f8c8d}
.btn-success{background:#27ae60;color:#fff}
.btn-danger{background:#e74c3c;color:#fff}
.btn-danger:hover{background:#c0392b}
.btn-sm{padding:6px 12px;font-size:13px}

/* Messages */
.error-message{color:#e74c3c;font-size:14px;margin-top:10px;display:none}
.success-message{color:#27ae60;font-size:14px;margin-top:10px;display:none}

/* Sidebar */
.sidebar{position:fixed;left:0;top:0;width:260px;height:100vh;background:linear-gradient(180deg,#2c3e50 0%,#34495e 100%);color:#ecf0f1;display:flex;flex-direction:column;z-index:1000;transition:transform 0.3s}
.sidebar-header{padding:30px 20px;text-align:center;border-bottom:1px solid rgba(255,255,255,0.1)}
.sidebar-logo{background:#fff;border-radius:10px;padding:15px;margin-bottom:15px;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.sidebar-logo img{max-width:100%;height:auto;display:block}
.sidebar-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:5px}
.sidebar-subtitle{font-size:12px;color:#bdc3c7;font-weight:400}
.sidebar-nav{flex:1;padding:20px 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.sidebar-nav::-webkit-scrollbar{display:none}
.sidebar-nav-item{width:100%;padding:12px 20px;background:transparent;border:none;color:#ecf0f1;font-size:14px;font-weight:500;text-align:left;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:12px;border-left:3px solid transparent;font-family:inherit}
.sidebar-nav-item:hover{background:rgba(255,255,255,0.1);border-left-color:#3498db}
.sidebar-nav-item.active{background:#3498db;border-left-color:#2980b9;color:#fff}
.nav-icon{font-size:18px}
.nav-text{flex:1}
.sidebar-footer{padding:20px;border-top:1px solid rgba(255,255,255,0.1)}
.sidebar-user{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.user-avatar{width:40px;height:40px;border-radius:50%;background:#3498db;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff}
.user-info{flex:1}
.user-name-sidebar{font-size:14px;font-weight:600;color:#fff}
.user-role{font-size:12px;color:#bdc3c7}
.sidebar-logout-btn{width:100%;padding:10px;background:rgba(231,76,60,0.2);border:none;color:#fff;border-radius:5px;cursor:pointer;font-weight:600;font-size:13px;transition:all 0.3s;font-family:inherit}
.sidebar-logout-btn:hover{background:#e74c3c}

/* Mobile Toggle */
.sidebar-toggle{display:none;position:fixed;top:15px;left:15px;z-index:1100;width:40px;height:40px;background:#3498db;border:none;border-radius:5px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.sidebar-toggle span{width:20px;height:2px;background:#fff;transition:all 0.3s}

/* Main Content */
.main-content{margin-left:260px;min-height:100vh;transition:margin-left 0.3s}
.top-bar{background:#fff;padding:20px 30px;box-shadow:0 2px 4px rgba(0,0,0,0.05);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:100}
.page-title{font-size:24px;color:#2c3e50;font-weight:700}
.top-bar-right{display:flex;align-items:center;gap:20px}
.notification-btn{background:#fff;border:1px solid #ddd;padding:8px 12px;border-radius:5px;cursor:pointer;position:relative;font-size:18px;transition:all 0.3s;color:#f39c12}
.notification-btn:hover{background:#f8f9fa;border-color:#3498db;color:#e67e22}
.notification-badge{position:absolute;top:-5px;right:-5px;background:#e74c3c;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px}
.user-name-display{font-weight:600;color:#2c3e50;font-size:14px}
.view{padding:30px;display:none}
.view.active{display:block}
.view h2{color:#2c3e50;margin-bottom:20px;font-size:22px}

/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:30px}
.stat-card{background:#fff;padding:30px;border-radius:10px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:all 0.3s;border-left:4px solid #3498db}
.stat-card.clickable{cursor:pointer}
.stat-card.clickable:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}
.stat-card h3{font-size:42px;font-weight:700;margin-bottom:10px;color:#2c3e50}
.stat-card p{color:#7f8c8d;font-size:14px;font-weight:500}
.stat-card.orange{border-left-color:#e67e22}
.stat-card.orange h3{color:#e67e22}
.stat-card.yellow{border-left-color:#f39c12}
.stat-card.yellow h3{color:#f39c12}
.stat-card.blue{border-left-color:#3498db}
.stat-card.blue h3{color:#3498db}
.stat-card.green{border-left-color:#27ae60}
.stat-card.green h3{color:#27ae60}
.stat-card.purple{border-left-color:#8e44ad}
.stat-card.purple h3{color:#8e44ad}
.stat-card.red{border-left-color:#e74c3c}
.stat-card.red h3{color:#e74c3c}

/* Tickets */
.view-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}
.filters select{padding:10px 15px;border:1px solid #ddd;border-radius:5px;font-size:14px;background:#fff;cursor:pointer}
#tickets-list,#delivered-tickets-list{display:grid;gap:15px}
.ticket-card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.08);cursor:pointer;transition:all 0.3s;border-left:6px solid #3498db}
.ticket-card:hover{box-shadow:0 4px 15px rgba(0,0,0,0.12);transform:translateY(-2px)}
.ticket-card.status-aperto{background:#fff;border-left-color:#e67e22}
.ticket-card.status-assegnato{background:#fff;border-left-color:#f39c12}
.ticket-card.status-in-lavorazione{background:#fff;border-left-color:#3498db}
.ticket-card.status-pronto{background:#fff;border-left-color:#27ae60}
.ticket-card.status-scaduto{background:#fff;border-left-color:#e74c3c;border-left-width:8px}
.ticket-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px;flex-wrap:wrap;gap:10px}
.ticket-number{font-size:18px;font-weight:700;color:#3498db}
.ticket-status{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.status-aperto{background:#e67e22;color:#fff}
.status-assegnato{background:#f39c12;color:#fff}
.status-in-lavorazione{background:#3498db;color:#fff}
.status-pronto{background:#27ae60;color:#fff}
.status-scaduto{background:#e74c3c;color:#fff}
.ticket-object{font-size:16px;color:#2c3e50;margin-bottom:10px;font-weight:600}
.ticket-problem{font-size:14px;color:#7f8c8d;margin-bottom:10px;line-height:1.6}
.ticket-meta{display:flex;gap:20px;font-size:12px;color:#95a5a6;flex-wrap:wrap}
.ticket-progress{margin-top:15px}
.progress-bar{width:100%;height:8px;background:#ecf0f1;border-radius:4px;overflow:hidden}
.progress-fill{height:100%;background:#27ae60;transition:width 0.3s}

/* Forms */
.ticket-form{background:#fff;padding:30px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.08);max-width:800px !important}

/* Pulsante elimina su card */
.ticket-card-delete{position:absolute;top:50px;right:15px;background:#e74c3c;color:#fff;border:none;padding:6px 12px;border-radius:5px;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.3s;z-index:10}
.ticket-card-delete:hover{background:#c0392b;transform:scale(1.05)}

/* Layout ticket scaduti con badge a destra */
.overdue-ticket-header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}
.overdue-ticket-info{flex:1;min-width:0}
.overdue-ticket-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}

/* Modal */
/* MODAL - APPROCCIO FLEXBOX MODERNO */
.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.3);overflow-y:auto}
.modal.active,.modal.show{display:flex!important;align-items:center;justify-content:center;padding:20px}
.modal-content{background:#fff;padding:30px;border-radius:10px;max-width:800px;width:90%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 4px 20px rgba(0,0,0,0.15);margin:0 auto}
.close{position:absolute;right:20px;top:20px;font-size:28px;font-weight:700;color:#95a5a6;cursor:pointer;line-height:1}
.close:hover{color:#2c3e50}
.ticket-detail-header{border-bottom:2px solid #ecf0f1;padding-bottom:20px;margin-bottom:20px}
.ticket-detail-section{margin-bottom:30px}
.ticket-detail-section h3{color:#3498db;margin-bottom:15px;font-size:18px;font-weight:600}
.detail-table{width:100%;border-collapse:collapse}
.detail-table th,.detail-table td{padding:12px;text-align:left;border-bottom:1px solid #ecf0f1}
.detail-table th{background:#f8f9fa;font-weight:600;color:#2c3e50}
.detail-table td{color:#7f8c8d;white-space:pre-wrap;word-wrap:break-word;word-break:break-word;max-width:600px}

/* Users Table */
.users-table-container{overflow-x:auto;margin-top:20px;background:#fff;border-radius:10px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.users-table{width:100%;border-collapse:collapse}
.users-table thead{background:#34495e}
.users-table th{padding:15px;text-align:left;font-weight:600;color:#fff;border-bottom:2px solid #2c3e50}
.users-table td{padding:12px 15px;border-bottom:1px solid #ecf0f1;color:#2c3e50}
.users-table tbody tr:hover{background:#f8f9fa}
.users-table tbody tr:last-child td{border-bottom:none}
.badge{padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600}
.badge-success{background:#27ae60;color:#fff}
.badge-danger{background:#e74c3c;color:#fff}
.form-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.form-actions button{flex:1;min-width:120px}

/* Notifiche */
.notification-bell{position:relative;cursor:pointer;margin-right:20px;display:inline-block}
.bell-icon{font-size:24px}
.notification-badge{position:absolute;top:-5px;right:-10px;background:#e74c3c;color:#fff;border-radius:10px;padding:2px 6px;font-size:11px;font-weight:700;min-width:18px;text-align:center}
.notification-dropdown{position:absolute;top:45px;right:0;width:380px;max-height:500px;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.2);display:none;z-index:999999;overflow:visible}
.notification-dropdown.active{display:block}
.notification-header{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid #eee;background:#f8f9fa;border-radius:8px 8px 0 0}
.notification-header h4{margin:0;font-size:16px;color:#333}
.mark-all-read{background:transparent;border:none;color:#667eea;cursor:pointer;font-size:13px;font-weight:600}
.mark-all-read:hover{text-decoration:underline}
.notification-list{max-height:400px;overflow-y:auto}
.notification-item{padding:15px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background 0.2s}
.notification-item:hover{background:#f8f9fa}
.notification-item.unread{background:#e3f2fd}
.notification-item.unread:hover{background:#d1e7fd}
.notification-item-title{font-weight:600;margin-bottom:5px;color:#2c3e50}
.notification-item-text{font-size:13px;color:#7f8c8d;margin-bottom:5px}
.notification-item-time{font-size:12px;color:#999;margin-top:5px}
.no-notifications{padding:40px 20px;text-align:center;color:#999}

/* Responsive */
@media(max-width:768px){
.sidebar{transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.sidebar-toggle{display:flex}
.app-content{margin-left:0!important}
.main-content{margin-left:0}
.form-row{grid-template-columns:1fr}
.stats-grid{grid-template-columns:1fr 1fr}
.ticket-meta{flex-direction:column;gap:8px}
.view-header{flex-direction:column;align-items:flex-start}
.top-bar{padding:15px 20px;padding-left:70px;position:relative;z-index:100}
.page-title{font-size:18px;margin:0}
.notification-btn{padding:6px 10px;font-size:16px}
.user-name-display{display:none}
.view{padding:20px 15px}
.stat-card{padding:20px}
.stat-card h3{font-size:32px}
.ticket-card{padding:15px}
.ticket-number{font-size:16px}
/* .modal-content{width:95%;max-width:95%;margin:10px} */ /* COMMENTATO - Usa regola principale */
.notification-dropdown{position:fixed;top:120px;left:50%;transform:translateX(-50%);right:auto;width:calc(100vw - 30px);max-width:380px}
.notification-list{max-height:350px}
.top-bar-right{gap:10px}
}
@media(max-width:480px){
/* ============================================================
   MOBILE OPTIMIZATION - COMPLETA
   Adattamento automatico per smartphone
   ============================================================ */

/* Reset base per mobile */
*{box-sizing:border-box!important}
body{overflow-x:hidden!important}

/* Main content mobile */
.main-content{margin-left:0!important;padding:10px!important;width:100%!important;overflow-x:hidden!important}
.view{padding:10px!important;width:100%!important}

/* Top bar mobile */
.top-bar{flex-direction:row;align-items:center;gap:10px;padding:12px 15px;padding-left:60px;width:100%!important}
.top-bar-right{width:auto;justify-content:flex-end;gap:8px}
.page-title{font-size:16px;flex:1}
.notification-btn{padding:5px 8px;font-size:14px}
.user-name-display{display:none}

/* Sidebar toggle */
.sidebar-toggle{left:10px;top:10px;width:36px;height:36px}

/* Stats grid mobile */
.stats-grid{grid-template-columns:1fr;gap:10px;padding:0!important}
.stat-card{padding:15px!important;margin:0 0 10px 0!important}
.stat-card h3{font-size:24px}
.stat-card p{font-size:12px}

/* CARD TICKET MOBILE - FIX COMPLETO */
#tickets-list,#delivered-tickets-list{padding:0!important;margin:0!important;width:100%!important;display:flex;flex-direction:column;gap:10px}
.ticket-card{width:100%!important;max-width:100%!important;margin:0!important;padding:12px!important;box-sizing:border-box!important;overflow:hidden!important}
.ticket-header{flex-direction:column;align-items:flex-start!important;gap:6px!important;width:100%!important}
.ticket-number{font-size:14px!important}
.ticket-status{font-size:11px!important;padding:4px 10px!important}
.ticket-object{font-size:14px!important;margin-bottom:8px!important}
.ticket-problem{font-size:12px!important;line-height:1.4!important}
.ticket-meta{font-size:10px!important;flex-direction:column!important;gap:4px!important}
.ticket-meta span{display:block;margin-bottom:2px}

/* MODAL MOBILE - FIX DEFINITIVO */
/* IMPORTANTE: Azzera il margin-left: 280px del desktop */
.modal{padding:0!important;overflow-y:auto!important}
.modal.show,.modal.active{display:flex!important;justify-content:center!important;align-items:flex-start!important;padding:10px!important}

/* Regola UNIVERSALE per tutti i modal */
.modal-content,
#ticket-modal .modal-content,
#modal-nuovo-ticket .modal-content,
#warehouse-detail-modal .modal-content,
#upload-manual-modal .modal-content{
    /* AZZERA margin-left del desktop */
    margin:10px auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
    
    /* Larghezza mobile */
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    
    /* Posizionamento */
    left:0!important;
    right:0!important;
    position:relative!important;
    
    /* Dimensioni */
    padding:15px!important;
    max-height:calc(100vh - 40px)!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
}

/* Modal header mobile */
.modal-header{margin-bottom:15px!important;padding-bottom:10px!important}
.modal-header h2{font-size:18px!important}
.close{font-size:24px!important;top:15px!important;right:15px!important}

/* Modal body mobile */
.modal-body{font-size:13px!important}
.ticket-details{grid-template-columns:1fr!important;gap:10px!important}
.detail-item{padding:10px!important;font-size:12px!important}
.detail-item .value{font-size:14px!important}

/* Form mobile */
.form-row{grid-template-columns:1fr!important}
.form-group{margin-bottom:15px!important}
.form-group label{font-size:13px!important}
.form-group input,.form-group select,.form-group textarea{font-size:14px!important;padding:10px!important}
.ticket-form{padding:15px!important;width:100%!important}

/* Tables mobile */
.detail-table{font-size:12px!important;display:block!important;overflow-x:auto!important}
.detail-table th,.detail-table td{padding:8px 6px!important;font-size:11px!important}

/* Buttons mobile */
.btn{padding:10px 16px!important;font-size:13px!important}
.btn-sm{padding:6px 10px!important;font-size:12px!important}
.form-actions{flex-direction:column!important}
.form-actions button{width:100%!important}

/* View header mobile */
.view-header{flex-direction:column;align-items:flex-start;gap:10px;width:100%!important}
.filters select{width:100%!important;font-size:14px!important}
}

/* ============================================
   DASHBOARD STATISTICHE - STILI
   ============================================ */

/* KPI Cards Grid */
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.kpi-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 15px;
    border-left: 4px solid #3498db;
    transition: transform 0.2s, box-shadow 0.2s;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.kpi-icon {
    font-size: 32px;
    opacity: 0.8;
}

.kpi-content {
    display: flex;
    flex-direction: column;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

.kpi-label {
    font-size: 12px;
    color: #7f8c8d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.kpi-subtitle {
    font-size: 11px;
    color: #95a5a6;
    margin-top: 2px;
}

/* KPI Colors */
.kpi-blue { border-left-color: #3498db; }
.kpi-blue .kpi-value { color: #3498db; }
.kpi-green { border-left-color: #27ae60; }
.kpi-green .kpi-value { color: #27ae60; }
.kpi-orange { border-left-color: #f39c12; }
.kpi-orange .kpi-value { color: #f39c12; }
.kpi-purple { border-left-color: #9b59b6; }
.kpi-purple .kpi-value { color: #9b59b6; }
.kpi-red { border-left-color: #e74c3c; }
.kpi-red .kpi-value { color: #e74c3c; }

/* Main Stats Grid */
.stats-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.stats-chart-container,
.stats-distribution-container {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.stats-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ecf0f1;
}

.chart-wrapper {
    height: 350px;
    position: relative;
}

/* Distribution Bars */
.distribution-item {
    margin-bottom: 15px;
}

.distribution-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 14px;
}

.distribution-label {
    font-weight: 500;
    color: #2c3e50;
}

.distribution-value {
    font-weight: 700;
}

.distribution-bar {
    width: 100%;
    height: 12px;
    background: #ecf0f1;
    border-radius: 6px;
    overflow: hidden;
}

.distribution-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

/* Distribution Colors */
.dist-aperto .distribution-value,
.dist-aperto .distribution-fill { background: #e67e22; color: #e67e22; }
.dist-aperto .distribution-fill { background: #e67e22; }
.dist-assegnato .distribution-value { color: #f1c40f; }
.dist-assegnato .distribution-fill { background: #f1c40f; }
.dist-lavorazione .distribution-value { color: #3498db; }
.dist-lavorazione .distribution-fill { background: #3498db; }
.dist-pronto .distribution-value { color: #27ae60; }
.dist-pronto .distribution-fill { background: #27ae60; }
.dist-scaduto .distribution-value { color: #e74c3c; }
.dist-scaduto .distribution-fill { background: #e74c3c; }

/* Total Box */
.stats-total-box {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid #ecf0f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #7f8c8d;
    font-weight: 500;
}

.stats-total-value {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
}

/* Summary Grid */
.stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.summary-box {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.summary-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.summary-label {
    font-size: 13px;
    color: #7f8c8d;
    font-weight: 500;
}

/* Summary Colors */
.summary-blue { background: #ebf5fb; }
.summary-blue .summary-value { color: #3498db; }
.summary-green { background: #eafaf1; }
.summary-green .summary-value { color: #27ae60; }
.summary-red { background: #fdedec; }
.summary-red .summary-value { color: #e74c3c; }
.summary-purple { background: #f5eef8; }
.summary-purple .summary-value { color: #9b59b6; }

/* Stats Footer */
.stats-footer {
    text-align: center;
    color: #95a5a6;
    font-size: 13px;
    padding: 15px 0;
}

/* Responsive Stats */
@media (max-width: 1200px) {
    .stats-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .stats-main-grid {
        grid-template-columns: 1fr;
    }
    .stats-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpi-card {
        padding: 15px;
    }
    .kpi-value {
        font-size: 24px;
    }
    .chart-wrapper {
        height: 280px;
    }
}

@media (max-width: 480px) {
    .stats-kpi-grid {
        grid-template-columns: 1fr;
    }
    .stats-summary-grid {
        grid-template-columns: 1fr;
    }
    .summary-value {
        font-size: 26px;
    }
}

/* ============================================
   LIBRERIA MANUALI - TABELLA COMPATTA
   ============================================ */

/* Nascondi chip categorie */
.manuals-categories-grid {
    display: none !important;
}

/* Tabella manuali */
.manuals-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.manuals-table thead {
    background: #34495e;
}

.manuals-table th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: #fff;
    font-size: 14px;
}

.manuals-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ecf0f1;
    font-size: 14px;
    color: #2c3e50;
}

.manuals-table tbody tr:hover {
    background: #f8f9fa;
}

.manuals-table tbody tr:last-child td {
    border-bottom: none;
}

/* Nome file con icona */
.manual-filename {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdf-icon {
    font-size: 20px;
}

/* Badge categoria */
.manual-category-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #ecf0f1;
    color: #7f8c8d;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* Azioni */
.manual-actions-cell {
    text-align: center;
}

.btn-icon {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 5px;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: #ecf0f1;
}

.btn-icon.btn-view:hover {
    background: #ebf5fb;
}

.btn-icon.btn-download:hover {
    background: #eafaf1;
}

.btn-icon.btn-delete:hover {
    background: #fdedec;
}

/* Contatore manuali */
#manuals-counter {
    font-size: 14px;
    color: #7f8c8d;
    margin-left: 15px;
}

/* Responsive tabella */
@media (max-width: 768px) {
    .manuals-table th,
    .manuals-table td {
        padding: 10px;
        font-size: 13px;
    }
    
    .manuals-table th:nth-child(2),
    .manuals-table td:nth-child(2) {
        display: none;
    }
    
    .btn-icon {
        font-size: 16px;
        padding: 4px 6px;
    }
}

/* ============================================
   VISUALIZZATORE PDF INTEGRATO
   ============================================ */

#pdf-viewer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}

#pdf-viewer-modal.active {
    display: flex;
}

.pdf-viewer-content {
    width: 95%;
    height: 95%;
    max-width: 1400px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.pdf-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #34495e;
    color: #fff;
}

.pdf-viewer-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

.pdf-viewer-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pdf-viewer-actions .btn {
    padding: 8px 15px;
    font-size: 13px;
}

.pdf-viewer-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    font-size: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: 10px;
}

.pdf-viewer-close:hover {
    background: #e74c3c;
}

.pdf-viewer-body {
    flex: 1;
    background: #525659;
    overflow: hidden;
}

#pdf-viewer-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive PDF Viewer */
@media (max-width: 768px) {
    .pdf-viewer-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    
    .pdf-viewer-header {
        padding: 10px 15px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .pdf-viewer-header h3 {
        max-width: 100%;
        order: 1;
        flex: 1;
    }
    
    .pdf-viewer-actions {
        order: 2;
        width: 100%;
        justify-content: flex-end;
    }
    
    .pdf-viewer-actions .btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}
/* ============================================================
   CALENDARIO INTERVENTI - STILI DEDICATI
   Da aggiungere alla fine di style.css
   ============================================================ */

/* Tab Navigation */
.calendar-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0;
}

.tab-btn {
    padding: 12px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: #7f8c8d;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    bottom: -2px;
}

.tab-btn:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.tab-btn.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: rgba(102, 126, 234, 0.08);
}

/* Tab Content */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Maintenance Card */
.maintenance-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 5px solid #667eea;
    transition: all 0.3s ease;
}

.maintenance-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.maintenance-card[data-status="Scaduto"] {
    border-left-color: #e74c3c;
    background: #fff5f5;
}

.maintenance-card[data-status="Eseguito"] {
    border-left-color: #27ae60;
    background: #f0fff4;
    opacity: 0.9;
}

.maintenance-card[data-status="Saltato"] {
    border-left-color: #95a5a6;
    background: #f8f9fa;
    opacity: 0.85;
}

.maintenance-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ecf0f1;
}

.maintenance-card .card-header h4 {
    margin: 0;
    font-size: 18px;
    color: #2c3e50;
    font-weight: 600;
}

.maintenance-card .card-body {
    margin-bottom: 15px;
}

.maintenance-card .card-body p {
    margin: 8px 0;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

.maintenance-card .card-body strong {
    color: #2c3e50;
    font-weight: 600;
}

.maintenance-card .card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Status Badge */
.status-badge {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.programmato {
    background: #e3f2fd;
    color: #1976d2;
}

.status-badge.scaduto {
    background: #ffebee;
    color: #c62828;
}

.status-badge.eseguito {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.saltato {
    background: #eceff1;
    color: #546e7a;
}

/* Action Buttons */
.btn-action {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    background: #f8f9fa;
    color: #495057;
}

.btn-action:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

.btn-action.btn-success {
    background: #27ae60;
    color: white;
}

.btn-action.btn-success:hover {
    background: #229954;
}

.btn-action.btn-warning {
    background: #f39c12;
    color: white;
}

.btn-action.btn-warning:hover {
    background: #e67e22;
}

.btn-action.btn-danger {
    background: #e74c3c;
    color: white;
}

.btn-action.btn-danger:hover {
    background: #c0392b;
}

/* Maintenance Badge (Sidebar) */
.maintenance-badge {
    position: absolute;
    top: 8px;
    right: 12px;
    background: #e74c3c;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

/* No Data Message */
.no-data {
    text-align: center;
    padding: 60px 20px;
    color: #95a5a6;
    font-size: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

/* Modal Maintenance Form */
#maintenance-modal .modal-content {
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
}

#maintenance-modal h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #667eea;
}

/* Detail Modal */
#maintenance-detail-modal .modal-content {
    max-width: 700px;
}

.detail-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ecf0f1;
}

.detail-section:last-child {
    border-bottom: none;
}

.detail-section h3 {
    color: #667eea;
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

.detail-section p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .calendar-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-btn {
        padding: 10px 16px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    .maintenance-card {
        padding: 15px;
    }
    
    .maintenance-card .card-actions {
        flex-direction: column;
    }
    
    .btn-action {
        width: 100%;
    }
    
    #maintenance-modal .modal-content {
        max-width: 95%;
        margin: 10px;
    }
}

/* Admin-only visibility */
.admin-only {
    display: none;
}

/* Quando l'utente è admin, mostra elementi admin-only */
body.user-admin .admin-only {
    display: block;
}

body.user-admin button.admin-only {
    display: inline-block;
}

/* View Header Styles */
.view-header {
    margin-bottom: 25px;
}

.view-header .filters select {
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 14px;
    min-width: 200px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-header .filters select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}


/* ============================================ */
/* DASHBOARD CHARTS */
/* ============================================ */

.dashboard-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 30px;
    padding: 0 5px;
}

.chart-container {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    z-index: 1;
}

.chart-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #ecf0f1;
}

.chart-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-bar {
    display: flex;
    align-items: center;
    gap: 15px;
}

.chart-bar-label {
    min-width: 140px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-bar-wrapper {
    flex: 1;
    background: #ecf0f1;
    border-radius: 6px;
    height: 32px;
    position: relative;
    overflow: hidden;
}

.chart-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    position: relative;
}

.chart-bar-value {
    min-width: 45px;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

/* Colori barre ticket */
.bar-aperto { background: linear-gradient(90deg, #f39c12, #e67e22); }
.bar-assegnato { background: linear-gradient(90deg, #f1c40f, #f39c12); }
.bar-in-lavorazione { background: linear-gradient(90deg, #3498db, #2980b9); }
.bar-pronto { background: linear-gradient(90deg, #27ae60, #229954); }
.bar-scaduto { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.bar-chiuso { background: linear-gradient(90deg, #95a5a6, #7f8c8d); }

/* Colori barre interventi */
.bar-programmato { background: linear-gradient(90deg, #27ae60, #229954); }
.bar-maint-scaduto { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.bar-eseguito { background: linear-gradient(90deg, #3498db, #2980b9); }
.bar-saltato { background: linear-gradient(90deg, #95a5a6, #7f8c8d); }

.chart-summary {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ecf0f1;
    font-size: 14px;
    color: #7f8c8d;
    text-align: center;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-charts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .chart-bar-label {
        min-width: 100px;
        font-size: 13px;
    }
    
    .chart-container {
        padding: 20px;
    }
}


/* ============================================================
   SOLUZIONE FINALE - UNIFORMA MODAL DETTAGLIO TICKET
   Implementata secondo analisi tecnica corretta
   Data: 10 Gennaio 2026
   ============================================================ */

/* Uniforma l'overlay scuro - SOPRA la sidebar */
.modal {
    background-color: rgba(0, 0, 0, 0.3) !important;
    z-index: 10000 !important; /* Sopra sidebar (1000) */
}

/* Assicura che la sidebar resti sotto l'overlay del modal */
body:has(.modal.active) .sidebar {
    z-index: 100 !important; /* Sotto il modal */
}