.level-icon-size {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
}

.truncate-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    width: 100%;
    display: block;
}

.text12{
    font-size: 12px !important;
}

/* Apply the surface token to MudBlazor's chrome — only when a Checkmate
   page is mounted inside the layout. (.checkmate-page lives inside @Body
   inside .mud-main-content; the appbar is its sibling under .mud-layout.) */
.mud-layout:has(.checkmate-page) .mud-main-content,
.mud-layout:has(.checkmate-page) .mud-appbar-fixed-top {
    background-color: var(--sm-background-color-primary) !important;
}
.mud-layout:has(.checkmate-page):has([data-theme="dark"]) .mud-main-content,
.mud-layout:has(.checkmate-page):has([data-theme="dark"]) .mud-appbar-fixed-top {
    background-color: #101010 !important; /*will be deleted once we implement new dark mode design in the whole app*/
}

.mud-layout:has(.checkmate-page) .mud-appbar-fixed-top {
    border-bottom: 0.5px solid var(--sm-color-border-primary) !important;
}
.mud-layout:has(.checkmate-page):has([data-theme="dark"]) .mud-appbar-fixed-top {
    border-bottom-color: #5C5C5C !important; /*will be deleted once we implement new dark mode design in the whole app*/
}