/* Badge text color fixes for Tabler theme (list views).
   Tabler uses CSS variables that can make coloured badge text
   unreadable — override both the color property and the CSS var
   for <span.badge>, decorated spans and anchors. */
.badge.bg-primary,
.badge.bg-danger,
.badge.bg-success,
.badge.bg-info,
.badge.bg-secondary,
.badge.bg-dark,
span[class*="badge"][class*="bg-primary"],
span[class*="badge"][class*="bg-danger"],
span[class*="badge"][class*="bg-success"],
span[class*="badge"][class*="bg-info"],
span[class*="badge"][class*="bg-secondary"],
span[class*="badge"][class*="bg-dark"],
a[class*="badge"][class*="bg-primary"],
a[class*="badge"][class*="bg-danger"],
a[class*="badge"][class*="bg-success"],
a[class*="badge"][class*="bg-info"],
a[class*="badge"][class*="bg-secondary"],
a[class*="badge"][class*="bg-dark"] {
    color: #fff !important;
    --tblr-badge-color: #fff !important;
}
.badge.bg-warning,
span[class*="badge"][class*="bg-warning"],
a[class*="badge"][class*="bg-warning"] {
    color: #212529 !important;
    --tblr-badge-color: #212529 !important;
}
.badge.bg-light {
    color: #212529 !important;
    --tblr-badge-color: #212529 !important;
}

/* Prevent datatable cells from overflowing the viewport horizontally. */
.table-responsive {
    overflow-x: auto;
}
#crudTable td {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

/* Instructions icon tooltip (Order list "Instrucciones" column).
   Show the tooltip on hover and let the parent cell overflow so it isn't clipped. */
#crudTable td:has(.instructions-tooltip-container) {
    overflow: visible !important;
}
.instructions-tooltip-container:hover .instructions-tooltip,
.instructions-tooltip-container:focus-within .instructions-tooltip {
    display: block !important;
}