.input-validation-error {
    border: 1px solid red;
}

.field-validation-error {
    color: red;
    font-size: 13px;
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
}


.form-signin .input-group {
    padding-bottom: 20px;
    position: relative;
}

/*DATATABLES NPM FIX*/
div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
}

    div.dataTables_wrapper div.dataTables_filter label {
        margin: 3px;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        margin-left: 0.5em;
        display: inline-block;
        width: auto;
    }

.dataTables_wrapper > div.dt-buttons.btn-group.flex-wrap > div > button {
    background-color: var(--btn-outline-secondary-bg);
    border-color: var(--btn-outline-secondary-border);
    color: var(--btn-outline-secondary-color);
}


.dataTables_wrapper > div.dt-buttons.btn-group.flex-wrap > div > div.dropdown-menu.dt-button-collection > div > a.dt-button-active {
    background: var(--bg-sidebar);
    color: var(--white);
}

.dataTables_wrapper > div.dt-buttons.btn-group.flex-wrap > div > div.dropdown-menu.dt-button-collection > div > a {
    background-color:transparent;
    color: #212529;
}

table.dataTable {
    clear: both;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    max-width: none !important;
    border-collapse: separate !important;
    border-spacing: 0;
}

.table-responsive {
    overflow-x:inherit;
}

/* Palinal telemetry badges (Bootstrap 4.6 friendly) */
.badge-telemetry {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border-radius: .35rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.1;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 1px 0 rgba(0,0,0,.25);
    user-select: none;
}

    /* Optional: piccolo “dot” a sinistra */
    .badge-telemetry::before {
        content: "";
        width: .45rem;
        height: .45rem;
        border-radius: 999px;
        background: currentColor;
        opacity: .85;
    }

/* Varianti per i tuoi TelemetryType */
.badge-telemetry-scale {
    color: #bfe3ff;
    background: rgba(0, 123, 255, .18); /* vibe primary */
    border-color: rgba(0, 123, 255, .35);
}

.badge-telemetry-search {
    color: #bff7ff;
    background: rgba(23, 162, 184, .18); /* vibe info */
    border-color: rgba(23, 162, 184, .35);
}

.badge-telemetry-formula {
    color: #ffe7b3;
    background: rgba(255, 193, 7, .18); /* vibe warning */
    border-color: rgba(255, 193, 7, .35);
}

.badge-telemetry-read {
    color: #c9f7d2;
    background: rgba(40, 167, 69, .18); /* vibe success */
    border-color: rgba(40, 167, 69, .35);
}

/* Fallback */
.badge-telemetry-default {
    color: #e2e3e5;
    background: rgba(108, 117, 125, .18); /* vibe secondary */
    border-color: rgba(108, 117, 125, .35);
}

/* Se vuoi renderli cliccabili (hover/focus) */
.badge-telemetry.badge-clickable {
    cursor: pointer;
    transition: transform .08s ease, filter .12s ease;
}

    .badge-telemetry.badge-clickable:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

    .badge-telemetry.badge-clickable:active {
        transform: translateY(0);
    }

/* tutte le DataTable: non mando a capo, così lo scrollX funziona subito */
table.dataTable td,
table.dataTable th {
    white-space: nowrap;
}

    /* eccezione: se una colonna la marco come "json", lì posso andare a capo */
    table.dataTable td.json,
    table.dataTable th.json {
        white-space: normal;
    }