.brand-logo {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: 100%;
    color: white;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.fullHeight {
    height: 100%;
}

.overflow-wrap-anywhere {
    overflow-wrap: anywhere;
}

.truncate-60 {
    width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-items a {
    color: white;
}

ul.breadcrumb-items > li.mud-breadcrumb-separator > span {
    color: white;
    font-size: 1.7rem;
    font-weight: bold;
}

ul.breadcrumb-items > li.mud-breadcrumb-item.mud-disabled > a {
    color: lightgray;
}

.mud-form .mud-input-control {
    margin-top: 1.5rem;
}

/* ------------------------- Drawer button ------------------------------- */
#right-drawer-toggle-button {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}

/* ------------------------- Authentication info footer ------------------------------- */
.authentication-info-footer {
    position: absolute;
    bottom: 1rem;
}

/************************** Menu bar color *******************************/

.menuBar-red {
    background-color: #C50022 !important;
}

.menuBar-blue {
    background-color: #004A96 !important;
}

.menuBar-green {
    background-color: #00793A !important;
}

.logout-button {
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

/* ------------------------- Dialog sticky actions ------------------------------- */
.sticky-actions {
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
    border-top: 1px solid var(--mud-palette-divider);
}

/* ------------------------- Datagrid filter popover pickers ------------------------------- */
.table-stack-width {
    width: 300px;
}

/* Grow only the filter header cells that show selected-value chips, so the chips sit
   next to each other. The column expands to fit them in one row, capped at 300px. */
.filter-header-cell .filter-header-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    width: max-content;
    max-width: 300px;
}

.filter-header-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

/* The column filter popover is pinned at z-index 9999. Nested pickers (e.g. date range)
   open their own popover through the shared provider at MudBlazor's default z-index, which
   would otherwise render behind the filter popover and only be partially visible. Raise the
   picker popover above the filter popover so it is fully shown and clickable. Cap the width to
   the viewport (with a horizontal scroll fallback) so the two-month date range calendar can no
   longer fall off the edge of the screen on narrow layouts or right-aligned columns. */
.datagrid-filter-popover-overlay {
    z-index: 10000 !important;
    max-width: min(640px, 95vw) !important;
    overflow-x: auto !important;
}

/* ------------------------- Login page ------------------------------- */
.login-full-height {
    height: 100vh;
}

.login-cover-panel {
    background-color: blue;
}

.login-signin-label {
    color: grey;
}

.login-content {
    text-align: center;
}

.login-actions {
    display: flex;
    justify-content: center;
}

.login-description {
    white-space: pre-line;
}

/* ------------------------- Unauthorized page ------------------------------- */
.unauthorized-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ------------------------- Pagination toolbar ------------------------------- */
.mud-table-pagination-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    gap: 16px;
}

.mud-table-pagination-display {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pagination-pagesize-select {
    min-width: 64px;
    max-width: 80px;
}

.pagination-pagesize-select .mud-input-slot {
    font-size: 0.875rem;
    padding: 0;
}

.mud-table-page-number-information {
    font-size: 0.875rem;
    white-space: nowrap;
}

.article-properties-grid th:nth-child(1),
.article-properties-grid td:nth-child(1) {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
}

.article-properties-grid th:nth-child(2),
.article-properties-grid td:nth-child(2) {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
}

.article-properties-title-actions {
    position: fixed;
    top: 8px;
    right: 16px;
    z-index: 1400;
    display: flex;
    gap: 4px;
}

.article-properties-grid .article-actions-column {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
}

.article-properties-grid td.article-actions-column > div {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    width: 100%;
}