:root {
    --bg: #f7f7fb;
    --ink: #1f2937;
    --muted: #6b7280;
    --brand: #2563eb;
    --ok: #16a34a;
    --warn: #b45309;
    --bad: #dc2626;
    --card: #ffffff;
    --line: #e5e7eb;
    
    /* Grid Column Widths */
    --op-width: 220px;
    --tot-width: 65px;
    --not-width: 45px;
    --ft-width: 55px;
}

/* Sticky Columns Logic */
.sticky-col {
    position: sticky !important;
    z-index: 10;
}

/* Mobile: disable sticky for columns except maybe operator if needed */
@media (max-width: 768px) {
    .sticky-col {
        position: static !important;
        z-index: auto !important;
    }
}

.col-operator {
    left: 0;
    width: var(--op-width) !important;
    min-width: var(--op-width) !important;
    max-width: var(--op-width) !important;
    z-index: 18 !important; /* Highest priority column */
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    background: #fff; /* Ensure opaque background */
}

.col-totali {
    left: calc(var(--op-width) - 1px);
    width: var(--tot-width) !important;
    min-width: var(--tot-width) !important;
    max-width: var(--tot-width) !important;
    z-index: 17 !important;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    background: #f0f9ff; /* Ensure opaque background */
    border-left: none !important; /* Remove left border to prevent double borders */
}

.col-notti {
    left: calc(var(--op-width) + var(--tot-width) - 2px);
    width: var(--not-width) !important;
    min-width: var(--not-width) !important;
    max-width: var(--not-width) !important;
    z-index: 16 !important;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    background: #faf5ff; /* Ensure opaque background */
    border-left: none !important;
}

.col-ft {
    left: calc(var(--op-width) + var(--tot-width) + var(--not-width) - 3px);
    width: var(--ft-width) !important;
    min-width: var(--ft-width) !important;
    max-width: var(--ft-width) !important;
    z-index: 15 !important;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #d1d5db !important; /* Stronger border to separate from scrolling content */
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    background: #fffbeb; /* Ensure opaque background */
    border-left: none !important;
}

/* Reduce padding for narrow sticky columns */
.col-totali, .col-notti, .col-ft {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* Headers need higher z-index to stay on top of vertical scroll */
thead th.sticky-col {
    z-index: 30 !important; /* Corner headers */
    top: 0;
}

thead th.day-header {
    position: sticky;
    top: 0;
    z-index: 20 !important; /* Day headers - must be > sticky body cells (15) */
    background: #fafafa; /* Ensure opaque */
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    background: var(--bg);
    color: var(--ink)
}

/* Modal Overlay Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 24px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

/* Details/Summary Collapsible Sections */
details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.2s ease;
}

details[open] > summary::before {
    transform: rotate(90deg);
}

*,
*::before,
*::after {
    font-family: inherit;
}

strong,
b {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-weight: 600;
}

header {
    background: linear-gradient(#fff, #fafafa);
    border-bottom: 1px solid var(--line);
    z-index: 10;
    transition: all 0.3s ease;
}

.wrap {
    max-width: 1600px;
    margin: 0 auto;
    padding: 8px
}

.unified-controls {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    transition: all 1s ease;
}

.controls-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
}

.controls-header:hover {
    opacity: 0.8;
}

.controls-toggle {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    transition: transform 1s ease;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.controls-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.toggle-icon {
    transition: transform 0.3s ease;
    display: inline-block;
    font-size: 14px;
    color: var(--ink);
    /* Colore scuro per visibilità */
    font-weight: 600;
}

.controls-toggle.expanded .toggle-icon {
    transform: rotate(180deg);
}

/* Layout header - stili di base per desktop */
.header-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.header-row-1 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-row-2 {
    flex: 1;
}

.header-row-3 {
    display: flex;
    align-items: center;
}

.controls-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
}

.controls-content.expanded {
    max-height: 2000px;
    /* Valore molto alto per contenere tutto */
    opacity: 1;
    overflow: visible;
    /* Permette l'espansione completa */
}

