/* PLC Visualization Specific Styles */
.plc-vis-wrapper {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    background-color: #f5f7fa;
    color: #333;
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Header styles */
.plc-vis-header {
    margin-bottom: 2rem;
}

.plc-vis-title {
    color: #1976D2;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

label {
    text-shadow: 0 0 9px #ffffff;
}

.plc-vis-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.plc-vis-legend {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.plc-vis-legend-item {
    display: flex;
    align-items: center;
    margin-right: 1.5rem;
}

.plc-vis-input-indicator, .plc-vis-output-indicator {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.plc-vis-input-indicator {
    background-color: #4CAF50;
}

.plc-vis-output-indicator {
    background-color: #F44336;
}

.plc-vis-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.plc-vis-search-box {
    position: relative;
}

    .plc-vis-search-box i {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #666;
    }

    .plc-vis-search-box input {
        padding: 0.6rem 0.75rem 0.6rem 2.25rem;
        border: 1px solid #ddd;
        border-radius: 0.25rem;
        width: 250px;
        font-size: 0.9rem;
    }

.plc-vis-select-container select {
    padding: 0.6rem 1rem;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    background-color: white;
    min-width: 180px;
    font-size: 0.9rem;
}

/* Loading state */
.plc-vis-loading, .plc-vis-error-container, .plc-vis-empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16rem;
}

.plc-vis-loading-content, .plc-vis-error-content, .plc-vis-empty-content {
    text-align: center;
    padding: 1.5rem;
}

    .plc-vis-loading-content i, .plc-vis-error-content i, .plc-vis-empty-content i {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .plc-vis-loading-content i {
        color: #1976D2;
    }

    .plc-vis-error-content i {
        color: #F44336;
    }

    .plc-vis-empty-content i {
        color: #9e9e9e;
    }

.plc-vis-button {
    background-color: #1976D2;
    color: white;
    border: none;
    border-radius: 0.25rem;
    padding: 0.6rem 1rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .plc-vis-button:hover {
        background-color: #1565C0;
    }

/* PLC visualization components */
.plc-vis-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.plc-vis-plc-group {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.plc-vis-plc-header {
    background-color: #1976D2;
    color: white;
    padding: 1rem;
}

.plc-vis-plc-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
}

.plc-vis-rec-container {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.plc-vis-rec-group {
    border: 1px solid #e0e0e0;
    border-radius: 0.25rem;
}

.plc-vis-rec-header {
    background-color: #f0f4f8;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.plc-vis-rec-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #424242;
    margin: 0;
}

.plc-vis-card-container {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    align-items: start;
}

.plc-vis-card-group {
    border: 1px solid #e0e0e0;
    border-radius: 0.25rem;
}

.plc-vis-card-header {
    background-color: #f5f5f5;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e0e0e0;
}

.plc-vis-card-title {
    font-size: 1rem;
    font-weight: 500;
    color: #616161;
    margin: 0;
}

.plc-vis-signals-container {
    padding: 0.75rem;
    height: auto;
    min-height: 50px;
    max-height: 400px;
    overflow-y: auto;
}

.plc-vis-signals-io-container {
    display: flex;
    min-height: 200px;
}

.plc-vis-signals-inputs, .plc-vis-signals-outputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem;
}

.plc-vis-card-representation {
    width: 20px;
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.plc-vis-card-line {
    width: 4px;
    background-color: #9e9e9e;
    height: 100%;
    border-radius: 2px;
}

.plc-vis-signal-item {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    border-radius: 0.25rem;
    padding: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .plc-vis-signal-item:hover {
        background-color: #f0f0f0;
    }

.plc-vis-signals-inputs .plc-vis-signal-item {
    justify-content: flex-start;
    border-left: 4px solid #4CAF50;
}

.plc-vis-signals-outputs .plc-vis-signal-item {
    justify-content: flex-end;
    border-right: 4px solid #F44336;
}

.plc-vis-signal-position {
    background-color: #e0e0e0;
    color: #424242;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    min-width: 2rem;
    text-align: center;
}

.plc-vis-signals-inputs .plc-vis-signal-name {
    margin-left: 0.5rem;
    text-align: left;
}

.plc-vis-signals-outputs .plc-vis-signal-name {
    margin-right: 0.5rem;
    text-align: right;
}

/* Responsive Design */
@media (max-width: 768px) {
    .plc-vis-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .plc-vis-filters {
        margin-top: 1rem;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .plc-vis-search-box input, .plc-vis-select-container select {
        width: 100%;
    }

    .plc-vis-card-container {
        grid-template-columns: 1fr;
    }
}

.tool-icon {
    display: inline-block;
    width: 55px;
    height: 40px;
    position: relative;
    cursor: pointer;
}

    .tool-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }

    .tool-icon:hover::before {
        opacity: 1;
    }


.btn-tool {
    padding: 0;
}


/* Stile base comune per tutte le icone - dimensioni aumentate */
[class^="icon-"]::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
    vertical-align: middle;
}

/* Icone con colori distintivi per una migliore intuizione */
.icon-line::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/></svg>');
}

.icon-silo::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="12" height="16" rx="2"/><path d="M6 12q6 6 12 0" fill="gray"/></svg>');
}

.icon-spy::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red" stroke="red" stroke-width="2"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>');
}

.icon-container::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="blue" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>');
}

.icon-image::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="purple" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 3l9 9 3-3 6 6"/></svg>');
}

.icon-label::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><text x="2" y="16" font-size="12" fill="black">Abc</text></svg>');
}

