/* ==========================================================================
   Widget Form Field System
   Backend refactoring - Nuovi componenti form riutilizzabili
   ========================================================================== */

/* Base widget container */
.widget-field {
    display: flex;
    align-items: stretch;
}

/* Label portion (left side) */
.widget-field-label {
    flex-shrink: 0;
    min-width: 70px;
    height: 32px;
    font-size: 12px;
    line-height: 32px;
    border: 1px solid #cccccc;
    background-color: #efefef;
    padding-left: 8px;
    padding-right: 8px;
    font-weight: 600;
    border-radius: 6px 0 0 6px;
}

/* Required field indicator */
.widget-field-label.required::after {
    content: " *";
    color: #E74C3C;
}

/* Input container (right side) */
.widget-field-input {
    flex: 1;
    min-width: 0;
}

/* Input with tooltip container */
.widget-field-input-tooltip {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Tooltip icon positioning */
.widget-field-tooltip {
    position: absolute;
    top: 0;
    right: 10px;
    height: 32px;
    line-height: 32px;
    font-size: 20px;
    color: #337ab7;
}

/* Form control adjustments for widget context */
.widget-field .form-control {
    height: 32px;
    border-radius: 0 6px 6px 0;
    width: 100%;
}

/* When input has tooltip, add right padding */
.widget-field-input-tooltip .form-control {
    padding-right: 35px;
}

/* Label width modifiers */
.widget-field-label.min-w-80 { min-width: 80px; }
.widget-field-label.min-w-90 { min-width: 90px; }
.widget-field-label.min-w-100 { min-width: 100px; }
.widget-field-label.min-w-110 { min-width: 110px; }
.widget-field-label.min-w-120 { min-width: 120px; }
.widget-field-label.min-w-130 { min-width: 130px; }
.widget-field-label.min-w-150 { min-width: 150px; }

/* ==========================================================================
   Toggle Widget
   ========================================================================== */

.widget-toggle {
    display: flex;
    align-items: center;
    padding: 3px 12px 3px 8px;
    border-radius: 15px;
    font-size: 14px;
    background-color: #efefef;
    cursor: pointer;
}

.widget-toggle-icon {
    font-size: 20px;
    padding-right: 5px;
    padding-top: 3px;
}

.widget-toggle-icon.checked {
    color: #31A3E4;
}

.widget-toggle-label {
    flex: 1;
    text-align: left;
    font-weight: 400;
    padding-left: 3px;
}

.widget-toggle-tooltip {
    font-size: 20px;
    color: #337ab7;
    padding-top: 3px;
}