/* Assicura che i control-group si espandano completamente */
.controls-content.expanded .control-group {
    height: auto;
    overflow: visible;
}

.controls-content.expanded .row.controls {
    height: auto;
    overflow: visible;
}

.control-group {
    padding: 0;
    margin-right: 12px;
    flex: 1;
    min-width: 0;
}

.control-group:last-child {
    margin-right: 0;
}

.control-group.fixed-width {
    flex: 0 0 auto;
    min-width: 120px;
}

/* Help text styling */
small {
    line-height: 1.4;
}

.help-tip {
    background: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
    color: #1e40af;
    margin-top: 4px;
}

h1 {
    font-weight: 750;
    letter-spacing: .2px;
    margin: 0 0 6px
}

.row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: end
}

.row.controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: end;
    width: 100%;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px
}

label {
    font-size: 12px;
    color: var(--muted);
    display: block;
    margin-bottom: 4px
}

.label-main {
    font-weight: 700;
    color: var(--ink);
    font-size: 13px;
}

input,
select,
button,
textarea {
    font: inherit
}

input[type="number"],
input[type="text"],
input[type="month"],
textarea {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 8px;
    background: #fff;
    min-width: 120px;
    font-size: 13px;
    box-sizing: border-box;
}

textarea {
    min-height: 100px;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}

button {
    border: 0;
    border-radius: 6px;
    padding: 10px 14px;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
}

button.ghost {
    background: #eef2ff;
    color: #3730a3
}

button.line {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line)
}

button:disabled {
    opacity: .5;
    cursor: not-allowed
}

/* Label sopra agli input - stile generale */
.label-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}

.label-input-group label {
    align-self: flex-start;
    margin-bottom: 0;
}

/* Uniformare i bottoni della textarea con gli altri */
#btnLoadDemo,
#btnApplyNames,
#btnAuto,
#btnClear,
#btnExportJSON,
#btnImportJSON,
#btnPDF {
    font-size: 13px !important;
    padding: 8px 11px !important;
}

/* Grid */
.grid-container {
    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    max-height: calc(100vh - 120px);
    /* Ridotto da 200px a 120px ora che la legenda è nel menu */
    position: relative;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 920px;
    width: auto;
    position: relative;
}

th,
td {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 4px 6px;
    text-align: center;
    min-width: 40px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    font-size: 12px;
}

thead th {
    position: sticky;
    top: 0;
    background: #fafafa;
    font-weight: 700;
    z-index: 5;
    border-bottom: 2px solid var(--line);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Ensure all headers stay sticky on mobile too */
@media (max-width: 768px) {
    thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
    }
}

/* Sticky left for the operator column (first column)
               The second column (total hours) will have its left
               value computed dynamically; we still set z-index and
               background here to ensure correct stacking. */
thead th:first-child {
    /* Handled by .col-operator class now */
    background: #fafafa;
}

tbody th {
    /* Handled by .col-operator class now */
    background: #fff;
    font-weight: 600;
    text-align: left;
}

/* Make the "Ore Totali" column sticky and above regular cells
               but below header cells to avoid overlap issues. Left is set
               dynamically by JS to match the operator column width. */
tbody td:nth-child(2) {
    /* Handled by .col-totali class now */
    background: #f0f9ff;
}

tbody tr:hover td,
tbody tr:hover th {
    background: #f5f5f5
}

/* Mantieni il colore per i fuori turnisti anche in hover */
tbody tr:has(th[style*="border-left: 3px solid #f97316"]):hover td {
    background: #fed7aa !important;
}

tbody tr:has(th[style*="border-left: 3px solid #f97316"]):hover th {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
}

/* Editable operator names */
th input[type="text"] {
    transition: all 0.2s ease;
}

th input[type="text"]:focus {
    background: #f8fafc !important;
    border: 1px solid #3b82f6 !important;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

th:hover input[type="text"] {
    background: #f9fafb;
}

th:first-child,
td:first-child {
    border-left: 1px solid var(--line)
}

th:last-child,
td:last-child {
    border-right: 1px solid var(--line)
}

/* Badges */
.b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
}

