<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <Style src="project://database/Assets/UI/Map/MapLegend.uss?fileID=7433441132597879392&amp;guid=3d0abc87938a3d14c950a29cd58e78e0&amp;type=3#MapLegend" />
    <Style src="project://database/Assets/UI/Map/TravelUI.uss?fileID=7433441132597879392&amp;guid=1e7ef30c959791b42ae6ef3a6741c9bd&amp;type=3#TravelUI" />
    <Style src="project://database/Assets/UI/MapScene/TeamOverview.uss?fileID=7433441132597879392&amp;guid=2e6aff258c310e4488de20ba5563dccf&amp;type=3#TeamOverview" />
    
    <!-- Map Legend (Left Side) -->
    <ui:VisualElement name="MapLegend" enabled="true" class="legend-container" style="display: flex;">
        <ui:Label text="Map Legend" class="legend-title" />
        <ui:VisualElement class="legend-items">
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box ocean-color" />
                <ui:Label text="Ocean / Large Water Bodies" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box river-color" />
                <ui:Label text="Rivers / Lakes" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box plain-color" />
                <ui:Label text="Plains / Grasslands" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box forest-color" />
                <ui:Label text="Forests" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box mountain-color" />
                <ui:Label text="Mountains" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box town-color" />
                <ui:Label text="Towns / Cities" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box village-color" />
                <ui:Label text="Villages" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box road-color" />
                <ui:Label text="Roads" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box dock-color" />
                <ui:Label text="Docks / Ports" class="legend-text" />
            </ui:VisualElement>
        </ui:VisualElement>
        <ui:VisualElement class="controls-info">
            <ui:Label text="Controls:" class="controls-title" />
            <ui:Label text="WASD / Arrow Keys: Move Camera" class="controls-text" />
            <ui:Label text="Mouse Wheel: Zoom In/Out" class="controls-text" />
            <ui:Label text="N: Toggle Name Labels" class="controls-text" />
            <ui:Label text="L: Toggle Legend" class="controls-text" />
            <ui:Label text="Mouse Hover: Show Tooltips" class="controls-text" />
        </ui:VisualElement>
    </ui:VisualElement>
    
    <!-- Team Overview Panel (Right Side) -->
    <ui:VisualElement name="TeamOverviewPanel" class="team-overview-container" style="position: absolute; top: 20px; right: 20px; width: 300px; background-color: rgba(45, 45, 45, 0.95); border-color: rgb(80, 80, 80); border-width: 2px; border-radius: 8px; padding: 15px; max-height: 80%; overflow: hidden;">
        <ui:VisualElement name="Header" class="team-header" style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom-width: 1px; border-bottom-color: rgb(80, 80, 80);">
            <ui:Label text="Your Team" class="team-title" style="color: rgb(220, 220, 220); font-size: 16px; -unity-font-style: bold; margin: 0;" />
            <ui:VisualElement name="HeaderButtons" class="header-buttons" style="flex-direction: row; gap: 5px;">
                <ui:Button text="Manage Team" name="ManageTeamButton" class="nav-button secondary-button" style="font-size: 10px; padding: 4px 8px; background-color: rgb(70, 70, 70); color: white; border-radius: 4px; border-width: 1px; border-color: rgb(100, 100, 100);" />
                <ui:Button text="Save Game" name="SaveGameButton" class="nav-button primary-button" style="font-size: 10px; padding: 4px 8px; background-color: rgb(60, 120, 60); color: white; border-radius: 4px; border-width: 1px; border-color: rgb(80, 140, 80);" />
            </ui:VisualElement>
        </ui:VisualElement>
        
        <ui:ScrollView name="TeamMembersList" class="team-members-scroll" style="flex-grow: 1; max-height: 400px;">
            <!-- Team members will be added dynamically -->
        </ui:ScrollView>
        
        <ui:VisualElement name="TeamStats" class="team-stats" style="margin-top: 10px; padding-top: 8px; border-top-width: 1px; border-top-color: rgb(80, 80, 80);">
            <ui:Label text="Team Summary" class="stats-title" style="color: rgb(200, 200, 200); font-size: 12px; -unity-font-style: bold; margin-bottom: 5px;" />
            <ui:VisualElement class="stats-row" style="flex-direction: row; justify-content: space-between; margin-bottom: 2px;">
                <ui:Label text="Members: " class="stat-label" style="color: rgb(180, 180, 180); font-size: 11px;" />
                <ui:Label text="0" name="MemberCountLabel" class="stat-value" style="color: rgb(220, 220, 220); font-size: 11px;" />
            </ui:VisualElement>
            <ui:VisualElement class="stats-row" style="flex-direction: row; justify-content: space-between; margin-bottom: 2px;">
                <ui:Label text="Total Gold: " class="stat-label" style="color: rgb(180, 180, 180); font-size: 11px;" />
                <ui:Label text="0" name="TotalGoldLabel" class="stat-value" style="color: rgb(255, 215, 0); font-size: 11px;" />
            </ui:VisualElement>
            <ui:VisualElement class="stats-row" style="flex-direction: row; justify-content: space-between; margin-bottom: 2px;">
                <ui:Label text="Avg Level: " class="stat-label" style="color: rgb(180, 180, 180); font-size: 11px;" />
                <ui:Label text="1" name="AverageLevelLabel" class="stat-value" style="color: rgb(220, 220, 220); font-size: 11px;" />
            </ui:VisualElement>
        </ui:VisualElement>
    </ui:VisualElement>
    <ui:VisualElement name="TravelContainer" class="travel-container" style="display: none; visibility: visible; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; background-size: 100% 100%;">
        <ui:VisualElement name="TravelPanel" class="travel-panel" style="background-color: rgb(45, 45, 45); border-color: rgb(80, 80, 80); border-width: 2px; border-radius: 8px; padding: 20px; min-width: 300px; max-width: 400px; min-height: 200px; height: 450px;">
            <ui:VisualElement name="TravelHeader" class="travel-header" style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 10px; cursor: move; background-color: rgba(60, 60, 60, 0.8); margin: -20px -20px 10px -20px; padding: 10px 20px; border-top-left-radius: 6px; border-top-right-radius: 6px;">
                <ui:Label text="Travel Planning" class="travel-title" style="margin: 0; flex-grow: 1; color: rgb(220, 220, 220); font-size: 14px; -unity-font-style: bold;" />
                <ui:Button text="×" name="CloseButton" class="close-button" style="width: 24px; height: 24px; margin: 0; padding: 0; background-color: transparent; border-width: 0; color: rgb(200, 200, 200); font-size: 16px; -unity-font-style: bold;" />
            </ui:VisualElement>
            <ui:VisualElement name="TravelInfo" class="travel-info" style="flex-grow: 0; -unity-background-scale-mode: stretch-to-fill; height: 140px; background-size: 100% 100%;">
                <ui:Label text="Distance: -- leagues" name="DistanceLabel" class="info-label" />
                <ui:Label text="Travel Time: -- hours" name="TimeLabel" class="info-label" />
                <ui:Label text="Special Costs: None" name="SpecialCostsLabel" class="info-label special-costs" style="max-height: 64px;" />
            </ui:VisualElement>
            <ui:VisualElement name="WarningSection" class="warning-section">
                <ui:Label text="Insufficient funds for this journey!" name="InsufficientFundsLabel" class="insufficient-funds" style="display: none;" />
            </ui:VisualElement>
            <ui:VisualElement name="RouteOptions" class="route-options" style="height: 160px;">
                <ui:Label text="Route Preferences:" class="section-title" />
                <ui:VisualElement class="toggle-container">
                    <ui:Toggle name="AvoidTunnelsToggle" text="Avoid Tunnels" class="route-toggle" />
                    <ui:Toggle name="AvoidFerriesToggle" text="Avoid Ferries" class="route-toggle" />
                </ui:VisualElement>
                <ui:Button text="Find Alternative Route" name="AlternativeRouteButton" class="travel-button alternative-button" />
            </ui:VisualElement>
            <ui:VisualElement name="ButtonContainer" class="button-container">
                <ui:Button text="Start Journey" name="StartTravelButton" class="travel-button primary-button" />
                <ui:Button text="Cancel" name="CancelTravelButton" class="travel-button secondary-button" />
            </ui:VisualElement>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>
