* { box-sizing: border-box; }
html, body { width: 100%; margin: 0; padding: 0; overflow-x: hidden; }
:root { --header-bg:#343a40; --bg-light:#f4f6f9; --ko-color:#dc3545; --ko-bg:#ffe6e6; --ok-color:#198754; --ok-bg:#e8f5e9; --border-color:#dee2e6; --primary-btn:#0d6efd; --warning-color:#ff9f43; --nav-bg: #2c3e50; }
body { font-family:'Segoe UI',sans-serif; margin:0; background-color:var(--bg-light); padding-bottom:80px; color:#212529; }
.main-nav { display: flex; background: var(--nav-bg); padding: 0 20px; gap: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.main-tab-btn { padding: 15px 25px; border: none; background: transparent; color: #adb5bd; cursor: pointer; font-weight: bold; font-size: 15px; transition: 0.3s; border-bottom: 4px solid transparent; text-transform: uppercase; letter-spacing: 1px; }
.main-tab-btn i { margin-right: 8px; }
.main-tab-btn:hover { color: white; background: rgba(255,255,255,0.05); }
.main-tab-btn.active { color: white; border-bottom-color: var(--primary-btn); background: rgba(255,255,255,0.1); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.top-bar { background:#fff; padding:15px 20px; border-bottom:1px solid #ccc; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; box-shadow:0 2px 4px rgba(0,0,0,0.05); }
.app-title { font-size:22px; font-weight:700; color:#333; display:flex; align-items:center; gap:10px; }
.status-dot { height:12px; width:12px; background-color:#ccc; border-radius:50%; display:inline-block; }
.status-text { font-size:13px; font-weight:500; color:#666; }
.controls-area { display: flex; gap: 10px; align-items: center; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 5px; }
.controls-area > * { flex-shrink: 0; }
.controls-area::-webkit-scrollbar { display: none; }
select.year-select { padding:8px 12px; font-size:15px; border-radius:4px; border:1px solid #ced4da; font-weight:bold; cursor:pointer; }
.month-tabs { display:flex; overflow-x:auto; background:var(--header-bg); color:#adb5bd; padding:0 10px; box-shadow:0 4px 6px rgba(0,0,0,0.1); }
.month-tab { padding:14px 20px; cursor:pointer; border-bottom:4px solid transparent; transition:0.2s; white-space:nowrap; font-size:14px; text-transform:uppercase; letter-spacing:0.5px; }
.month-tab:hover { color:white; background:rgba(255,255,255,0.1); }
.month-tab.active { border-bottom-color:var(--ok-color); color:white; font-weight:700; background:rgba(255,255,255,0.15); }
.input-panel { background:white; margin:25px 20px; padding:25px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.08); border-top:5px solid var(--primary-btn); display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; align-items:end; }
.form-group { display:flex; flex-direction:column; }
.form-group label { font-weight:700; font-size:12px; margin-bottom:8px; color:#495057; text-transform:uppercase; letter-spacing:0.5px; }
.form-group input, .form-group select { padding:12px; border:1px solid #ced4da; border-radius:6px; width:100%; box-sizing:border-box; font-size:15px; }
button.action-btn { padding:12px; border:none; border-radius:6px; cursor:pointer; font-weight:700; color:white; transition:0.2s; font-size:14px; text-transform:uppercase; letter-spacing:0.5px; }
.btn-add { background-color:var(--primary-btn); }
.btn-edit { background-color:#ffc107; color:#000; }
.btn-teams { background-color:#6c757d; font-size:13px; }
.btn-cols { background-color:#17a2b8; font-size:13px; }
.btn-deadlines { background-color:var(--warning-color); font-size:13px; }
.table-wrapper { width: calc(100% - 20px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { min-width: 600px; }
#logTable thead th, #lavoriTable thead th { background-color:var(--header-bg); color:white; border:1px solid #454d55; padding:12px 8px; vertical-align:middle; line-height:1.2; }
#logTable tbody td, #lavoriTable tbody td { border:1px solid var(--border-color); padding:8px; vertical-align:middle; }
#statsTable { border-collapse:separate; border-spacing:15px 0; background:transparent; border:none; }
#statsTable th, #statsTable td { border:2px solid #000; padding:15px; font-size:16px; vertical-align:middle; }
.th-fit { width:1%; white-space:nowrap; padding:10px 10px; }
.th-squadra { width:15%; min-width:160px; white-space:normal; word-wrap:break-word; text-align:left; padding-left:15px; }
.th-group-ko { background-color:#495057; border-bottom:4px solid var(--ko-color)!important; font-size:15px; padding:10px; }
.th-sub-ko { min-width:90px; font-size:12px; font-weight:400; color:#e9ecef; white-space:nowrap; }
.th-ok-uniform { background-color:var(--header-bg)!important; color:white!important; border-top:4px solid var(--ok-color); }
.cell-ok { color:var(--ok-color); font-weight:900; background-color:var(--ok-bg); padding:4px 8px; border-radius:4px; font-size:16px; }
.cell-ko { color:var(--ko-color); font-weight:900; background-color:var(--ko-bg); font-size:16px; padding:4px 8px; border-radius:4px; }
.td-squadra { text-align:left; padding-left:15px; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.row-actions { opacity:1; display:flex; gap:5px; }
.td-wr { cursor:pointer; font-weight:bold; text-decoration:underline; text-decoration-style:dotted; text-decoration-color:#999; transition:background 0.2s; }
.td-wr:hover { background-color:rgba(0,0,0,0.1)!important; color:var(--primary-btn); }
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index: 2000; backdrop-filter:blur(3px); align-items:center; justify-content:center; }
#msgModal, #confirmModal { z-index: 3000 !important; }
.custom-modal { background:white; width:90%; max-width:500px; border-radius:10px; box-shadow:0 10px 25px rgba(0,0,0,0.2); overflow:hidden; animation:fadeIn 0.2s ease-out; display:flex; flex-direction:column; max-height:80vh; }
.modal-header { background:var(--header-bg); color:white; padding:15px 20px; font-size:18px; font-weight:600; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.modal-body { padding:25px; font-size:16px; color:#333; overflow-y:auto; }
.modal-footer { background:#f8f9fa; padding:15px 20px; display:flex; justify-content:flex-end; gap:10px; border-top:1px solid #eee; flex-shrink:0; }
.modal-btn { padding:10px 20px; border:none; border-radius:5px; cursor:pointer; font-weight:600; font-size:14px; }
.btn-confirm { background:var(--primary-btn); color:white; }
.btn-cancel { background:#6c757d; color:white; }
.btn-danger { background:var(--ko-color); color:white; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
.btn-icon { width:28px; height:28px; border-radius:4px; border:none; cursor:pointer; font-size:12px; display:inline-flex; align-items:center; justify-content:center; margin:0; transition:0.2s; }
.btn-del { background:#ffebee; color:#c62828; } .btn-del:hover { background:#ffcdd2; }
.btn-mod { background:#e3f2fd; color:#1565c0; } .btn-mod:hover { background:#bbdefb; }
.list-row { display:flex; justify-content:space-between; padding:12px; border-bottom:1px solid #f1f1f1; align-items:center; }
.dl-input { border:none; width:100%; padding:8px; box-sizing:border-box; background:transparent; font-size:14px; text-align:center; }
.dl-input:focus { background:#fff; outline:1px solid var(--primary-btn); border-radius:4px; }
.lavoro-card { background: white; padding: 12px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-top: 4px solid #ccc; font-size: 13px; display: flex; flex-direction: column; gap: 5px; }
.lavoro-card p { margin: 2px 0; line-height: 1.3; }
.grid-lavori { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card-ok { border-top-color: var(--ok-color) !important; background-color: #f9fdfa; }
.card-ko { border-top-color: var(--ko-color) !important; background-color: #fffafb; }
.calendar-wrapper { width: 100%; overflow-x: auto; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(35px, 1fr)); gap: 3px; margin-top: 15px; }
.calendar-header-flex { display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; padding: 10px; border-radius: 6px; border: 1px solid #dee2e6; }
.calendar-day-header { font-weight: 700; text-align: center; padding: 8px 0; background: #f8f9fa; border: 1px solid #dee2e6; font-size: 13px; color: #495057; }
.calendar-day { border: 1px solid #dee2e6; min-height: 75px; padding: 4px; background: white; display: flex; flex-direction: column; gap: 3px; }
.calendar-day.empty { background: transparent; border: none; }
.calendar-day.today { border: 2px solid var(--primary-btn); background: #f0f7ff; }
.calendar-date-number { font-weight: bold; margin-bottom: 2px; display: block; text-align: right; color: #555; font-size: 12px; }
.calendar-event { background: var(--warning-color); color: #000; padding: 4px; border-radius: 3px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-left: 3px solid #dc3545; font-weight: 600; transition: 0.2s; }
.calendar-event:active { opacity: 0.7; transform: scale(0.98); } 
@media (max-width: 600px) {
    .calendar-day { min-height: 55px; padding: 2px; }
    .calendar-day-header { font-size: 10px; padding: 5px 0; }
    .calendar-event { font-size: 9px; padding: 2px 3px; border-left-width: 2px; }
    #calendarMonthYear { font-size: 15px !important; }
    .calendar-header-flex { padding: 5px; }
    .input-panel, .table-wrapper { margin-left: 10px !important; margin-right: 10px !important; padding: 15px !important; }
    .top-bar { padding: 10px !important; }
    .main-nav { padding: 0 5px !important; justify-content: space-around; }
    .main-tab-btn { padding: 15px 5px !important; font-size: 12px !important; flex: 1; text-align: center; }
}
.upload-progress-container { display: none; width: 100%; background-color: #e9ecef; border-radius: 4px; overflow: hidden; margin-bottom: 10px; height: 8px; }
.upload-progress-bar { width: 100%; height: 100%; background-color: var(--primary-btn); background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; animation: progress-stripes 1s linear infinite; }
@keyframes progress-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
.btn-loading { opacity: 0.7; cursor: not-allowed !important; }