/**
 * Shared badge utilities — admin + public (property page, etc.)
 * Pair with Bootstrap’s `.badge` (e.g. `badge badge-accent-active`).
 * Colors use :root variables so they stay in one place.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --bs-badge-border-radius: 3px;
    --bs-badge-font-size: 0.675rem;
    --bs-badge-padding-y: 0;
    --bs-badge-padding-x: 0.375rem;

    --nfr-badge-accent-active-start: rgba(52, 211, 153, 0.28);
    --nfr-badge-accent-active-end: rgba(52, 211, 153, 0.12);
    --nfr-badge-accent-active-border: rgba(52, 211, 153, 0.5);
    --nfr-badge-accent-active-shadow: rgba(52, 211, 153, 0.2);
    --nfr-badge-accent-active-color: #34d399;

    --nfr-badge-accent-blue-start: rgba(96, 165, 250, 0.28);
    --nfr-badge-accent-blue-end: rgba(96, 165, 250, 0.12);
    --nfr-badge-accent-blue-border: rgba(96, 165, 250, 0.5);
    --nfr-badge-accent-blue-shadow: rgba(96, 165, 250, 0.2);
    --nfr-badge-accent-blue-color: #60a5fa;

    --nfr-badge-accent-amber-start: rgba(251, 191, 36, 0.28);
    --nfr-badge-accent-amber-end: rgba(251, 191, 36, 0.12);
    --nfr-badge-accent-amber-border: rgba(251, 191, 36, 0.5);
    --nfr-badge-accent-amber-shadow: rgba(251, 191, 36, 0.2);
    --nfr-badge-accent-amber-color: #fbbf24;

    --nfr-badge-accent-danger-start: rgba(239, 68, 68, 0.28);
    --nfr-badge-accent-danger-end: rgba(239, 68, 68, 0.12);
    --nfr-badge-accent-danger-border: rgba(239, 68, 68, 0.5);
    --nfr-badge-accent-danger-shadow: rgba(239, 68, 68, 0.2);
    --nfr-badge-accent-danger-color: #ef4444;

    --nfr-badge-accent-purple-start: rgba(168, 85, 247, 0.28);
    --nfr-badge-accent-purple-end: rgba(168, 85, 247, 0.12);
    --nfr-badge-accent-purple-border: rgba(168, 85, 247, 0.5);
    --nfr-badge-accent-purple-shadow: rgba(168, 85, 247, 0.2);
    --nfr-badge-accent-purple-color: #a855f7;
}

.badge:empty {
    display: none;
}

/* Shared layout for accent badges (does not replace Bootstrap’s base .badge elsewhere) */
.badge.badge-accent-active,
.badge.badge-accent-blue,
.badge.badge-accent-amber,
.badge.badge-accent-danger,
.badge.badge-accent-purple {
    border-radius: var(--bs-badge-border-radius);
    font-size: var(--bs-badge-font-size);
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    text-align: center;
    white-space: nowrap;
    display: inline-flex;
    font-family: Roboto, sans-serif;
    letter-spacing: 0.01em;
    line-height: 1.125rem;
    position: relative;
    vertical-align: middle;
    align-items: center;
    font-weight: 600;
}

.badge.badge-accent-active {
    background-attachment: initial !important;
    background-clip: initial !important;
    background-color: initial !important;
    background-image: linear-gradient(
        135deg,
        var(--nfr-badge-accent-active-start) 0%,
        var(--nfr-badge-accent-active-end) 100%
    ) !important;
    background-origin: initial !important;
    border: 1px solid var(--nfr-badge-accent-active-border);
    box-shadow: 0 2px 8px var(--nfr-badge-accent-active-shadow);
    color: var(--nfr-badge-accent-active-color) !important;
}

.badge.badge-accent-blue {
    background: linear-gradient(
        135deg,
        var(--nfr-badge-accent-blue-start) 0%,
        var(--nfr-badge-accent-blue-end) 100%
    ) !important;
    border: 1px solid var(--nfr-badge-accent-blue-border);
    color: var(--nfr-badge-accent-blue-color) !important;
    box-shadow: 0 2px 8px var(--nfr-badge-accent-blue-shadow);
}

.badge.badge-accent-amber {
    background: linear-gradient(
        135deg,
        var(--nfr-badge-accent-amber-start) 0%,
        var(--nfr-badge-accent-amber-end) 100%
    ) !important;
    border: 1px solid var(--nfr-badge-accent-amber-border);
    color: var(--nfr-badge-accent-amber-color) !important;
    box-shadow: 0 2px 8px var(--nfr-badge-accent-amber-shadow);
}

.badge.badge-accent-danger {
    background: linear-gradient(
        135deg,
        var(--nfr-badge-accent-danger-start) 0%,
        var(--nfr-badge-accent-danger-end) 100%
    ) !important;
    border: 1px solid var(--nfr-badge-accent-danger-border);
    color: var(--nfr-badge-accent-danger-color) !important;
    box-shadow: 0 2px 8px var(--nfr-badge-accent-danger-shadow);
}

.badge.badge-accent-purple {
    background: linear-gradient(
        135deg,
        var(--nfr-badge-accent-purple-start) 0%,
        var(--nfr-badge-accent-purple-end) 100%
    ) !important;
    border: 1px solid var(--nfr-badge-accent-purple-border);
    color: var(--nfr-badge-accent-purple-color) !important;
    box-shadow: 0 2px 8px var(--nfr-badge-accent-purple-shadow);
}