/* ===============================================
   === STYLE.CSS - STILE PIDUEMME v2.3 ===========
   ===============================================
   Design coerente con odoo-modifiche-schede
   Colori: Verde #36a763, Verde scuro #125632
   Font: Ubuntu
*/

/* --- RESET E VARIABILI --- */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colori Piduemme */
    --color-primary: #36a763;
    --color-primary-dark: #125632;
    --color-primary-light: #4db87a;
    --color-primary-hover: #2d8a52;

    /* Colori UI */
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f5f5;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-color: #e0e0e0;

    /* Colori Stato */
    --color-success: #36a763;
    --color-warning: #ff9800;
    --color-danger: #dc3545;
    --color-info: #17a2b8;

    /* Badge operazioni */
    --color-estrusione: #dc3545;
    --color-saldatura: #9365b8;
    --color-stampa: #d6145f;

    /* Dimensioni */
    --header-height: 60px;
    --toolbar-height: 60px;
    --card-min-width: 220px;
    --card-max-width: 300px;
    --spacing: 20px;
    --spacing-sm: 10px;
    --spacing-lg: 30px;
    --border-radius: 8px;
    --border-radius-lg: 12px;

    /* Ombre */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Transizioni */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
}

/* --- DARK MODE --- */
[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --text-primary: #eaeaea;
    --text-secondary: #b8b8b8;
    --text-muted: #666666;
    --border-color: #333355;
    --color-primary-dark: #2d8a52;
}

/* --- BASE --- */
body {
    font-family:
        "Ubuntu",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

.hidden {
    display: none !important;
}

/* --- HEADER --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing);
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing);
}

.header h1 {
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.header-subtitle {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    color: #125632;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.header-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background var(--transition-fast);
    color: white;
}

.header-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-warning);
    animation: pulse 1.5s infinite;
}

.status-dot.connected {
    background: #90ee90;
    animation: none;
}

.status-dot.error {
    background: var(--color-danger);
    animation: none;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* --- TOOLBAR --- */
.toolbar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: var(--toolbar-height);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing);
    gap: var(--spacing);
    z-index: 99;
    box-shadow: var(--shadow-sm);
}

.search-bar {
    flex: 1;
    max-width: 400px;
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0 14px;
    height: 42px;
    transition: border-color var(--transition-fast);
}

.search-bar:focus-within {
    border-color: var(--color-primary);
}

.search-icon {
    margin-right: 10px;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-family: "Ubuntu", sans-serif;
    color: var(--text-primary);
    outline: none;
}

.search-bar input::placeholder {
    color: var(--text-muted);
}

.search-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 1.1rem;
}

.btn-scan {
    background: var(--color-primary);
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 1.2rem;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

.btn-scan:hover {
    background: var(--color-primary-dark);
    transform: scale(1.05);
}

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

/* Modal Scanner */
.modal-scanner {
    width: 95%;
    max-width: 500px;
}

.modal-scanner .modal-body {
    padding: var(--spacing);
    padding-top: 0;
}

#scannerContainer {
    width: 100%;
    min-height: 350px;
    background: #000;
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Stile per l'area di scansione della libreria */
#scannerContainer video {
    border-radius: var(--border-radius);
}

#scannerContainer #qr-shaded-region {
    border-color: rgba(76, 175, 80, 0.5) !important;
}

.scanner-hint {
    text-align: center;
    color: var(--text-secondary);
    margin-top: var(--spacing);
    font-size: 0.95rem;
    padding: 10px;
    background: #f5f5f5;
    border-radius: var(--border-radius);
}

.scanner-hint::before {
    content: "📷 ";
}

/* Pulsante torcia scanner */
.torch-btn {
    display: block;
    width: 100%;
    margin-top: var(--spacing-sm);
    padding: 12px;
    font-size: 1rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    transition: all 0.2s ease;
}

.torch-btn.active {
    background: #fff3e0;
    border-color: #ff9800;
    color: #e65100;
}

.toolbar-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing);
}

.auto-refresh-control {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.control-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.refresh-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: "Ubuntu", sans-serif;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: var(--transition-fast);
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: var(--transition-fast);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-primary);
}

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

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: "Ubuntu", sans-serif;
    transition: background var(--transition-fast);
}

.toolbar-btn:hover {
    background: var(--color-primary-hover);
}

.toolbar-btn:active {
    transform: scale(0.98);
}

.toolbar-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Search Results Dropdown */
.search-results {
    position: absolute;
    top: calc(var(--toolbar-height) - 4px);
    left: var(--spacing);
    right: var(--spacing);
    max-width: 500px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow: hidden;
    z-index: 200;
    border: 1px solid var(--color-primary);
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px var(--spacing);
    background: var(--color-primary);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-close-search {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.btn-close-search:hover {
    background: rgba(255, 255, 255, 0.3);
}

.search-results-list {
    overflow-y: auto;
    max-height: 340px;
}

.search-result-item {
    padding: 14px var(--spacing);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.search-result-item:hover {
    background: #e8f5e9;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-name {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-primary-dark);
}

.search-result-details {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.search-result-state {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.search-result-state.ready {
    background: #e3f2fd;
    color: #1565c0;
}

.search-result-state.progress {
    background: #e8f5e9;
    color: var(--color-primary-dark);
}

/* --- MAIN CONTENT --- */
.main-content {
    margin-top: calc(var(--header-height) + var(--toolbar-height));
    padding: var(--spacing);
    min-height: calc(100vh - var(--header-height) - var(--toolbar-height));
}

/* --- SECTIONS --- */
.step-section {
    margin-bottom: var(--spacing-lg);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing);
    margin-bottom: var(--spacing);
    padding-bottom: var(--spacing);
    border-bottom: 2px solid var(--color-primary);
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing);
}

.section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.highlight {
    color: var(--color-primary);
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: "Ubuntu", sans-serif;
    transition: all var(--transition-fast);
}

.btn-back:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Filters */
.filters {
    display: flex;
    gap: var(--spacing);
    flex-wrap: wrap;
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.filter-toggle:hover {
    border-color: var(--color-primary);
}

.filter-toggle input {
    cursor: pointer;
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
}

/* Tooltip per filtri */
.filter-toggle[title] {
    position: relative;
}

/* --- TABS --- */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--spacing);
    background: var(--bg-tertiary);
    padding: 6px;
    border-radius: var(--border-radius);
    width: fit-content;
}

.tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Ubuntu", sans-serif;
    transition: all var(--transition-fast);
}

.tab:hover {
    color: var(--text-primary);
}

.tab.active {
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.tab-count {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
}

.tab.active .tab-count {
    background: rgba(255, 255, 255, 0.25);
}

.tab-content {
    min-height: 200px;
}

.active-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing);
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    display: inline-block;
    box-shadow: var(--shadow-sm);
}