.icon-light-view::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2"/> <line x1="5" y1="7" x2="15" y2="7"/> <line x1="5" y1="12" x2="15" y2="12"/> <line x1="5" y1="17" x2="15" y2="17"/> <rect x="17" y="6" width="4" height="4" fill="red"/> <rect x="17" y="11" width="4" height="4" fill="red"/> <rect x="17" y="16" width="4" height="4" fill="red"/> </svg>');
}

.icon-button::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" viewBox="0 0 100 50"><rect x="10" y="10" width="80" height="30" rx="10" fill="%236b778c"/><text x="50" y="30" font-size="12" text-anchor="middle" alignment-baseline="middle" fill="white">Button</text></svg>');
}

.icon-link::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none"><path d="M15.7281 3.88396C17.1624 2.44407 19.2604 2.41383 20.4219 3.57981C21.5856 4.74798 21.5542 6.85922 20.1189 8.30009L17.6951 10.7333C17.4028 11.0268 17.4037 11.5017 17.6971 11.794C17.9906 12.0863 18.4655 12.0854 18.7578 11.7919L21.1816 9.35869C23.0929 7.43998 23.3329 4.37665 21.4846 2.5212C19.6342 0.663551 16.5776 0.905664 14.6653 2.82536L9.81768 7.69182C7.90639 9.61053 7.66643 12.6739 9.5147 14.5293C9.80702 14.8228 10.2819 14.8237 10.5754 14.5314C10.8688 14.2391 10.8697 13.7642 10.5774 13.4707C9.41376 12.3026 9.4451 10.1913 10.8804 8.75042L15.7281 3.88396Z" fill="%231C274C"/><path opacity="0.5" d="M14.4846 9.4707C14.1923 9.17724 13.7174 9.17632 13.4239 9.46864C13.1305 9.76097 13.1296 10.2358 13.4219 10.5293C14.5856 11.6975 14.5542 13.8087 13.1189 15.2496L8.27129 20.1161C6.83696 21.556 4.73889 21.5862 3.57742 20.4202C2.41376 19.2521 2.4451 17.1408 3.8804 15.6999L6.30424 13.2666C6.59657 12.9732 6.59565 12.4983 6.30219 12.206C6.00873 11.9137 5.53386 11.9146 5.24153 12.208L2.81769 14.6413C0.906387 16.56 0.666428 19.6234 2.5147 21.4788C4.36518 23.3365 7.42173 23.0944 9.334 21.1747L14.1816 16.3082C16.0929 14.3895 16.3329 11.3262 14.4846 9.4707Z" fill="%231C274C"/></svg>');
}

