/* ---- App bar: brand + breadcrumb ---- */
.app-brand {
    color: var(--mud-palette-appbar-text);
    font-weight: 600;
    letter-spacing: .2px;
    text-decoration: none;
    white-space: nowrap;
}
.app-brand:hover { opacity: .85; }

.app-crumbs {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    overflow: hidden;
    color: var(--mud-palette-appbar-text);
    font-size: .95rem;
}
.app-crumbs .sep { opacity: .38; user-select: none; }
.app-crumbs a { color: inherit; opacity: .72; text-decoration: none; white-space: nowrap; }
.app-crumbs a:hover { opacity: 1; text-decoration: underline; }
.app-crumbs .cur {
    opacity: .92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* On narrow screens keep only the brand + the current (last) crumb readable. */
@media (max-width: 640px) {
    .app-crumbs .sep, .app-crumbs a { display: none; }
    .app-crumbs .cur::before { content: "/ "; opacity: .38; }
}

/* ---- Server card (InstanceCard): status stripe + metadata grid ---- */
.instance-card-clickable { cursor: pointer; }
.instance-card-clickable:hover { background: rgba(255, 255, 255, .025); }

.server-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
.server-meta-grid .lab {
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    /* Dim the label relative to its value: it inherits the primary text colour
       (theme-aware) and drops to ~half strength, restoring the label/value
       hierarchy the card mockup had. Using --mud-palette-text-secondary here no
       longer works — the theme bumped it to ~0.74, so labels matched their values. */
    opacity: .55;
    margin-bottom: 2px;
}
.server-meta-grid .val { font-size: 13.5px; word-break: break-word; }

/* Align the app-bar hamburger with the drawer's nav-group icons below it. */
.app-menu-toggle { margin-inline-start: -18px; }

/* ---- Mini side-rail drawer: hide the nav-group expand chevron while collapsed ----
   In the mini rail the group shows only its icon, so the floating expand arrow is
   noise. It returns when the rail expands on hover (drawer is then --open). */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-expand-icon {
    display: none !important;
}

/* ---- Version footer pinned to the bottom of the nav drawer ---- */
.mud-drawer .mud-drawer-content { display: flex; flex-direction: column; height: 100%; }
.app-version { margin-top: auto; padding: 12px 16px; text-align: center; white-space: nowrap; overflow: hidden; }
/* Hide the label while the mini rail is collapsed; it returns on hover-expand. */
.mud-drawer-mini.mud-drawer--closed .app-version { visibility: hidden; }

/* ---- Version pinned to the bottom-center of the login screen ---- */
.login-version { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 0.75rem; color: var(--mud-palette-text-secondary); }

/* Current-user label in the app bar: hide the text on narrow screens (icon + tooltip remain). */
@media (max-width: 600px) { .app-current-user { display: none; } }

/* Top pager (MudTablePager placed in ToolBarContent) carries a footer-style border-top; hide it up top. */
.mud-table-toolbar .mud-table-pagination { border-top: none; }

/* A switch's label is part of its hit area and stretches the row, so empty space to its right toggles it. */
.mud-switch { align-self: flex-start; }