/* Utility: has-left-border - can be used on any element (card, box, notification, etc.) */
[data-theme] .has-left-border {
    border-left: 4px solid var(--info, #999);
}

[data-theme] .has-left-border.is-primary {
    border-left: 4px solid var(--button-primary-bg, var(--primary));
}

[data-theme] .has-left-border.is-success {
    border-left: 4px solid var(--button-success-bg, var(--success));
}

[data-theme] .has-left-border.is-danger {
    border-left: 4px solid var(--button-danger-bg, var(--danger));
}

[data-theme] .has-left-border.is-info {
    border-left: 4px solid var(--button-info-bg, var(--info));
}

[data-theme] .has-left-border.is-warning {
    border-left: 4px solid var(--button-warning-bg, var(--warning));
}

/* Also support Bulma .card as a hero container so views can use <div class="card ..."> */
[data-theme] .card.box {
    position: relative;
    background-color: var(--surface, var(--surface-alt, #ffffff));
    border: 1px solid var(--border, #dbeafe);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    /* left border is applied explicitly via .has-left-border on elements that need it */
}

    [data-theme] .card.box > :last-child {
        margin-bottom: 0;
    }

    [data-theme] .card.box .title {
        margin-bottom: 0.5rem;
    }

    [data-theme] .card.box .content {
        margin-bottom: 0;
    }

    /* Ensure has-left-border works on .card.box elements */
    [data-theme] .card.box.has-left-border {
        border-left: 4px solid var(--info, #999);
    }

        [data-theme] .card.box.has-left-border.is-primary {
            border-left: 4px solid var(--button-primary-bg, var(--primary));
        }

        [data-theme] .card.box.has-left-border.is-success {
            border-left: 4px solid var(--button-success-bg, var(--success));
        }

        [data-theme] .card.box.has-left-border.is-danger {
            border-left: 4px solid var(--button-danger-bg, var(--danger));
        }

        [data-theme] .card.box.has-left-border.is-info {
            border-left: 4px solid var(--button-info-bg, var(--info));
        }

        [data-theme] .card.box.has-left-border.is-warning {
            border-left: 4px solid var(--button-warning-bg, var(--warning));
        }

    /* Support subitem styling when .card is used as hero container */
    [data-theme] .card.box .is-family-monospace {
        display: inline-block;
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius-lg);
        background: var(--surface-alt, var(--surface));
        color: var(--text-secondary);
        border: 1px solid var(--primary-alt, var(--border));
        font-size: var(--text-base);
        font-weight: 700;
    }

    [data-theme] .card.box.is-success .is-family-monospace {
        background-color: color-mix(in srgb, var(--button-success-bg) 20%, transparent);
        color: var(--button-success-bg, var(--success));
        border-color: color-mix(in srgb, var(--button-success-bg) 45%, transparent);
    }

    [data-theme] .card.box.is-danger .is-family-monospace {
        background-color: color-mix(in srgb, var(--button-danger-bg) 16%, transparent);
        color: var(--button-danger-bg, var(--danger));
        border-color: color-mix(in srgb, var(--button-danger-bg) 40%, transparent);
    }

    [data-theme] .card.box.is-info .is-family-monospace {
        background-color: color-mix(in srgb, var(--button-info-bg) 20%, transparent);
        color: var(--button-info-bg, var(--info));
        border-color: color-mix(in srgb, var(--button-info-bg) 45%, transparent);
    }

    [data-theme] .card.box.is-warning .is-family-monospace {
        background-color: color-mix(in srgb, var(--button-warning-bg) 16%, transparent);
        color: var(--button-warning-bg, var(--warning));
        border-color: color-mix(in srgb, var(--button-warning-bg) 40%, transparent);
    }

/* Profile type tab - theme override for background colors */
[data-theme] .profile-type-tab {
    border-radius: 4px 4px 0 0;;
    line-height: 1.1;
}

[data-theme] .profile-type-tab.is-primary {
    background-color: var(--button-primary-bg, var(--primary));
}

[data-theme] .profile-type-tab.is-success {
    background-color: var(--button-success-bg, var(--success));
}

[data-theme] .profile-type-tab.is-danger {
    background-color: var(--button-danger-bg, var(--danger));
}

[data-theme] .profile-type-tab.is-info {
    background-color: var(--button-info-bg, var(--info));
}

[data-theme] .profile-type-tab.is-warning {
    background-color: var(--button-warning-bg, var(--warning));
}

/* label */
[data-theme] .field .label {
    font-size: var(--text-xs);
    color: var(--text-secondary, #6b7280);
    margin-bottom: 0.15rem;
    font-weight: 700;
}

/* display field */
[data-theme] div.input {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg);
    background: var(--surface-alt, #fff);
    box-shadow: none;
    font-size: var(--text-base);
    color: var(--text-primary, #111827);
    font-weight: 600;
    min-height: 2.5em;
    height: auto;
    padding: calc(0.5em - 1px) calc(0.75em - 1px);
    display: flex;
    align-items: center;
    line-height: 1.35;
}

    /* boolean colours */
    [data-theme] div.input.bool-true {
        color: var(--button-warning-bg, var(--warning));
    }

    [data-theme] div.input.bool-false {
        color: var(--button-danger-bg, var(--danger));
    }