/* Reservad för badge-komponentstilar */

/* Apply tag styling to Bulma .tag when used in card-hero or similar header areas */
[data-theme] .box .tag,
[data-theme] .box .tag.is-success,
[data-theme] .box .tag.is-danger,
[data-theme] .box .tag.is-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary, #222222);
}

    [data-theme] .box .tag.is-success {
        /* Use same text color as table tags (button success) */
        color: var(--button-success-bg, #007D72);
        background: transparent;
    }

    [data-theme] .box .tag.is-info {
        /* Use same text color as table tags (button info) */
        color: var(--button-info-bg, var(--info, #0a9d8f));
        background: transparent;
        border-color: transparent;
    }

    [data-theme] .box .tag.is-warning {
        /* Use same text color as table tags (button warning) */
        color: var(--button-warning-bg, #B38F1F);
        background: transparent;
        border-color: transparent;
    }

    [data-theme] .box .tag.is-danger {
        /* Use same text color as table tags (button danger) */
        color: var(--button-danger-bg, #A92C4C);
        background: transparent;
    }

/* When using Bulma .tag inside table cells, apply styling so markup can use only .tag */
[data-theme] .table td .tag {
    display: inline-flex; /* override .tag default */
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: 500;
    border: 1px solid transparent;
    background: var(--table-tag-bg, var(--surface, #f4f6f6));
    color: var(--text-primary, #222222);
}

    [data-theme] .table td .tag.is-success {
        background-color: var(--table-tag-bg, var(--surface, #f4f6f6));
        color: var(--button-success-bg, #0a9d8f);
        border-color: transparent;
    }

    [data-theme] .table td .tag.is-danger {
        background-color: var(--table-tag-bg, var(--surface, #f4f6f6));
        color: var(--button-danger-bg, #A92C4C);
        border-color: transparent;
    }

    [data-theme] .table td .tag.is-warning {
        background-color: var(--table-tag-bg, var(--surface, #f4f6f6));
        color: var(--button-warning-bg, #A4AF56);
        border-color: transparent;
    }

    [data-theme] .table td .tag.info,
    [data-theme] .table td .tag.is-info {
        background-color: var(--table-tag-bg, var(--surface, #f4f6f6));
        color: var(--button-info-bg, var(--info, #0a9d8f));
        border-color: transparent;
    }

[data-theme] .table td .tag {
    --table-tag-bg: var(--surface-alt, #f4f6f6);
}