.M {
    background: #3b82f6;
    color: white;
    font-weight: bold;
}

.P {
    background: #f59e0b;
    color: white;
    font-weight: bold;
}

.N {
    background: #dc2626;
    color: white;
    font-weight: bold;
}

.SN {
    background: #6b7280;
    color: white;
    font-weight: bold;
}

.R {
    background: #f3f4f6;
    color: #374151;
}

.FERIE {
    background: #dcfce7
}

.MAL {
    background: #fee2e2
}

.GRAV {
    background: #fde68a
}

.D104 {
    background: #fef3c7
}

.MP {
    background: #f3e8ff
}

.CP {
    background: #ecfdf5
}

.ASP {
    background: #f0f9ff
}

.FORM {
    background: #fffbeb
}

.SIND {
    background: #fdf2f8
}

/* Stili per dropdown selezione veloce */
.quick-select-dropdown {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border: 2px solid #2563eb;
    border-radius: 6px;
    background: white;
    font-family: inherit;
    transition: all 0.2s ease;
}

.quick-select-dropdown:focus {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

/* Animazione su pressione prolungata */
.cell-long-pressing {
    transform: scale(0.95);
    background: #dbeafe !important;
    transition: all 0.2s ease;
}

.legend {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.legend div {
    display: flex;
    gap: 4px;
    font-size: 12px;
    align-items: center;
    min-width: 0;
}

.legend .dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--line);
    display: inline-block;
    flex-shrink: 0;
}

/* Dots generici (per la legenda nel menu espandibile) */
.dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--line);
    display: inline-block;
    flex-shrink: 0;
}

.legend .dot.M,
.dot.M {
    background: #3b82f6;
    border-color: #2563eb;
}

.legend .dot.P,
.dot.P {
    background: #f59e0b;
    border-color: #d97706;
}

.legend .dot.N,
.dot.N {
    background: #dc2626;
    border-color: #b91c1c;
}

.legend .dot.SN,
.dot.SN {
    background: #6b7280;
    border-color: #4b5563;
}

/* Aggiungo anche i dots mancanti */
.legend .dot.R,
.dot.R {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.legend .dot.FERIE,
.dot.FERIE {
    background: #10b981;
    border-color: #059669;
}

.legend .dot.MAL,
.dot.MAL {
    background: #ef4444;
    border-color: #dc2626;
}

.legend .dot.GRAV,
.dot.GRAV {
    background: #f59e0b;
    border-color: #d97706;
}

.legend .dot.D104,
.dot.D104 {
    background: #8b5cf6;
    border-color: #7c3aed;
}

.legend .dot.MP,
.dot.MP {
    background: #ec4899;
    border-color: #db2777;
}

.legend .dot.CP,
.dot.CP {
    background: #10b981;
    border-color: #059669;
}

.legend .dot.ASP,
.dot.ASP {
    background: #3b82f6;
    border-color: #2563eb;
}

.legend .dot.FORM,
.dot.FORM {
    background: #f59e0b;
    border-color: #d97706;
}

.legend .dot.SIND,
.dot.SIND {
    background: #8b5cf6;
    border-color: #7c3aed;
}

.hours-summary {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}

.hours-summary h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: var(--ink);
}

.hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.hours-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 13px;
}

.hours-item.over-limit {
    background: #fee2e2;
    color: var(--bad);
    font-weight: 600;
}

.current-month {
    animation: pulse 2s ease-in-out;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

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

.log {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    background: #0b1020;
    color: #e5e7eb;
    border-radius: 10px;
    padding: 10px
}

/* Print */
/* === RESPONSIVE DESIGN PER MOBILE === */

/* Touch optimizations per tutti i device */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
}

button,
input,
select,
textarea,
label {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
}

