/*
    Styles for UserThinCard.

    Loaded once from App.razor rather than from the component's markup: Blazor
    re-emits a <style> block for every rendered instance, and UserThinCard is
    rendered three times per UserTimeRegSummaryCard, which is itself rendered
    once per user in a loop on the period-approval page.

    Scoped CSS (.razor.css) is not an option here: the tooltip rules target a
    Syncfusion popup that is relocated to <body>, outside this component's
    subtree, so the generated [b-xxxxx] scope attribute would never match.
*/
.user-thin-card-tooltip .user-thin-card-tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-sf-border-light, #e0e0e0);
}

.user-thin-card-tooltip .user-thin-card-tooltip-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 13px;
}

.user-thin-card-tooltip .user-thin-card-tooltip-label {
    font-weight: 600;
    color: var(--color-sf-content-text-color-alt1, #666);
    text-align: left;
}

.user-thin-card-text-multiline {
    display: flex;
    flex-direction: column;
}
