/**
 * Bridge compatibility overrides (legacy inline styles consolidated).
 * Prefer token-backed rules; avoid new !important here — see docs/UI_STANDARDS.md.
 */

/* jQuery Confirm (plugin) */
.jconfirm-content {
    font-size: 12px !important;
}

.jconfirm-title-c {
    font-size: 18px !important;
}

/* Bootstrap tooltips vs. global opacity resets */
.tooltip {
    opacity: 1 !important;
}

.tooltip .tooltip-inner {
    opacity: 1 !important;
    background-color: #838bc7 !important;
    color: #ffffff !important;
}

.tooltip .arrow::before {
    border-top-color: #838bc7 !important;
}

/* Notification badge (navbar) */
.badge.badge-danger.newbadge {
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    font-size: 10px;
    padding-left: 5px !important;
    padding-bottom: 3px !important;
}

/* Loader spinner */
.loader {
    border: 3px solid transparent;
    border-top: 3px solid var(--tm-brand-purple) !important;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1.7s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Ajax overlay */
.ajax-loader {
    background-color: rgba(222, 220, 220, 0.7);
    position: absolute;
    z-index: 100 !important;
    width: 100%;
    height: 100%;
}

.ajax-loader img {
    position: relative;
    top: 50%;
    left: 50%;
}

/* Calculator chip (header) */
.calculator {
    margin: 0;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 2px 5px;
    display: inline-block;
    font-size: 12px;
    height: auto;
    color: #ccc;
    transition: border-color 0.3s, color 0.3s;
}

.calculator:hover {
    border-color: var(--tm-brand-pink);
    color: var(--tm-brand-pink);
}

.notification-badge {
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    position: relative;
    bottom: 15px;
    left: 15px;
}