/* Icona Input: rappresenta un segnale (numero intero) che arriva dall'esterno con numero visibile */
.icon-input::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="brown" stroke-width="1.5"><rect x="2" y="7" width="14" height="10" rx="2" stroke="brown" fill="white"/><text x="6" y="15" font-size="8" font-weight="bold" fill="brown">42</text><path d="M16,12 L22,12" stroke="brown" stroke-width="1.5"/><polygon points="21,9 21,15 24,12" fill="brown" stroke="brown"/></svg>');
}

/* Icona Loading: vista frontale di materiale che cade dal nastro alla tramoggia */
.icon-loading::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><defs><linearGradient id="conveyorGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="%23333333"/><stop offset="100%" stop-color="%23555555"/></linearGradient><linearGradient id="sandFall" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="%23E8C872"/><stop offset="100%" stop-color="%23D2B48C"/></linearGradient></defs><rect x="1" y="18" width="22" height="4" fill="%23777777" stroke="%23555555" stroke-width="1"/><path d="M5,18 L5,13 L19,13 L19,18" fill="none" stroke="%23555555" stroke-width="1.5"/><path d="M3,13 L21,13" stroke="%23555555" stroke-width="1.5"/><path d="M12,18 L12,13" stroke="%23555555" stroke-width="1"/><path d="M8,13 L8,18" stroke="%23555555" stroke-width="0.8"/><path d="M16,13 L16,18" stroke="%23555555" stroke-width="0.8"/><rect x="3" y="6" width="18" height="3" fill="url(%23conveyorGrad)" stroke="%23444444" stroke-width="1"/><rect x="3" y="4" width="2" height="2" fill="%23666666" stroke="%23444444" stroke-width="1"/><rect x="19" y="4" width="2" height="2" fill="%23666666" stroke="%23444444" stroke-width="1"/><path d="M10,9 L14,9 L14,13 L10,13 Z" fill="%23E8C872" stroke="%235A5A5A" stroke-width="0.8"><animate attributeName="fill" values="%23E8C872;%23D2B48C;%23E8C872" dur="2s" repeatCount="indefinite"/></path><path d="M12,9 L12,5 L8,5 L8,2" stroke="%23555555" stroke-width="1" fill="none"/><rect x="6" y="1" width="4" height="1.5" fill="%23666666" stroke="%23444444" stroke-width="0.5"/><path d="M9,9 L15,9" stroke="%235A5A5A" stroke-width="0.5"/><path d="M9.5,9 L8,13 M10.5,9 L9.5,13 M11.5,9 L11,13 M12.5,9 L12.5,13 M13.5,9 L14,13 M14.5,9 L15,13" stroke="%23E8C872" stroke-width="0.8" stroke-dasharray="0.5,0.5"><animate attributeName="stroke-dashoffset" values="0;1" dur="0.5s" repeatCount="indefinite"/></path><ellipse cx="12" cy="17" rx="4" ry="1" fill="%23E8C872" stroke="%235A5A5A" stroke-width="0.5"/></svg>');
}

/* Icona Quick: rappresenta un div con una lista di parametri editabili */
.icon-quick::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="orange" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" stroke="orange" fill="none"/><line x1="6" y1="7" x2="10" y2="7" stroke="orange"/><line x1="12" y1="7" x2="18" y2="7" stroke="orange" stroke-width="1"/><line x1="6" y1="12" x2="10" y2="12" stroke="orange"/><line x1="12" y1="12" x2="18" y2="12" stroke="orange" stroke-width="1"/><line x1="6" y1="17" x2="10" y2="17" stroke="orange"/><line x1="12" y1="17" x2="18" y2="17" stroke="orange" stroke-width="1"/><circle cx="15" cy="7" r="1" fill="orange"/><circle cx="15" cy="12" r="1" fill="orange"/><circle cx="15" cy="17" r="1" fill="orange"/></svg>');
}

.icon-multi-objects::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="cyan" stroke-width="2"><circle cx="6" cy="6" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="18" cy="18" r="3"/></svg>');
}

