body {
    display:flex;
    min-width:100vw;
    min-height:100vh;
    flex-direction:column;
    margin:0;
    align-content: center;
}

/* --- Layout --- */
.fleet-layout {
    background: var(--mud-palette-background);
}

.fleet-main {
    min-height: 100vh;
}

.fleet-content {
    padding: 16px;
    padding-top: 0;
}

/* --- Drawer / Sidebar --- */
.fleet-drawer {
    background: var(--mud-palette-drawer-background) !important;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.fleet-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Drawer header spacing */
.fleet-drawer-header {
    padding: 10px 10px 10px 10px;
}

/* Make the brand feel like Skeleton (less huge) */
.fleet-drawer-header .mud-typography-subtitle1 {
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

/* Center nav text/icon alignment a bit (helps mini-rail) */
.fleet-drawer .mud-nav-link .mud-nav-link-text {
    display: flex;
    align-items: center;
}

/* --- AppBar / Topbar --- */
.fleet-appbar {
    box-shadow: none !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-appbar {
    height: 56px;
}

.mud-appbar.mud-appbar-dense {
    height: 48px;
}

.fleet-divider-vert {
    opacity: 0.9;
}

/* --- Buttons / Inputs / Popovers --- */
/* Global-ish button polish (safe) */
.mud-button-root {
    text-transform: none;
    font-weight: 600;
    border-radius: calc(var(--mud-default-borderradius) - 2px);
}

/* Outlined tenant/user buttons in the drawer */
.fleet-tenant-btn,
.fleet-user-btn {
    justify-content: flex-start;
    border-color: var(--mud-palette-lines-default) !important;
}

/* Popovers/menus feel like Skeleton: border + tasteful shadow */
.mud-menu .mud-paper,
.mud-popover .mud-paper {
    z-index: 2000 !important;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

.mud-menu-item {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Reduce “puffy” input rounding */
.mud-input-control>.mud-input-control-input-container {
    border-radius: var(--mud-default-borderradius);
}

/* --- Nav items --- */
.fleet-nav .mud-nav-link {
    padding: 8px 10px;
    margin: 2px 8px;
    border-radius: calc(var(--mud-default-borderradius) - 2px);
}

.fleet-nav .mud-nav-link .mud-nav-link-text {
    gap: 10px;
}

.fleet-nav .mud-nav-link:hover {
    background: rgba(250, 250, 250, 0.06);
}

.fleet-nav .mud-nav-link.active {
    background: rgba(21, 93, 252, 0.16);
    border: 1px solid rgba(21, 93, 252, 0.35);
}

/* Sidebar section label */
.fleet-muted-label {
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* --- Surfaces (cards/papers) --- */
/* Keep this global: it’s a key part of the “Skeleton” feel */
.mud-paper,
.mud-card {
    border: 1px solid var(--mud-palette-lines-default);
}

/* Don’t force border on ALL drawers/appbars globally — use fleet-* classes instead */

/* --- DataGrid (Skeleton-like) --- */
.fleet-grid .mud-paper {
    box-shadow: none !important;
}

.fleet-grid .mud-table {
    background: var(--mud-palette-surface);
}

.fleet-grid .mud-table-toolbar {
    padding: 12px 12px 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Header: small caps + muted */
.fleet-grid thead th {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Rows: tighter + subtle separators */
.fleet-grid tbody td {
    border-bottom: 1px solid rgba(250, 250, 250, 0.08) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Hover highlight */
.fleet-grid tbody tr:hover td {
    background: rgba(250, 250, 250, 0.04);
}

/* Search input used in grid toolbar */
.fleet-search .mud-input-control-input-container {
    border-radius: calc(var(--mud-default-borderradius) - 2px);
}

.fleet-search .mud-input-outlined {
    background: rgba(250, 250, 250, 0.03);
}

/* Row actions: show on hover */
.fleet-grid-actions .mud-icon-button {
    opacity: 0;
    transition: opacity 120ms ease;
}

.fleet-grid tbody tr:hover .fleet-grid-actions .mud-icon-button {
    opacity: 1;
}