/* Desktop grandi - ottimizzazione legenda */
@media (min-width: 1025px) {
    .legend {
        grid-template-columns: repeat(9, 1fr);
        gap: 4px;
    }

    .legend div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        font-size: 10px;
        text-align: center;
        padding: 4px 2px;
        min-height: 35px;
    }

    /* Bottoni più grandi su desktop */
    button {
        font-size: 13px !important;
        padding: 8px 11px !important;
    }

    .unified-controls button,
    .control-group button,
    .btn-primary,
    .btn-secondary,
    #btnLoadDemo,
    #btnApplyNames,
    #btnAuto,
    #btnClear,
    #btnExportJSON,
    #btnImportJSON,
    #btnPDF {
        font-size: 13px !important;
        padding: 8px 11px !important;
    }

    /* Input più grandi su desktop */
    input[type="number"],
    input[type="text"],
    input[type="month"],
    textarea {
        font-size: 15px !important;
        padding: 10px 12px !important;
        min-width: 140px !important;
    }

    /* Override for operator column to keep text small */
    .col-operator input[type="text"] {
        font-size: 11px !important;
        padding: 4px 6px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Ripristina sticky positioning per desktop */
}

/* Tablet e mobile */
@media (max-width: 1024px) {
    .wrap {
        padding: 4px;
    }

    .unified-controls {
        padding: 8px;
    }

    .row.controls {
        flex-direction: column;
        gap: 8px;
    }

    .control-group {
        min-width: auto !important;
    }

    .control-group.fixed-width {
        min-width: auto !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .wrap {
        max-width: 100%;
        padding: 8px 12px;
        /* Più padding laterale */
    }

    .legend {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .legend div {
        font-size: 11px;
        gap: 3px;
    }

    h1 {
        font-size: 1.5rem;
        margin: 12px 0;
        /* Più margine */
    }

    .unified-controls {
        margin: 8px 0;
        /* Più margine */
        padding: 12px;
        /* Più padding */
        border-radius: 8px;
    }

    /* Layout mobile: riorganizza header in tre righe */
    .controls-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .header-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .header-row-1 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .header-row-2 {
        order: 2 !important;
    }

    .header-row-3 {
        order: 3 !important;
        justify-content: flex-start !important;
    }

    /* Nascondi la riga dei titoli su mobile e usa i titoli integrati */
    .config-titles-row {
        display: none !important;
    }

    /* Reorganizza il layout per mobile */
    .config-inputs-row {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: stretch !important;
    }

    .config-inputs-row>div {
        width: 100% !important;
        flex: none !important;
    }

    /* Aggiungi titoli per ogni sezione su mobile */
    .config-inputs-row>div::before {
        content: attr(data-title);
        display: block !important;
        font-weight: 600 !important;
        color: #374151 !important;
        font-size: 13px !important;
        margin-bottom: 8px !important;
        padding-bottom: 4px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* Adatta la legenda per mobile */
    .config-legend-row {
        margin-top: 16px !important;
    }

    .config-legend-row>div:nth-child(2) {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .controls-header {
        font-size: 14px;
        padding: 12px;
        /* Più padding */
    }

    .row.controls {
        flex-direction: column;
        gap: 16px;
        /* Più spazio tra le righe di configurazione */
        width: 100%;
        /* Assicura che il container prenda tutta la larghezza */
    }

    .control-group {
        width: 100%;
        margin: 0 0 12px 0;
        /* Solo margin-bottom, azzera sx/dx */
        margin-right: 0;
        /* Esplicito per sovrascrivere CSS base */
        padding: 0;
        /* Rimuovo padding per non interferire con la larghezza */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        /* Separatore visivo */
        box-sizing: border-box;
        /* Include border nel calcolo */
    }

    .control-group:last-child {
        border-bottom: none;
        /* Rimuove il bordo dall'ultimo elemento */
    }

    .control-group .row {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Tabella responsive - miglioramenti per mobile */
    .grid-container {
        max-height: calc(100vh - 100px);
        overflow-x: auto;
        overflow-y: auto;
    }

    .table-container {
        min-width: auto !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 500px;
        /* Ridotto ulteriormente per dare più spazio */
        font-size: 13px;
        /* Aumentato da 12px */
    }

    th,
    td {
        padding: 8px 6px;
        /* Aumentato padding verticale da 6px a 8px */
        min-width: 32px;
        /* Aumentato da 28px */
        min-height: 44px;
        /* Aumentato da 36px per migliore touch target */
        position: relative;
    }

    /* Celle cliccabili più grandi per touch */
    td[data-day] {
        min-height: 48px;
        /* Aumentato da 40px */
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(37, 99, 235, 0.2);
        font-size: 14px;
        /* Font più grande per i turni */
        font-weight: 600;
        /* Grassetto per migliore leggibilità */
    }

    td[data-day]:hover {
        background-color: rgba(37, 99, 235, 0.1);
    }

    /* Colonna operatore più larga su mobile per leggibilità nomi */
    .operator-cell {
        font-size: 11px !important;
        /* Aumentato da 10px */
        max-width: 120px !important;
        /* Aumentato da 75px per migliore leggibilità */
        min-width: 120px !important;
        /* Forza larghezza fissa più ampia */
        width: 120px !important;
        word-break: break-word;
        line-height: 1.2;
        /* Migliore leggibilità */
        padding: 6px 4px !important;
        /* Aumentato padding */
    }

    /* Colonne giorni più larghe */
    .day-header {
        min-width: 45px !important;
        /* Più larghe per i giorni */
        width: 45px !important;
        font-size: 12px;
    }

    /* Colonna ore totali più stretta su mobile */
    .total-hours-cell {
        min-width: 45px !important;
        max-width: 45px !important;
        width: 45px !important;
        font-size: 10px !important;
        font-weight: 600;
        padding: 4px 2px !important;
        /* Disabilita sticky su mobile */
        z-index: auto !important;
        /* Reset z-index */
    }

    /* Disabilita sticky per la seconda colonna su mobile */
    tbody td:nth-child(2) {
        z-index: auto !important;
    }

    /* Disabilita sticky anche per l'header della seconda colonna su mobile */
    thead th:nth-child(2) {
        z-index: auto !important;
    }

    /* Header più compatto */
    thead th {
        padding: 6px 4px;
        /* Ridotto padding header */
        font-size: 11px;
        /* Header più piccolo */
    }

    /* Pulsanti più touch-friendly su mobile */
    button {
        font-size: 12px;
        padding: 8px 10px;
        min-height: 36px;
        /* Touch target */
    }

    .btn-primary,
    .btn-secondary {
        font-size: 13px;
        padding: 10px 14px;
        min-height: 44px;
    }

    /* Label sopra agli input per una migliore UX */
    .control-group .label-input-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        align-items: stretch !important;
    }

    .control-group .label-input-group label {
        align-self: flex-start !important;
        margin-bottom: 0 !important;
    }

    /* Uniformare i bottoni della textarea su mobile */
    #btnLoadDemo,
    #btnApplyNames {
        font-size: 12px !important;
        padding: 8px 10px !important;
        min-height: 36px !important;
    }

    /* Input a piena larghezza su mobile */
    input[type="number"],
    input[type="text"],
    input[type="month"],
    textarea {
        width: 100% !important;
        min-width: auto !important;
        box-sizing: border-box !important;
    }

    /* Assicura che i container degli input si espandano */
    .config-inputs-row>div {
        width: 100% !important;
        flex: none !important;
    }

    .label-input-group {
        width: 100% !important;
    }

    .label-input-group input {
        width: 100% !important;
    }

    /* Pulsanti azioni disponibili */
    #btnAuto,
    #btnClear,
    #btnExportJSON,
    #btnImportJSON,
    #btnPDF {
        font-size: 12px !important;
        padding: 12px 16px !important;
        /* Più padding per touch */
        min-height: 48px;
        /* Target touch standard */
        white-space: nowrap;
        width: 100%;
        /* Larghezza piena su mobile */
        text-align: center;
        justify-content: center;
        display: flex;
        align-items: center;
    }

    /* Container dei pulsanti azioni */
    .control-group .row {
        flex-wrap: wrap;
        gap: 8px !important;
        /* Più spazio tra i pulsanti */
        align-items: stretch;
        flex-direction: column;
        /* Una colonna su mobile */
    }

    .control-group .row button {
        flex: none;
        /* Non crescere/ridursi */
        width: 100%;
        /* Larghezza piena */
        min-width: auto;
        max-width: none;
        box-sizing: border-box;
        margin-bottom: 4px;
        /* Spazio tra i pulsanti */
    }

    /* Control group che contiene i pulsanti azioni */
    .control-group:has(#btnAuto) {
        min-width: auto;
        flex: 1 1 100%;
    }

    /* Fallback per browser che non supportano :has */
    .control-group:last-of-type {
        min-width: auto;
        flex: 1 1 100%;
    }

    /* Labels più spaziose su mobile */
    label {
        display: block;
        margin-bottom: 6px;
        /* Più spazio sotto le label */
        font-weight: 500;
        cursor: pointer;
        min-height: 20px;
    }

    .label-main {
        margin-bottom: 8px !important;
        font-size: 14px;
    }

    /* Piccole descrizioni con più spazio */
    small {
        margin-bottom: 8px !important;
        display: block !important;
        line-height: 1.4;
    }

    /* Input più compatti */
    input[type="text"],
    input[type="number"],
    input[type="month"],
    textarea {
        font-size: 16px;
        /* Evita zoom su iOS */
        padding: 8px 10px;
        border-radius: 6px;
        min-height: 44px;
        /* Touch target size */
        box-sizing: border-box;
        width: 100% !important;
        /* Forza la larghezza piena */
    }

    input[type="number"] {
        min-height: 44px;
    }

    /* Labels più touch-friendly */
    label {
        display: block;
        margin-bottom: 4px;
        font-weight: 500;
        cursor: pointer;
        min-height: 20px;
    }

    /* Miglioramenti per i controlli */
    .controls-header {
        min-height: 48px;
        /* Touch target */
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    .controls-header button {
        min-width: 44px;
        min-height: 44px;
        border-radius: 8px;
    }

    /* Area espandibile su mobile - completamente aperta */
    .controls-content {
        transition: none !important;
        /* Rimuove animazione su mobile */
    }

    .controls-content.expanded {
        max-height: none !important;
        /* Rimuove ogni limitazione */
        height: auto !important;
        overflow: visible !important;
        /* Permette espansione completa */
        padding: 12px;
        /* Padding simmetrico su tutti i lati */
        margin: 0;
        /* Rimuove eventuali margini */
        opacity: 1 !important;
        display: block !important;
    }

    /* Assicura che anche i container padre non limitino */
    .unified-controls {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    header {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .toggle-icon {
        font-size: 16px;
        /* Più grande su mobile */
        font-weight: bold;
        color: var(--ink) !important;
        /* Forza il colore scuro */
    }

    /* Suggerimenti più compatti */
    .suggestions {
        font-size: 12px;
        padding: 8px;
    }

    .suggestions .suggestion-row {
        margin: 4px 0;
    }

    /* Modal responsive */
    .delete-modal-content {
        width: 90%;
        max-width: 300px;
        margin: 0;
        padding: 16px;
    }

    .delete-modal-title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .delete-modal-actions button {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* Assicura che la modale sia a schermo intero su mobile */
    .delete-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 1000;
    }

    .delete-modal-content {
        width: 90% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        margin-top: 15vh !important;
        border-radius: 8px;
    }
}

/* Mobile molto piccolo */
@media (max-width: 480px) {
    .wrap {
        padding: 6px 10px;
        /* Più padding laterale */
    }

    h1 {
        font-size: 1.2rem;
        margin: 10px 0;
        /* Più margine */
    }

    .unified-controls {
        padding: 10px;
        /* Più padding */
        margin: 6px 0;
        /* Più margine */
    }

    table {
        min-width: 480px;
        font-size: 11px;
    }

    th,
    td {
        padding: 3px 2px;
        min-width: 22px;
        min-height: 32px;
    }

    td[data-day] {
        min-height: 36px;
    }

    .operator-cell {
        font-size: 11px;
        /* Aumentato da 10px */
        max-width: 120px;
        /* Aumentato da 75px per migliore leggibilità */
    }

    button {
        font-size: 11px;
        padding: 6px 8px;
        min-height: 36px;
    }

    /* Pulsanti azioni su mobile piccolo */
    #btnAuto,
    #btnClear,
    #btnExportJSON,
    #btnImportJSON,
    #btnPDF {
        font-size: 12px !important;
        padding: 10px 14px !important;
        /* Padding adeguato */
        min-height: 44px;
        /* Target touch appropriato */
        width: 100%;
        /* Larghezza piena */
        flex: none;
        margin-bottom: 4px;
    }

    /* Container azioni su mobile piccolo - mantiene layout colonna */
    .control-group .row {
        justify-content: flex-start;
        flex-direction: column;
        gap: 6px !important;
    }

    input[type="text"] {
        width: 100% !important;
    }

    input[type="number"] {
        min-height: 40px;
    }

    .control-group .row {
        justify-content: space-between;
    }

    .control-group .row>div {
        flex: 1;
        min-width: 0;
    }

    .delete-modal-content {
        width: 95%;
        margin: 0;
        padding: 12px;
    }

    /* Scroll indicator per mobile */
    .grid-container::after {
        content: "← Scorri orizzontalmente →";
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 10px;
        pointer-events: none;
        z-index: 10;
        opacity: 0.8;
        animation: fadeInOut 4s ease-in-out infinite;
    }

    @keyframes fadeInOut {

        0%,
        100% {
            opacity: 0.3;
        }

        50% {
            opacity: 0.8;
        }
    }

    /* Nasconde l'indicatore dopo il primo scroll */
    .grid-container.scrolled::after {
        display: none;
    }
}

@media print {

    header,
    .controls,
    .log {
        display: none !important
    }

    body {
        background: #fff
    }

    table {
        font-size: 11px
    }

    thead th {
        top: 0
    }

    .grid-container {
        border: 0
    }

}

/* Print helper: when printing we add a class to body to adjust layout */
body.print-ready table {
    table-layout: fixed !important;
    width: 100% !important;
    font-size: 8px !important;
    /* Ridotto da 9px */
}

body.print-ready th,
body.print-ready td {
    padding: 2px 3px !important;
    /* Ridotto da 4px 6px */
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
}

/* Riduci larghezza colonne per stampa */
body.print-ready .operator-cell {
    width: auto !important;
    /* Larghezza dinamica basata sul contenuto */
    min-width: auto !important;
    white-space: nowrap !important;
    /* Evita che il nome vada a capo */
}

body.print-ready .total-hours-cell {
    width: 40px !important;
    min-width: 40px !important;
}

body.print-ready .day-header {
    width: 22px !important;
    min-width: 22px !important;
}

/* Disable sticky headers/columns for printing - they cause clipping in some browsers */
body.print-ready thead th,
body.print-ready tbody th,
body.print-ready tbody td {
    position: static !important;
    left: auto !important;
    top: auto !important;
}

/* Force a compact layout for large tables when printing in landscape */
@page {
    size: A4 landscape;
    margin: 4mm;
    /* Margini ridotti */
}

/* Delete confirmation modal */
.delete-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.delete-modal.show {
    opacity: 1;
    visibility: visible;
}

.delete-modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.delete-modal.show .delete-modal-content {
    transform: scale(1);
}

.delete-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.delete-modal-icon {
    width: 48px;
    height: 48px;
    background: #fee2e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    font-size: 24px;
}

.delete-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.delete-modal-message {
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.5;
}

.delete-modal-operator {
    font-weight: 600;
    color: #111827;
}

.delete-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.delete-modal-actions button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-modal-cancel {
    background: white;
    color: #374151;
}

.delete-modal-cancel:hover {
    background: #f9fafb;
}

.delete-modal-confirm {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
}

.delete-modal-confirm:hover {
    background: #b91c1c;
}

@page {
    size: A4 landscape;
    margin: 12mm
}