.icon-arrow::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="2"><path d="M4 12h14M14 6l6 6-6 6"/></svg>');
}

.icon-level-container::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="blue" stroke-width="2"><rect x="6" y="4" width="12" height="16" rx="2" stroke="blue" fill="none"/><rect x="6" y="4" width="12" height="8" rx="2" fill="blue"/></svg>');
}

.icon-label-container::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><text x="2" y="16" font-size="12" fill="black">Abc</text></svg>');
}

.icon-fb-card::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100"><rect x="10" y="60" width="140" height="10" rx="5" fill="%23333"/><polygon points="40,20 120,20 110,60 50,60" fill="%23d9d9d9" stroke="%23333" stroke-width="3"/><polygon points="85,60 110,60 120,75 80,75" fill="%23c53b5a" stroke="%23333" stroke-width="3"/><circle cx="50" cy="85" r="10" fill="%23fff" stroke="%23333" stroke-width="4"/><circle cx="110" cy="85" r="10" fill="%23fff" stroke="%23333" stroke-width="4"/><line x1="52" y1="30" x2="118" y2="30" stroke="%23333" stroke-width="3" stroke-linecap="round"/></svg>');
}
.icon-movable-guide::before {
    background-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100"><line x1="10" y1="50" x2="145" y2="50" stroke="%23333" stroke-width="3" stroke-linecap="round"/><polygon points="145,50 135,44 135,56" fill="%23333"/><line x1="30" y1="45" x2="30" y2="55" stroke="%239ca3af" stroke-width="2"/><line x1="50" y1="45" x2="50" y2="55" stroke="%239ca3af" stroke-width="2"/><line x1="70" y1="45" x2="70" y2="55" stroke="%239ca3af" stroke-width="2"/><line x1="90" y1="45" x2="90" y2="55" stroke="%239ca3af" stroke-width="2"/><line x1="110" y1="45" x2="110" y2="55" stroke="%239ca3af" stroke-width="2"/><line x1="130" y1="45" x2="130" y2="55" stroke="%239ca3af" stroke-width="2"/><rect x="66" y="39" width="34" height="22" rx="3" ry="3" fill="%233b82f6" stroke="%23333" stroke-width="3"/><circle cx="83" cy="50" r="28" fill="none" stroke="%236b7280" stroke-width="2" stroke-dasharray="4 4"/></svg>');
}

/* Animazione per l'icona di caricamento */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Effetto hover per tutte le icone */
[class^="icon-"]::before {
    transition: transform 0.2s, opacity 0.2s;
}

[class^="icon-"]:hover::before {
    transform: scale(1.2);
    opacity: 0.8;
}

.audio-controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px;
    background-color: #fff; /* Changed to white for a cleaner look */
    border-top: 1px solid #e0e0e0; /* Softer border for a modern touch */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Added subtle shadow for depth */
    border-radius: 15px; /* Rounded corners */
    position: relative;
    margin: 10px; /* Slight margin for responsive design */
}

.btn-action {
    background-color: #007aff; /* iOS blue color */
    color: white;
    border: none;
    border-radius: 12px; /* More rounded corners for a softer look */
    padding: 12px 20px; /* Increased padding for a larger tap area */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s; /* Added box-shadow transition */
    font-size: 16px; /* Increased font size for better readability */
}

    .btn-action:hover {
        background-color: #0051a8; /* Darker blue on hover for feedback */
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Increased shadow on hover for depth */
    }

.btn-record {
    background-color: #ff3b30; /* iOS red color */
}

.btn-upload {
    background-color: #4cd964; /* iOS green color */
}

.btn-cancel {
    background-color: #ffcc00; /* iOS yellow color */
}

audio {
    display: none;
}

@media (max-width: 600px) {
    .audio-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-action {
        width: 100%;
        margin-bottom: 10px; /* Space between buttons */
        font-size: 18px; /* Larger text for better mobile usability */
        padding: 15px; /* Increased padding for tap targets */
    }
}