.active-info:empty {
    display: none;
}

/* --- KANBAN GRID --- */
.kanban-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--card-min-width), var(--card-max-width))
    );
    gap: var(--spacing);
}

/* Vista compatta */
.compact .kanban-grid {
    --card-min-width: 180px;
    --card-max-width: 220px;
    gap: var(--spacing-sm);
}

.compact .workorder-card {
    min-height: auto;
    padding: var(--spacing-sm);
}

.compact .workorder-card .card-details,
.compact .workorder-card .card-state {
    display: none;
}

.compact .workorder-card .card-name {
    font-size: 0.9rem;
}

/* --- WORKCENTER CARD --- */
.workcenter-card {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 5px solid var(--color-primary);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.workcenter-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.workcenter-card:active {
    transform: scale(0.98);
}

/* Sfondi per tipo operazione */
.workcenter-card.op-estrusione {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-left-color: #4caf50;
}
.workcenter-card.op-estrusione:hover {
    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
}

.workcenter-card.op-saldatura {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-left-color: #ff9800;
}
.workcenter-card.op-saldatura:hover {
    background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
}

.workcenter-card.op-stampa {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left-color: #2196f3;
}
.workcenter-card.op-stampa:hover {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
}

.workcenter-card .card-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-primary-dark);
}

.workcenter-card .card-code {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.workcenter-card .card-counts {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.workcenter-card .count-badge {
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
}

.count-badge.ready {
    background: #e3f2fd;
    color: #1565c0;
}

.count-badge.active {
    background: #e8f5e9;
    color: var(--color-primary-dark);
}

/* Info WO attivo nella card workcenter */
.wc-active-info {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.8rem;
}

.wc-info-row {
    margin-bottom: 3px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc-info-label {
    font-weight: 600;
    color: var(--text-primary);
}

.workcenter-card.has-active {
    min-height: 180px;
}

/* --- WORKORDER CARD --- */
.workorder-card {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 5px solid var(--color-primary);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.workorder-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.workorder-card:active {
    transform: scale(0.98);
}

.workorder-card.active {
    border-left-color: var(--color-success);
    background: linear-gradient(to right, rgba(54, 167, 99, 0.05), transparent);
}

.workorder-card.paused {
    border-left-color: var(--color-warning);
    background: rgba(128, 128, 128, 0.25);
    opacity: 0.6;
    filter: grayscale(40%);
}

.workorder-card.other-workcenter {
    border-left-color: var(--color-warning);
}

.workorder-card .card-header {
    margin-bottom: 10px;
}

.workorder-card .card-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
    color: var(--color-primary-dark);
}

.workorder-card .card-client {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 2px;
}

.workorder-card .card-product {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.workorder-card .card-workcenter {
    font-size: 0.75rem;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 500;
}

.card-workcenter.same {
    background: #e8f5e9;
    color: var(--color-primary-dark);
}

.card-workcenter.different {
    background: #fff3e0;
    color: #e65100;
    font-weight: 600;
}

.workorder-card .card-details {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* card-timer: durata della lavorazione mostrata inline nella riga details
   (al posto della durata prevista). Non piu' badge assoluto in alto a destra
   per evitare la sovrapposizione con .card-state ("IN CORSO"). La classe resta
   .card-timer perche' TimerManager la aggiorna live ogni secondo. */
.workorder-card .card-timer {
    font-weight: 700;
    color: var(--color-primary);
    font-family: "Ubuntu Mono", "SF Mono", Monaco, monospace;
}

.workorder-card .card-state {
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    width: fit-content;
    letter-spacing: 0.5px;
}

.card-state.ready {
    background: #e3f2fd;
    color: #1565c0;
}

.card-state.progress {
    background: #e8f5e9;
    color: var(--color-primary-dark);
}

.card-state.paused {
    background: #fff3e0;
    color: #e65100;
}

/* --- EMPTY & LOADING STATES --- */
.empty-state,
.loading-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px var(--spacing);
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.empty-state .empty-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing);
    opacity: 0.5;
}

.empty-state p {
    font-size: 1.1rem;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    margin: 0 auto var(--spacing);
    animation: spin 1s linear infinite;
}

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

/* --- MODAL --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing);
    backdrop-filter: blur(4px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-large {
    max-width: 650px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing);
    background: var(--color-primary);
    color: white;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.modal-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    font-size: 1.3rem;
    color: white;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    line-height: 1;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.modal-body {
    padding: var(--spacing);
}

.modal-workorder-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--spacing);
    background: var(--bg-tertiary);
    padding: var(--spacing);
    border-radius: var(--border-radius);
}

.info-row {
    display: flex;
    gap: 10px;
}

.info-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    min-width: 130px;
    font-weight: 500;
}

.info-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.info-link {
    color: var(--color-primary);
    text-decoration: none;
}

.info-link:hover {
    text-decoration: underline;
}

/* Pulsanti workcenter nel modale */
.modal-workcenter-buttons {
    padding: 14px;
    background: #f5f5f5;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing);
}

.workcenter-buttons-title {
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.workcenter-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.wc-btn {
    padding: 14px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.wc-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Pulsanti compatibili */
.wc-btn-compatible {
    background: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
}

.wc-btn-compatible:hover:not(:disabled) {
    background: #c8e6c9;
    transform: scale(1.02);
}

.wc-btn-compatible:active:not(:disabled) {
    transform: scale(0.98);
}

/* Pulsanti incompatibili */
.wc-btn-incompatible {
    background: #fff3e0;
    border-color: #ff9800;
    color: #e65100;
}

.wc-btn-incompatible:hover:not(:disabled) {
    background: #ffe0b2;
    transform: scale(1.02);
}

/* Colori per tipo operazione sui pulsanti */
.wc-btn.op-estrusione {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-color: #4caf50;
}

.wc-btn.op-saldatura {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-color: #ff9800;
}

.wc-btn.op-stampa {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-color: #2196f3;
}

.modal-warning {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #fff3e0;
    border: 2px solid var(--color-warning);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing);
}

.warning-icon {
    font-size: 1.4rem;
}

.warning-text {
    font-size: 0.9rem;
    color: #e65100;
    font-weight: 500;
}

.modal-error {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #ffebee;
    border: 2px solid var(--color-danger);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing);
}

.modal-error .warning-text {
    color: #c62828;
}

.modal-notes {
    margin-top: var(--spacing);
    padding: var(--spacing);
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
}

.modal-notes h4 {
    font-size: 0.9rem;
    color: var(--color-primary-dark);
    margin-bottom: 10px;
}

.notes-content {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

.modal-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing);
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

/* --- BUTTONS --- */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    font-family: "Ubuntu", sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex: 1;
    min-width: 100px;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

.btn-success {
    background: var(--color-success);
    color: white;
}

.btn-success:hover {
    background: #2d8a52;
}

.btn-warning {
    background: var(--color-warning);
    color: #212529;
}

.btn-warning:hover {
    background: #e68900;
}

.btn-danger {
    background: var(--color-danger);
    color: white;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-info {
    background: var(--color-info);
    color: white;
}

.btn-info:hover {
    background: #138496;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- TIME TRACKING --- */
.time-tracking {
    margin-top: var(--spacing);
}

.time-tracking h4 {
    font-size: 0.95rem;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
}

.time-tracking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.time-log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 0.85rem;
}

.time-log-date {
    color: var(--text-secondary);
}

.time-log-duration {
    font-weight: 700;
    color: var(--color-primary);
}

/* --- TOAST --- */
.toast-container {
    position: fixed;
    bottom: var(--spacing);
    right: var(--spacing);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 14px 24px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
    max-width: 380px;
    font-size: 0.95rem;
    font-weight: 500;
}

.toast.success {
    background: var(--color-success);
    color: white;
}

.toast.error {
    background: var(--color-danger);
    color: white;
}

.toast.warning {
    background: var(--color-warning);
    color: #212529;
}

.toast.info {
    background: var(--color-info);
    color: white;
}

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

/* --- BADGE OPERAZIONI --- */
.workcenter-type-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.workcenter-type-badge.estrusione {
    background: var(--color-estrusione);
    color: white;
}

.workcenter-type-badge.saldatura {
    background: var(--color-saldatura);
    color: white;
}

.workcenter-type-badge.stampa {
    background: var(--color-stampa);
    color: white;
}

.operation-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.operation-badge.estrusione {
    background: var(--color-estrusione);
    color: white;
}

.operation-badge.saldatura {
    background: var(--color-saldatura);
    color: white;
}

.operation-badge.stampa {
    background: var(--color-stampa);
    color: white;
}

/* Avvio in parallelo: badge "Anticipo" (alto a destra, non collide con
   operation-badge a sinistra) + bordo sinistro ambra sulla card. Segnala un
   WO a valle avviabile con semilavorato ancora parziale. */
.partial-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f59e0b;
    color: #1a1a1a;
    z-index: 2;
}

.workorder-card.startable-partial {
    border-left: 4px solid #f59e0b;
}

/* Card incompatibile */
.workorder-card.incompatible {
    opacity: 0.6;
    border-left-color: var(--color-danger) !important;
    background: repeating-linear-gradient(
        -45deg,
        var(--bg-secondary),
        var(--bg-secondary) 10px,
        rgba(220, 53, 69, 0.06) 10px,
        rgba(220, 53, 69, 0.06) 20px
    ) !important;
}

.workorder-card.incompatible:hover {
    opacity: 0.8;
}

/* --- CACHE INFO (opzionale, per debug) --- */
.cache-info {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: auto;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    :root {
        --card-min-width: 160px;
        --card-max-width: 1fr;
        --spacing: 15px;
    }

    .header h1 {
        font-size: 1.1rem;
    }

    .toolbar {
        flex-wrap: wrap;
        height: auto;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .search-bar {
        flex: 1 1 100%;
        max-width: none;
    }

    .toolbar-controls {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .btn-text {
        display: none;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .filters {
        flex-wrap: wrap;
    }

    .modal {
        margin: var(--spacing-sm);
        max-height: calc(100vh - 32px);
    }

    .modal-actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .tabs {
        width: 100%;
    }

    .tab {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .auto-refresh-control .control-label {
        display: none;
    }

    .header-btn {
        width: 36px;
        height: 36px;
    }

    .connection-status .status-text {
        display: none;
    }
}

/* ===============================================
   === SCHEDE TECNICHE (SPECS) EDITOR ============
   =============================================== */

/* Modal specifico per schede tecniche */
.modal-specs {
    max-width: 900px;
}

.modal-body-scroll {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: var(--spacing);
}

/* Badge modifiche non salvate */
.badge-changes {
    background: var(--color-warning);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
    margin-right: var(--spacing);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Sezione info MO */
.specs-info-section {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
}

/* Layout a righe per info MO */
.specs-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.specs-info-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.specs-info-row-full {
    display: block;
}

.info-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 150px;
}

.info-cell-small {
    flex: 0 0 auto;
    min-width: auto;
}

.info-cell-full {
    width: 100%;
    flex: none;
}

.info-cell-full .info-value,
.info-cell-full .click-to-edit {
    flex: 1;
    font-size: 1.1em;
    font-weight: 600;
}

.info-cell-full .click-to-edit-input {
    flex: 1;
    font-size: 1.1em;
}

.specs-info-section .info-label {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 80px;
}

.specs-info-section .info-value {
    font-weight: 600;
    color: var(--text-primary);
}

.info-uom {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ===============================================
   GALLERIA FOTO PRODOTTO (scroll orizzontale)
   =============================================== */
.photos-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
}

.photos-section h4 {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Messaggio "N foto disponibili" mostrato mentre le miniature caricano;
   nascosto appena le foto compaiono (vedi specs-editor.js). */
.photos-status {
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 4px 0;
}

.photos-gallery {
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
}

.photo-thumb-btn {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-tertiary);
    overflow: hidden;
    cursor: pointer;
}

.photo-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Thumb temporanea durante l'upload (append ottimistico). */
.photo-thumb-pending {
    opacity: 0.6;
    cursor: default;
}

/* Azioni foto: pulsante "+ Foto" (sempre visibile, anche senza foto). */
.photos-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.photos-actions .btn {
    min-height: 44px;
}

/* ===============================================
   LIGHTBOX FOTO (overlay unico riusato)
   =============================================== */
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.photo-lightbox.hidden {
    display: none;
}

.photo-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #222;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

/* Click to edit */
.click-to-edit {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background var(--transition-fast);
    border: 1px dashed transparent;
}

.click-to-edit:hover {
    background: rgba(54, 167, 99, 0.1);
    border-color: var(--color-primary);
}

.click-to-edit.modified {
    background: #fff3cd;
    border-color: var(--color-warning);
}

[data-theme="dark"] .click-to-edit.modified {
    background: rgba(255, 152, 0, 0.2);
}

.click-to-edit-input {
    padding: 4px 8px;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    width: 200px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.click-to-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(54, 167, 99, 0.2);
}

/* State badge */
.state-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.state-badge.draft {
    background: #e9ecef;
    color: #495057;
}
.state-badge.confirmed {
    background: #cce5ff;
    color: #004085;
}
.state-badge.progress {
    background: #d4edda;
    color: #155724;
}
.state-badge.done {
    background: var(--color-primary);
    color: white;
}
.state-badge.cancel {
    background: #f8d7da;
    color: #721c24;
}

/* Sezioni specs e BOM */
.specs-section,
.bom-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
}

.specs-section h4,
.bom-section h4 {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tabelle */
.specs-table,
.bom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.specs-table th,
.specs-table td,
.bom-table th,
.bom-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.specs-table th,
.bom-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.specs-table tbody tr:hover,
.bom-table tbody tr:hover {
    background: rgba(54, 167, 99, 0.05);
}

/* Colonne azioni */
.col-actions {
    width: 60px;
    text-align: center;
}

.col-qty {
    width: 120px;
}

/* Input nelle tabelle */
.specs-table input,
.specs-table select,
.specs-table textarea,
.bom-table input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.specs-table textarea {
    min-height: 40px;
    resize: vertical;
    line-height: 1.4;
}

.specs-table input:focus,
.specs-table select:focus,
.specs-table textarea:focus,
.bom-table input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(54, 167, 99, 0.15);
}

/* Righe modificate/nuove/eliminate */
.specs-table tr.modified,
.bom-table tr.modified {
    background: #fff3cd !important;
}

.specs-table tr.new-row,
.bom-table tr.new-row {
    background: #d4edda !important;
}

.specs-table tr.deleted-row,
.bom-table tr.deleted-row {
    background: #f8d7da !important;
    text-decoration: line-through;
    opacity: 0.7;
}

[data-theme="dark"] .specs-table tr.modified,
[data-theme="dark"] .bom-table tr.modified {
    background: rgba(255, 152, 0, 0.15) !important;
}

[data-theme="dark"] .specs-table tr.new-row,
[data-theme="dark"] .bom-table tr.new-row {
    background: rgba(54, 167, 99, 0.15) !important;
}

[data-theme="dark"] .specs-table tr.deleted-row,
[data-theme="dark"] .bom-table tr.deleted-row {
    background: rgba(220, 53, 69, 0.15) !important;
}

/* Bottoni nelle tabelle */
.btn-delete {
    background: none;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    transition: background var(--transition-fast);
}

.btn-delete:hover {
    background: rgba(220, 53, 69, 0.1);
}

.btn-delete:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Azioni sotto le tabelle */
.specs-actions {
    margin-top: var(--spacing-sm);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-outline {
    background: transparent;
    border: 1px dashed var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background: rgba(54, 167, 99, 0.1);
    border-style: solid;
}

/* Totale BOM */
.bom-total-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    font-weight: 600;
    border-top: 2px solid var(--border-color);
    margin-top: var(--spacing-sm);
}

.bom-total-value {
    font-size: 1.1rem;
    padding: 4px 12px;
    border-radius: 4px;
}

.bom-total-value.valid {
    background: #d4edda;
    color: #155724;
}

.bom-total-value.invalid {
    background: #f8d7da;
    color: #721c24;
}

/* Ricerca prodotti dropdown */
.product-search-container {
    position: relative;
}

.product-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: var(--shadow-md);
    display: none;
}

.product-search-results.active {
    display: block;
}

.product-search-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.product-search-item:last-child {
    border-bottom: none;
}

.product-search-item:hover {
    background: rgba(54, 167, 99, 0.1);
}

.product-search-loading {
    padding: 10px 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* Responsive schede tecniche */
@media (max-width: 768px) {
    .modal-specs {
        margin: var(--spacing-sm);
    }

    .specs-info-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .info-cell {
        min-width: 100%;
    }

    .specs-table,
    .bom-table {
        font-size: 0.8rem;
    }

    .specs-table th,
    .specs-table td,
    .bom-table th,
    .bom-table td {
        padding: 8px;
    }

    .col-actions {
        width: 40px;
    }
}

/* Stile default (Piduemme) - Mobile specs layout */
@media (max-width: 600px) {
    .modal-specs {
        margin: 0;
        max-height: 100vh;
        height: 100%;
        max-width: 100%;
    }

    .specs-table,
    .bom-table {
        display: block;
    }

    .specs-table thead,
    .bom-table thead {
        display: none;
    }

    .specs-table tbody,
    .bom-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .specs-table tr,
    .bom-table tr {
        display: flex;
        flex-direction: column;
        background: var(--bg-tertiary);
        padding: 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        position: relative;
    }

    .specs-table td,
    .bom-table td {
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        border: none;
        width: 100% !important;
    }

    /* Label sopra ogni campo */
    .specs-table td::before,
    .bom-table td::before {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

    /* Labels per specifiche tecniche */
    .specs-table td:nth-child(1)::before { content: "Tipo Macchina"; }
    .specs-table td:nth-child(2)::before { content: "Chiave"; }
    .specs-table td:nth-child(3)::before { content: "Valore"; }

    /* Labels per BOM */
    .bom-table td:nth-child(1)::before { content: "Prodotto"; }
    .bom-table td:nth-child(2)::before { content: "Quantità %"; }

    /* Colonna azioni - posiziona in alto a destra */
    .specs-table td.col-actions,
    .bom-table td.col-actions,
    .specs-table td:last-child,
    .bom-table td:last-child {
        position: absolute;
        top: 8px;
        right: 8px;
        width: auto !important;
        padding: 0;
    }

    .specs-table td:last-child::before,
    .bom-table td:last-child::before {
        content: none;
    }

    /* Input più grandi per touch */
    .specs-table input,
    .specs-table select,
    .bom-table input {
        padding: 12px;
        font-size: 1rem;
    }

    /* Campo valore - textarea multilinea */
    .specs-table td:nth-child(3) textarea {
        width: 100%;
        min-height: 60px;
        padding: 10px;
        font-size: 1rem;
        font-family: 'Ubuntu', sans-serif;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        resize: vertical;
        line-height: 1.4;
    }

    .specs-table td:nth-child(3) {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* Campo CHIAVE - permetti multi-linea se necessario */
    .specs-table td:nth-child(2) {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        line-height: 1.4;
    }

    .specs-table td:nth-child(2) select,
    .specs-table td:nth-child(2) span,
    .specs-table td:nth-child(2) div {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Info section */
    .specs-info-section {
        padding: 16px;
        margin-bottom: 16px;
    }

    .specs-info-row {
        flex-direction: column;
        gap: 12px;
    }

    .info-cell {
        min-width: 100%;
    }
}

/* ===============================================
   === WEIGHT MODAL STYLES =======================
   =============================================== */

/* Blocca scroll body quando modale aperto (fix iOS) */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

.modal-weight {
    max-width: 500px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-weight .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-weight .weight-history {
    flex: 1;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-weight .weight-list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Intestazione contestuale e colonna destra: ESISTONO solo nel layout a 2
   colonne (>=1024px). Su mobile/tablet sono nascosti e i loro dati restano
   nel box .weight-info in alto (layout invariato). */
.weight-header-info { display: none; }
.weight-target-r { display: none; }

/* Desktop/PC (>=1024px): modale largo (95% con tetto 1200px) e layout a 2
   colonne. A SINISTRA il form; nell'INTESTAZIONE il contesto (WO/Cliente/
   Prodotto); a DESTRA già/mancano -> barra -> elenco pesate. Sotto 1024px
   (tablet di produzione) resta la colonna singola touch invariata. */
@media (min-width: 1024px) {
    .modal-weight {
        max-width: 1200px;
        width: 95%;
    }

    /* Intestazione contestuale al posto del titolo generico. I colori
       EREDITANO dall'header (.modal-header imposta color per tema: bianco
       nel tema base, scuro in paper-factory) -> sempre leggibile. */
    .modal-weight .modal-header { align-items: flex-start; }
    .modal-weight .modal-title { display: none; }
    .modal-weight .weight-header-info {
        display: block;
        min-width: 0;
        color: inherit;
        line-height: 1.3;
        overflow: hidden;
    }
    /* Riga 1 (grande): Cliente · Prodotto sulla stessa riga. */
    .weight-header-main {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.25;
    }
    .weight-header-partner { white-space: nowrap; }
    .weight-header-product::before {
        content: "·";
        margin: 0 8px;
        font-weight: 400;
        opacity: 0.5;
    }
    /* Riga 2 (piccola): WO - operazione. */
    .weight-header-wo {
        display: block;
        margin-top: 3px;
        font-size: 0.8rem;
        font-weight: 400;
        opacity: 0.7;
        color: inherit;
        text-decoration: none;
    }
    .weight-header-wo:hover { text-decoration: underline; }

    /* Griglia a 2 celle pulite: form-col (sx) | weight-col-right (dx).
       Avvolgere la colonna destra in UN contenitore evita lo sfalsamento
       (altrimenti gli item dx ereditano le righe alte della colonna sx). */
    .modal-weight .modal-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 28px;
        align-items: start;
    }

    .modal-weight .weight-form-col,
    .modal-weight .weight-col-right {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    /* Colonna sinistra: solo i campi del form. Il box .weight-info
       (WO/Cliente/Prodotto + già/mancano) e' nascosto qui: quei dati vivono
       nell'header e nella colonna destra. */
    .modal-weight .weight-info { display: none; }

    /* Colonna destra: già/mancano -> barra -> pesate. */
    .modal-weight .weight-target-r {
        display: block;
        background: var(--bg-tertiary);
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 16px;
    }
    .modal-weight .weight-target-r .info-row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid var(--border-color);
    }
    .modal-weight .weight-target-r .info-row:last-child { border-bottom: none; }

    .modal-weight .weight-history {
        flex: 1;
        margin-top: 0;
        min-height: 0;
        max-height: calc(85vh - 240px);
    }
}

.weight-info {
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.weight-info .info-link {
    color: var(--color-primary);
    text-decoration: none;
}

.weight-info .info-link:hover {
    text-decoration: underline;
}

.weight-info .info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.weight-info .info-row:last-child {
    border-bottom: none;
}

.weight-input-section {
    margin: 20px 0;
}

.weight-input-section label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 1.1em;
}

.weight-input {
    width: 100%;
    padding: 16px 20px;
    font-size: 1.5em;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

.weight-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(54, 167, 99, 0.2);
}

.scale-status {
    font-size: 0.8em;
    font-weight: 400;
    margin-left: 8px;
}

.scale-clickable {
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(54, 167, 99, 0.1);
    border: 1px solid rgba(54, 167, 99, 0.3);
    -webkit-tap-highlight-color: rgba(54, 167, 99, 0.2);
}

.scale-clickable:active {
    background: rgba(54, 167, 99, 0.25);
}

.scale-clickable.scale-unstable {
    background: rgba(230, 126, 34, 0.1);
    border-color: rgba(230, 126, 34, 0.3);
    -webkit-tap-highlight-color: rgba(230, 126, 34, 0.2);
}

.scale-clickable.scale-unstable:active {
    background: rgba(230, 126, 34, 0.25);
}

.scale-connected {
    color: var(--color-primary, #36a763);
}

.scale-unstable {
    color: #e67e22;
}

.scale-disconnected {
    color: #999;
}

/* ============= TARE SECTION ============= */

.tare-section {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
}

/* Conteggi bancale (saldatura): n. sacchetti / n. colli */
.counting-section {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.counting-row {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.counting-row label {
    font-weight: 500;
    font-size: 0.95rem;
}
.counting-required {
    color: var(--danger, #c0392b);
    font-size: 0.8rem;
    font-weight: 600;
}
.counting-input {
    min-height: 48px;
    font-size: 1.3rem;
    padding: 8px 12px;
    border: 2px solid var(--border-color, #ccc);
    border-radius: 8px;
    text-align: center;
}
.counting-input:focus {
    border-color: var(--accent, #C75B39);
    outline: none;
}
.weight-counts {
    color: var(--text-secondary, #777);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Note bancale: sezione richiudibile + editor contenteditable nel modale
   pesata. Target touch >= 44px (guanti). */
.pack-note-section {
    margin: 16px 0;
}
.pack-note-toggle {
    min-height: 44px;
}
.pack-note-wrap {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
}
.pack-note-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.pack-note-tool {
    min-width: 48px;
    min-height: 44px;
    font-size: 1.1rem;
    border: 2px solid var(--border-color, #ccc);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    cursor: pointer;
}
.pack-note-tool:active {
    background: var(--bg-secondary, #eee);
}
.pack-note-editor {
    min-height: 90px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-primary, #fff);
    border: 2px solid var(--border-color, #ccc);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 1rem;
}
.pack-note-editor:focus {
    border-color: var(--accent, #C75B39);
    outline: none;
}
.pack-note-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-secondary, #999);
    pointer-events: none;
}
.pack-note-editor table {
    border-collapse: collapse;
    margin: 6px 0;
}
.pack-note-counter {
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-secondary, #777);
    min-height: 1em;
    margin-top: 4px;
}

.tare-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
    text-align: center;
}

.tare-dashboard-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tare-dashboard-label {
    font-size: 0.8em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tare-dashboard-value {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-primary);
}

.tare-value-secondary {
    color: var(--text-secondary);
}

.tare-value-netto {
    font-size: 1.6em;
    color: var(--color-primary, #36a763);
}

.tare-dashboard-netto {
    background: rgba(54, 167, 99, 0.08);
    border-radius: 8px;
    padding: 8px 4px;
}

.tare-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tare-pill {
    flex: 1;
    min-width: 80px;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.tare-pill:active {
    transform: scale(0.97);
}

.tare-pill-label {
    font-size: 0.7em;
    font-weight: 400;
    color: var(--text-muted);
}

.tare-pill-active {
    border-color: var(--color-primary, #36a763);
    background: rgba(54, 167, 99, 0.12);
    color: var(--color-primary, #36a763);
}

.tare-pill-altro {
    background: transparent;
    border-style: dashed;
    font-size: 0.9em;
    font-weight: 400;
    color: var(--text-secondary);
}

.tare-custom {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
}

.tare-custom-input {
    flex: 1;
    padding: 12px 16px;
    font-size: 1.1em;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
}

.tare-custom-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(54, 167, 99, 0.2);
}

.tare-info {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(54, 167, 99, 0.08);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9em;
    text-align: center;
}

/* ============= END TARE SECTION ============= */

.weight-history {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.weight-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.weight-history h4 {
    margin: 0;
    color: var(--text-secondary);
}

.weight-pickings-link {
    font-size: 0.85em;
    color: var(--color-primary);
    text-decoration: none;
}

.weight-pickings-link:hover {
    text-decoration: underline;
}

.weight-list {
    max-height: 200px;
    overflow-y: auto;
}

.weight-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Skeleton loader per lista pesate durante fetch (v18.0.1.10.3).
   Effetto: utente vede subito "qualcosa" (3 righe placeholder
   animate) invece di "Caricamento..." statico.
   Time-to-first-paint < 200ms anche con backend a 1-2s. */
.weight-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.skeleton-row {
    height: 44px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--bg-tertiary) 0%,
        var(--bg-secondary) 50%,
        var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.weight-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 8px;
    gap: 10px;
}

.weight-item:last-child {
    margin-bottom: 0;
}

.weight-picking-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.85em;
}

.weight-picking-link:hover {
    text-decoration: underline;
}

.weight-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.weight-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 1.3em;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s, background 0.2s;
    border-radius: 6px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.weight-action-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.weight-action-btn:active {
    transform: scale(0.95);
}

.weight-print-btn:hover {
    background: rgba(54, 167, 99, 0.15);
}

.weight-print-zebra-btn:hover {
    background: rgba(59, 130, 246, 0.15);
}

.weight-delete-btn:hover {
    background: rgba(220, 53, 69, 0.1);
}

.weight-item.weight-pending {
    opacity: 0.6;
    pointer-events: none;
    font-style: italic;
}

/* Coda offline: pesata in attesa di sync (⏳). Non e' ancora su Odoo -> niente
   bottoni stampa/delete. Bordo ambra per distinguerla dalle pesate reali. */
.weight-item.weight-queued {
    border-left: 4px solid var(--color-warning, #f59e0b);
    background: var(--bg-tertiary);
}

/* Voce che richiede intervento (rifiuto di business al sync): bordo rosso. */
.weight-item.weight-queued.weight-rejected {
    border-left-color: var(--color-danger, #dc3545);
}

.weight-queue-badge {
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

.weight-queue-waiting {
    color: #92600a;
    background: rgba(245, 158, 11, 0.15);
}

.weight-queue-rejected {
    color: #a01824;
    background: rgba(220, 53, 69, 0.15);
}

/* Messaggio esplicito su una voce rifiutata al sync (per codice). */
.weight-reject-msg {
    display: block;
    width: 100%;
    font-size: 0.85em;
    color: var(--color-danger, #dc3545);
    margin-top: 4px;
}

/* Azioni sulla voce rifiutata: Conferma/Riprova + Scarta. Touch >= 44px. */
.weight-reject-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}

.weight-reject-actions .weight-action-btn {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 0.9em;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
}

.weight-reject-confirm-btn,
.weight-reject-retry-btn {
    background: var(--color-warning, #f59e0b);
    color: #fff;
}

.weight-reject-discard-btn {
    background: var(--bg-tertiary, #eee);
    color: var(--color-danger, #dc3545);
    border-color: var(--color-danger, #dc3545);
}

/* Inciso "(+N in attesa)" accanto al totale prodotto: chiarisce che i numeri di
   testata (dal server) non includono le pesate ancora in coda. */
.weight-pending-hint {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--color-warning, #b45309);
    margin-left: 6px;
    white-space: nowrap;
}

/* Banner PERSISTENTE coda offline (cap anti-accumulo). Fixed in cima: sopra
   tutto, non sposta il layout. Touch-friendly, coerente col tema. */
.offline-queue-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4000;
    padding: 14px 20px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    text-align: center;
    font-size: 1em;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* SOFT: coda non vuota ma sotto soglia -> informativo (nessun allarme). */
.offline-queue-banner.offline-banner-soft {
    background: var(--color-info, #17a2b8);
}

/* FORTE: oltre soglia (>10 voci o >15 min) -> allarme, chiama in causa l'ufficio. */
.offline-queue-banner.offline-banner-strong {
    background: var(--color-danger, #dc3545);
}

/* Pulsante "Prova riconnessione": target touch >= 44px (uso con guanti). */
.offline-banner-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 18px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.95em;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.offline-banner-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

.offline-banner-btn:active {
    transform: scale(0.97);
}

.offline-queue-banner.hidden {
    display: none;
}

.weight-item-lot {
    font-weight: 500;
    font-family: monospace;
}

.weight-item-value {
    font-weight: 600;
    color: var(--color-primary);
}

.weight-item-status {
    font-size: 0.85em;
    color: var(--text-muted);
}

.weight-item-status.done {
    color: var(--color-success);
}

.weight-item-status.assigned {
    color: var(--color-info);
}

.weight-total {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: var(--color-primary);
    color: white;
    border-radius: 6px;
    margin-top: 12px;
    font-weight: 600;
}

/* Button per pesata nella card */
.btn-weight {
    background: var(--color-info);
    color: white;
}

.btn-weight:hover {
    background: #138496;
}

/* ===============================================
   MODAL STAMPA ETICHETTA
   =============================================== */

.modal-print-label {
    max-width: 400px;
    width: 90%;
}

.print-label-info {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
    color: var(--text-primary);
}

.print-copies-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.btn-copy {
    width: 60px;
    height: 60px;
    font-size: 1.5em;
    font-weight: 600;
    border-radius: 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-copy:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: scale(1.05);
}

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

.btn-copy-n {
    background: var(--bg-secondary);
    font-style: italic;
}

.print-custom-input {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.print-custom-input input {
    width: 100px;
    padding: 10px;
    font-size: 1.2em;
    text-align: center;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.print-custom-input input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.print-custom-input .btn {
    padding: 10px 20px;
}

.print-iot-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    margin-top: 12px;
    font-size: 1.1rem;
    color: var(--text-color, #333);
}

.print-iot-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--accent-color, #007bff);
    border-radius: 50%;
    animation: iot-spin 0.8s linear infinite;
}

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

.print-copies-buttons.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ===============================================
   === MOBILE RESPONSIVE (< 768px) ==============
   =============================================== */

/* --- Utility classes --- */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: flex !important;
    }

    .mobile-only.hidden {
        display: none !important;
    }

    .desktop-only {
        display: none !important;
    }

    /* --- Hide desktop-only controls on mobile --- */
    .theme-selector,
    #btnToggleTheme,
    #btnFullscreen,
    .filters,
    .toolbar-controls {
        display: none !important;
    }

    /* --- Body padding for dock footer --- */
    body {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }

    /* --- Header: keep fixed but compact --- */
    .header {
        padding: 0 12px;
    }

    .header-logo {
        height: 28px;
    }

    .connection-status {
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    .connection-status .status-text {
        display: none;
    }

    /* --- Toolbar: sticky instead of fixed, simplified --- */
    .toolbar {
        position: sticky;
        top: var(--header-height);
        height: auto;
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .search-bar {
        flex: 1;
        max-width: none;
        height: 38px;
    }

    .main-content {
        padding: 12px;
    }

    /* --- Kanban grid: single column --- */
    .kanban-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    /* --- Workcenter cards: horizontal compact --- */
    .workcenter-card {
        min-height: 80px;
        padding: 12px 14px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .workcenter-card .card-name {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .workcenter-card .card-counts {
        margin-top: 0;
        margin-left: auto;
    }

    .workcenter-card .wc-active-info {
        display: none;
    }

    .workcenter-card.has-active {
        min-height: 80px;
    }

    /* --- Workorder cards: compact --- */
    .workorder-card {
        min-height: 100px;
        padding: 12px 14px;
    }

    /* --- Section header: stack vertically --- */
    .section-header {
        gap: 8px;
    }

    .section-title {
        font-size: 1.1rem;
    }

    /* --- Tabs: full width --- */
    .tabs {
        width: 100%;
    }

    .tab {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 0.9rem;
    }

    /* --- Modals: bottom sheet style --- */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal {
        max-width: 100%;
        max-height: 92vh;
        margin: 0;
        border-radius: 16px 16px 0 0;
        animation: slideUp 0.3s ease;
    }

    .modal-header {
        border-radius: 16px 16px 0 0;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-actions {
        flex-direction: column;
        padding-bottom: calc(var(--spacing) + env(safe-area-inset-bottom, 0px));
    }

    /* --- Weight modal mobile tweaks --- */
    .modal-weight {
        max-height: 92vh;
        width: 100%;
    }

    /* --- Print label modal mobile --- */
    .modal-print-label {
        max-width: 100%;
        width: 100%;
    }

    /* --- Search results dropdown mobile --- */
    .search-results {
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
    }

    /* --- Toast: bottom center above dock --- */
    .toast-container {
        bottom: calc(130px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        left: 12px;
    }

    .toast {
        max-width: none;
    }
}

/* --- Pull-to-refresh indicator --- */
.pull-indicator {
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: height 0.15s ease;
    position: sticky;
    top: calc(var(--header-height) + var(--toolbar-height));
    z-index: 50;
    background: var(--bg-primary);
}

.pull-indicator.show {
    height: 28px;
}

.pull-indicator.ready {
    color: var(--color-primary);
    font-weight: 700;
}

/* --- Bottom Sheet --- */
.bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.bottom-sheet {
    background: var(--bg-secondary);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.bottom-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin: 10px auto 0;
}

.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

.bottom-sheet-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.bottom-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.bottom-sheet-wc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-left: 4px solid transparent;
}

.bottom-sheet-wc-item:active {
    background: var(--bg-tertiary);
}

.bottom-sheet-wc-item.selected {
    background: rgba(54, 167, 99, 0.08);
    border-left-color: var(--color-primary);
}

.bottom-sheet-wc-item .wc-item-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.bottom-sheet-wc-item .wc-item-count {
    margin-left: auto;
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    background: #e8f5e9;
    color: var(--color-primary-dark);
}

/* --- Dock Footer --- */
.dock {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: min(740px, calc(100vw - 16px));
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 60;
}

[data-theme="dark"] .dock {
    background: rgba(26, 26, 46, 0.97);
}

.dock-btn {
    border: none;
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: "Ubuntu", sans-serif;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dock-btn:active {
    opacity: 0.85;
}

.dock-btn-wc {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.85rem;
}

.dock-btn-wc .dock-wc-arrow {
    font-size: 0.7rem;
    opacity: 0.6;
}

.dock-btn-start {
    background: var(--color-primary);
}

.dock-btn-start:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===============================================
   MATERIALS SECTION (consumo lotti SL)
   =============================================== */

.materials-section {
    padding: 16px 0;
    margin-top: 16px;
    border-top: 1px solid var(--border-color);
}

.materials-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.materials-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.materials-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.materials-scan-btn {
    min-height: 44px;
    flex-shrink: 0;
}

.materials-list {
    max-height: 320px;
    overflow-y: auto;
}

.materials-empty,
.materials-error {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 16px;
}

.materials-error {
    color: var(--color-danger, #c0392b);
}

.materials-pending {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-style: italic;
    opacity: 0.8;
}

.materials-subsection {
    margin-bottom: 12px;
}

.materials-subsection h5 {
    margin: 8px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.materials-components {
    list-style: none;
    padding: 0;
    margin: 0;
}

.materials-components li {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.9rem;
}

.materials-components li:last-child {
    border-bottom: none;
}

.component-name {
    color: var(--text-primary);
    flex: 1;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.component-qty {
    color: var(--text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.materials-consumed {
    list-style: none;
    padding: 0;
    margin: 0;
}

.materials-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 8px;
    gap: 10px;
    flex-wrap: wrap;
}

.materials-item-extra {
    border-left: 3px solid var(--color-warning, #f39c12);
}

.materials-item:last-child {
    margin-bottom: 0;
}

.materials-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.materials-item-lot {
    font-weight: 600;
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.95rem;
}

.materials-item-product {
    color: var(--text-muted);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.materials-item-qty {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

.materials-item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.materials-item-actions .btn {
    min-height: 44px;
}

.materials-badge-extra {
    display: inline-block;
    background: var(--color-warning, #f39c12);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

.materials-badge-leftover {
    display: inline-flex;
    align-items: center;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    min-height: 44px;
}

/* =============================================== */
/* === Flusso bobine (v18.0.1.12.0) ============= */
/* =============================================== */
/* Tasto pesata "grigio" quando manca la dichiarazione bobina (B1):
   resta cliccabile per mostrare la modale esplicativa. */
.btn-gated {
    opacity: 0.45;
    filter: grayscale(0.8);
}

.bobina-current {
    border-left: 3px solid var(--color-success, #27ae60);
    background: rgba(39, 174, 96, 0.07);
}

.bobina-badge-current {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.72em;
    font-weight: 700;
    border-radius: 10px;
    background: var(--color-success, #27ae60);
    color: #fff;
    vertical-align: middle;
}

.bobina-state {
    font-size: 0.85em;
    opacity: 0.65;
}

.materials-warning {
    padding: 8px 10px;
    margin-bottom: 8px;
    border-left: 3px solid var(--color-warning, #f39c12);
    background: rgba(243, 156, 18, 0.1);
    font-size: 0.9em;
}

/* ====== Lock operatore (PIN) — v18.0.1.21.0 ====== */
.operator-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000; /* sopra modali e toast */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 28, 38, 0.97);
    backdrop-filter: blur(4px);
}
.operator-lock-overlay.hidden { display: none; }

.operator-lock-box {
    width: min(92vw, 360px);
    padding: 28px 24px 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
    text-align: center;
}
.operator-lock-logo { max-width: 150px; height: auto; margin-bottom: 12px; }
.operator-lock-title {
    margin: 0 0 18px;
    font-size: 1.2rem;
    color: #1a2433;
}
.operator-pin-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    min-height: 20px; /* PIN a lunghezza variabile: i pallini sono dinamici */
    margin-bottom: 10px;
}
.operator-pin-display .pin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #9aa7b5;
    background: transparent;
    transition: background 0.1s, border-color 0.1s;
}
.operator-pin-display .pin-dot.filled {
    background: #2d7ff9;
    border-color: #2d7ff9;
}
.operator-pin-error {
    min-height: 20px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #d64545;
}
.operator-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.operator-keypad .keypad-btn {
    min-height: 64px; /* target touch ampio (guanti) */
    font-size: 1.6rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    background: #eef2f7;
    color: #1a2433;
    cursor: pointer;
    user-select: none;
}
.operator-keypad .keypad-btn:active { background: #dde6f0; }
.operator-keypad .keypad-ok {
    background: #2d7ff9;
    color: #fff;
}
.operator-keypad .keypad-ok:disabled {
    background: #b9c6d6;
    color: #eef2f7;
    cursor: not-allowed;
}
.operator-keypad .keypad-clear { background: #f1e2e2; color: #a23b3b; }

/* Indicatore operatore loggato (header) */
.header-btn.operator-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0 12px;
    font-size: 0.95rem;
    white-space: nowrap;
}
.header-btn.operator-indicator.hidden { display: none; }
.header-btn.operator-indicator .operator-name { font-weight: 600; }