html {
    /* Keep viewport width stable when MudBlazor toggles body scrollbar for dialogs. */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--mud-typography-default-family);
    font-size: 1rem !important;
    background:
        radial-gradient(circle at top right,
            color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) 0%,
            transparent 40%),
        radial-gradient(circle at bottom left,
            color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent) 0%,
            transparent 42%),
        var(--mud-palette-background);
    min-height: 100vh;
}

/* MudBlazor adds inline right padding when locking body scroll for dialogs.
   On the landing page this creates a visible right strip and content jump. */
body.scroll-locked {
    padding-right: 0 !important;
}

.modern-appbar .mud-typography,
.modern-side-panel .mud-typography,
.modern-main-content .mud-typography,
.modern-main-content .mud-button-label,
.modern-main-content .mud-input,
.modern-main-content .mud-input-slot {
    font-size: inherit !important;
    font-weight: inherit !important;
}

.modern-shell {
    /* Shared brand palette (matches landing page .lp tokens) */
    --sys-brand: #1b3444;
    --sys-brand-2: #213a52;
    --sys-brand-3: #2a4d65;
    --sys-accent: #4c90b4;
    --sys-accent-2: #7ec7e6;
    --sys-ink: #16222e;
    --sys-soft: #5c6b79;
    --sys-line: rgba(27, 52, 68, 0.12);
    --sys-surface: #ffffff;
    --sys-surface-2: #eef2f6;
    min-height: 100vh;
}

.modern-appbar.mud-appbar {
    --mud-appbar-height: 72px;
    --topbar-gradient: linear-gradient(90deg, #1B3444 0%, #213A52 52%, #2A4D65 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    backdrop-filter: blur(10px);
    background-color: #213A52;
    background-image: var(--topbar-gradient);
    background: var(--topbar-gradient) !important;
    color: #f8fafc;
    height: 72px;
    min-height: 72px !important;
    padding-top: 6px;
    padding-bottom: 6px;
}

.modern-appbar .mud-button-root,
.modern-appbar .mud-icon-button {
    border-radius: var(--mud-default-borderradius);
}

.modern-appbar .mud-button-label,
.modern-appbar .mud-menu-label,
.modern-appbar .mud-icon-button-label,
.modern-appbar .mud-input-control,
.modern-appbar .mud-typography {
    color: #f8fafc;
}

.modern-appbar .mud-menu {
    margin-right: 12px;
}

.modern-appbar .logo-separator {
    display: flex;
    align-items: center;
    margin-right: 14px;
    padding-right: 10px;
    border-right: 1px solid color-mix(in srgb, #ffffff 36%, transparent);
}

.modern-appbar .mud-menu .mud-button-root {
    min-height: 44px;
    padding-left: 14px;
    padding-right: 14px;
}

.modern-appbar .mud-menu .mud-button-label {
    font-size: 0.9rem;
    font-weight: 500;
}

.modern-appbar .mud-menu .mud-button-root .mud-icon-root {
    font-size: 1.35rem;
    margin-right: 4px;
}

.modern-appbar .mud-menu .mud-button-root:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modern-appbar .menu-companies .mud-icon-root {
    color: #fb923c;
}

.modern-appbar .menu-lifts .mud-icon-root {
    color: #2f9fd8;
}

.modern-appbar .menu-revisions .mud-icon-root {
    color: #34d399;
}

.modern-appbar .menu-parts .mud-icon-root {
    color: #facc15;
}

.modern-appbar .menu-employees .mud-icon-root {
    color: #a78bfa;
}

.modern-appbar .menu-companies .mud-button-label,
.modern-appbar .menu-lifts .mud-button-label,
.modern-appbar .menu-revisions .mud-button-label,
.modern-appbar .menu-parts .mud-button-label,
.modern-appbar .menu-employees .mud-button-label {
    color: #f8fafc !important;
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

.modern-appbar .menu-companies .mud-button-root,
.modern-appbar .menu-lifts .mud-button-root,
.modern-appbar .menu-revisions .mud-button-root,
.modern-appbar .menu-parts .mud-button-root,
.modern-appbar .menu-employees .mud-button-root {
    text-transform: none;
}

.modern-appbar .menu-admin .mud-icon-root {
    color: #ef4444;
}

.modern-appbar .top-profile-shell {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 0;
    padding-left: 0;
    margin-left: auto;
    padding-right: 0;
}

.modern-appbar .top-session-timer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 8px;
}

.modern-appbar .top-session-timer-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #c7d9ea;
    flex: 0 0 auto;
}

.modern-appbar .top-session-timer-icon .mud-icon-root {
    font-size: 1.25rem;
}

.modern-appbar .top-session-timer-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.modern-appbar .top-session-timer-label {
    color: #9fc1de;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.modern-appbar .top-session-timer-value {
    color: #f8fafc;
    font-size: 1.04rem;
    font-weight: 800;
    margin-top: 2px;
}

.modern-appbar .top-profile-icon.mud-icon-button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #ffffff 28%, transparent);
    background: rgba(255, 255, 255, 0.06);
    color: #d9e9f7;
}

