/* Stili per la direttiva webInputFnd */

web-input-fnd   {margin:0px 5px 5px 5px; width:-webkit-fill-available; display:block}

.web-input-fnd-container {
    position: relative;
    width: 100%;
    /* margin: 8px 0; */
    margin: 0px;
}

/* Container input editabile */
.input-wrapper {
    display: flex;
    align-items: center;
    /* gap: 8px; */
    background: transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* .input-wrapper:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} */

/* Input */
.web-input-fnd-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    background-color: white !important;    
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.web-input-fnd-input:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.web-input-fnd-input::placeholder {
    color: #999;
    font-style: italic;
}

/* Campo richiesto vuoto - arancione */
.web-input-fnd-input.field-required-empty {
    border-color: #FF9800 !important;
    background-color:#FF9800 !important;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1) !important;
}

/* Campo invalido - rosso */
.web-input-fnd-input.field-invalid {
    border-color: red !important;
    /* background-color: #FFEBEE; */
    background-color: red !important;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1) !important;
}

/* Container non editabile */
.readonly-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    border-radius: 4px;
    xxpadding: 4px;
}

.readonly-text {
    flex: 1;
    padding: 0px 2px;
    background: #fafafa;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
    min-height: 28px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Pulsante ricerca */
.search-button {
    flex-shrink: 0;
    margin: 0 !important;
    background: #2196F3 !important;
    color: white !important;
    transition: all 0.3s ease;
}

.search-button:hover {
    background: #1976D2 !important;
    transform: scale(1.05);
}

.search-button md-icon {
    color: white;
}

/* Campo richiesto */
.web-input-fnd-container.required .web-input-fnd-input,
.web-input-fnd-container.required .readonly-text {
    border-left: 4px solid #FF9800;
}

/* Errore validazione */
.validation-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
}

/* Campo richiesto vuoto - arancione */
.validation-required {
    background: #FFF3E0;
    border-left: 4px solid #FF9800;
    color: #E65100;
}

.validation-required .error-icon {
    color: #FF9800;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Campo invalido - rosso */
.validation-invalid {
    background: #FFEBEE;
    border-left: 4px solid #F44336;
    color: #C62828;
}

.validation-invalid .error-icon {
    color: #F44336;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Stili Dialog Popup */
.web-input-fnd-dialog {
    min-width: 600px;
    max-width: 90vw;
    max-height: 80vh;
}

.web-input-fnd-dialog md-toolbar {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
}

.web-input-fnd-dialog md-toolbar h2 {
    font-weight: 500;
    font-size: 20px;
}

/* Container ricerca nel dialog */
.search-container {
    position: relative;
    margin: 0px 0 0px 0 !important;
}

.search-container input {
    padding-right: 40px !important;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* .search-container input:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
} */

.search-container .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

/* Container risultati */
.results-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
}

/* Lista risultati */
.results-list {
    padding: 0 !important;
}

.result-item {
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    background: white;
    min-height: 56px !important;
    padding: 0 !important;
}

.result-item:hover {
    background: #f5f5f5;
}

.result-item.selected {
    background: #E3F2FD;
    border-left: 4px solid #2196F3;
}

.result-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0px 0px !important;
    height: auto !important;
}

.result-col {
    flex: 1 !important;
    padding: 0 8px !important;
    min-width: 0 !important;
    display: inline-block !important;
}

.result-item strong {
    color: #1976D2;
    font-weight: 600;
    font-size: 15px;
    display: inline;
}

.result-item span {
    color: #666;
    font-size: 14px;
    display: inline;
}

/* Nessun risultato */
.no-results {
    padding: 40px 16px !important;
    text-align: center;
    color: #999;
    font-style: italic;
    min-height: 120px !important;
}

/* Barra info */
.info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
}

.info-bar .hint {
    font-style: italic;
    color: #999;
}

/* Scrollbar personalizzata */
.results-container::-webkit-scrollbar {
    width: 8px;
}

.results-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.results-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.results-container::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Responsive */
@media (max-width: 768px) {
    .web-input-fnd-dialog {
        min-width: 90vw;
    }

    .result-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .result-col {
        width: 100%;
        padding: 4px 8px;
    }

    .info-bar {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* Focus visibile per accessibilità */
.web-input-fnd-input:focus-visible,
.search-button:focus-visible {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
}

/* Material Design elevations */
/* .input-wrapper {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
} */

.web-input-fnd-dialog {
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
        0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.web-input-fnd-container .cerca-button {
    width: 30px;
    background-color: steelblue;
    cursor: pointer;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 2px;
    margin-left: -10px;
    outline: none;
    margin-top: 25px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.input-wrapper .lde {
    color: darkred;
    padding-top:0px;
    margin-top:28px;
    height: -webkit-fill-available;
    width: 40%;

    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;

}
.input-wrapper .truncate {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}