.modern-appbar .top-profile-icon--plain.mud-icon-button {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.modern-appbar .top-profile-icon--plain.mud-icon-button:hover,
.modern-appbar .top-profile-icon--plain.mud-icon-button:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

.modern-appbar .top-profile-settings-menu .mud-button-root,
.modern-appbar .top-profile-settings-menu .mud-icon-button {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 44px;
    width: 44px;
    padding: 0;
    border-radius: 12px;
    color: #d9e9f7 !important;
}

.modern-appbar .top-profile-settings-menu .mud-button-root:hover,
.modern-appbar .top-profile-settings-menu .mud-icon-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.modern-appbar .top-profile-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: 6px;
    padding-left: 12px;
    border-left: 1px solid color-mix(in srgb, #ffffff 34%, transparent);
}

.modern-appbar .top-profile-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #2d79ef 0%, #1f5fca 100%);
    color: #ffffff;
    flex: 0 0 auto;
}

.modern-appbar .top-profile-avatar .mud-icon-root {
    font-size: 1.35rem;
}

.modern-appbar .top-profile-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.modern-appbar .top-profile-name {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.1;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-appbar .top-profile-role {
    margin-top: 3px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #9fc1de;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-appbar .top-profile-settings-menu {
    margin-right: 0;
}

.modern-appbar .top-profile-logout {
    margin-left: 4px;
    margin-right: -4px;
}

.modern-side-panel .company-menu-item .mud-list-item-icon,
.modern-side-panel .company-menu-item .mud-icon-root {
    color: var(--sys-brand-3) !important;
}

.modern-side-panel .company-menu-item:not(.lift-menu-item) .mud-list-item-icon {
    min-width: 20px;
    margin-left: 0;
    margin-right: 10px;
    transform: translateX(25px);
}

.modern-side-panel .company-menu-item:not(.lift-menu-item) .mud-list-item-text {
    transform: translateX(25px);
}

.modern-side-panel .company-list-title {
    color: var(--sys-brand) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
}

.modern-side-panel .side-title-row {
    position: relative;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.modern-side-panel .side-back-button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.modern-side-panel .side-back-button.mud-button-root,
.modern-side-panel .side-back-button .mud-icon-root {
    color: inherit !important;
}

.modern-side-panel .side-panel-title {
    width: 100%;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

.modern-side-panel .side-panel-title.with-back-button {
    padding-left: 40px;
    padding-right: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-side-panel .mud-input-control {
    flex: 0 0 auto;
}

.modern-side-panel .mud-input-control .mud-input-outlined {
    border-color: var(--sys-line) !important;
    border-width: 1.5px;
}

.modern-side-panel .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--sys-accent) !important;
    border-width: 2px !important;
}

.modern-side-panel .mud-input.mud-input-outlined:focus-within .mud-input-label,
.modern-side-panel .mud-input-control.mud-input-focused .mud-input-label,
.modern-side-panel .mud-input-control.mud-input-focused .mud-input-adornment {
    color: var(--sys-accent) !important;
}

.modern-side-panel .mud-input-control input,
.modern-side-panel .mud-input-control .mud-input-slot,
.modern-side-panel .mud-input-control .mud-input-adornment {
    color: #1f2937 !important;
}

.modern-side-panel .mud-input-control input::placeholder {
    color: #4b5563 !important;
    opacity: 1;
}

.modern-side-panel .company-menu-item:not(.lift-menu-item):hover {
    background: color-mix(in srgb, var(--sys-accent) 12%, transparent);
}

.mud-popover .mud-menu,
.mud-popover .mud-menu.mud-paper {
    background: linear-gradient(90deg, #203A53 0%, #304B64 52%, #203347 100%) !important;
    color: #e2e8f0 !important;
    border-radius: 0 !important;
    border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
    border-top: 0;
    margin-top: -1px;
    box-shadow: 0 10px 22px rgba(7, 20, 48, 0.35);
    font-family: var(--mud-typography-default-family) !important;
    min-width: 360px;
}

.mud-popover,
.mud-popover .mud-paper,
.mud-popover .mud-menu,
.mud-popover .mud-list,
.mud-popover .mud-menu-item {
    border-radius: 0 !important;
}

.mud-popover .mud-menu .mud-list {
    padding-top: 4px;
    padding-bottom: 4px;
}

.mud-popover .mud-menu-item {
    min-height: 30px;
    padding-left: 16px;
    padding-right: 30px !important;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 0.9rem;
    transition: background-color 0.15s ease;
}

.mud-popover .mud-menu-item:hover {
    background: color-mix(in srgb, #3b82f6 16%, transparent);
}

.mud-popover .mud-menu .mud-list-item-icon,
.mud-popover .mud-menu .mud-menu-item-icon,
.mud-popover .mud-menu .mud-list-item-text,
.mud-popover .mud-menu .mud-typography {
    color: #e2e8f0 !important;
    font-family: var(--mud-typography-default-family) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

.mud-popover.modern-submenu-popover .mud-menu-item,
.mud-popover.modern-submenu-popover .mud-menu-item .mud-list-item-text,
.mud-popover.modern-submenu-popover .mud-menu-item .mud-typography {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

.mud-popover .mud-menu .mud-list-item-icon {
    min-width: 28px;
}

.mud-popover.modern-submenu-popover .submenu-companies .mud-list-item-icon,
.mud-popover.modern-submenu-popover .submenu-companies .mud-menu-item-icon,
.mud-popover.modern-submenu-popover .submenu-companies .mud-icon-root { color: #fb923c !important; }
.mud-popover.modern-submenu-popover .submenu-lifts .mud-list-item-icon,
.mud-popover.modern-submenu-popover .submenu-lifts .mud-menu-item-icon,
.mud-popover.modern-submenu-popover .submenu-lifts .mud-icon-root { color: #0d6efd !important; }
.mud-popover.modern-submenu-popover .submenu-revisions .mud-list-item-icon,
.mud-popover.modern-submenu-popover .submenu-revisions .mud-menu-item-icon,
.mud-popover.modern-submenu-popover .submenu-revisions .mud-icon-root { color: #34d399 !important; }
.mud-popover.modern-submenu-popover .submenu-parts .mud-list-item-icon,
.mud-popover.modern-submenu-popover .submenu-parts .mud-menu-item-icon,
.mud-popover.modern-submenu-popover .submenu-parts .mud-icon-root { color: #facc15 !important; }
.mud-popover.modern-submenu-popover .submenu-employees .mud-list-item-icon,
.mud-popover.modern-submenu-popover .submenu-employees .mud-menu-item-icon,
.mud-popover.modern-submenu-popover .submenu-employees .mud-icon-root { color: #a78bfa !important; }
.mud-popover.modern-submenu-popover .submenu-admin .mud-list-item-icon,
.mud-popover.modern-submenu-popover .submenu-admin .mud-menu-item-icon,
.mud-popover.modern-submenu-popover .submenu-admin .mud-icon-root { color: #ef4444 !important; }

.modern-drawer {
    border-right: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}

.modern-drawer .mud-drawer-content {
    background: var(--sys-surface);
}

.modern-side-panel {
    background: var(--sys-surface);
    padding-top: 30px !important;
}

.modern-side-panel.side-panel-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.modern-side-panel .side-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.modern-side-panel .not-found-alert.mud-alert {
    margin-top: 6px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 28%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    border-radius: var(--mud-default-borderradius);
}

.modern-side-panel .not-found-alert .mud-alert-message {
    font-weight: 500;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 72%, var(--mud-palette-error) 28%);
}

.modern-side-panel .not-found-alert .mud-alert-icon,
.modern-side-panel .not-found-alert .mud-alert-icon .mud-icon-root {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 72%, var(--mud-palette-error) 28%);
}

.modern-side-panel .side-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
}

.modern-main-content {
    background: transparent;
}

.modern-main-container {
    padding-top: 1.5rem;
}

#pager .form-pager-bullets .mud-icon-root,
#pager .form-pager-bullets .mud-icon-button .mud-svg-icon {
    color: #213A52 !important;
    fill: #213A52 !important;
}

#MainPlaceholder {
    border-radius: var(--mud-default-borderradius);
}

.drawer-edge-toggle {
    position: fixed;
    top: calc(var(--mud-appbar-height) + 30px);
    z-index: 1201;
    width: 18px;
    height: 52px;
    border-radius: 0 6px 6px 0 !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    background: #90ABC3;
    backdrop-filter: blur(6px);
    box-shadow: var(--mud-elevation-4);
}

.drawer-edge-toggle:hover,
.drawer-edge-toggle.mud-icon-button:hover,
.drawer-edge-toggle.mud-button-root:hover {
    background-color: #213A52 !important;
}

.drawer-edge-toggle:active,
.drawer-edge-toggle.mud-icon-button:active,
.drawer-edge-toggle.mud-button-root:active,
.drawer-edge-toggle:focus,
.drawer-edge-toggle:focus-visible,
.drawer-edge-toggle.mud-icon-button:focus,
.drawer-edge-toggle.mud-icon-button:focus-visible {
    background-color: #213A52 !important;
}

.drawer-edge-toggle::before,
.drawer-edge-toggle::after,
.drawer-edge-toggle.mud-button-root::before,
.drawer-edge-toggle.mud-button-root::after {
    background: transparent !important;
}

.drawer-edge-toggle .mud-icon-root {
    font-size: 1.5rem;
    color: #ffffff !important;
}

.drawer-edge-toggle.open {
    left: 380px;
    border-left: 0;
}

.drawer-edge-toggle.closed {
    left: 0;
}