teamsiso/src/TeamsISO.App/Themes/WildDragonTheme.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib">

    <!--
        TeamsISO design system — Wild Dragon brand × Microsoft Teams layout.

        Brand reference: wilddragon.net
            Primary canvas:   #0a0a0a
            Accent cyan:      #97EDF0
            Secondary blue:   #9AE0FD
            Coral (errors):   #FB819C
            Earth (warnings): #423825
            Fonts:            Inter (primary), JetBrains Mono

        Layout reference: Microsoft Teams desktop
            - Left rail (72px) for app icon + primary nav
            - Top header inside content area
            - Card-based main panel with rounded corners (8-12px)
            - Subtle elevation through tone, not heavy shadows
            - Avatar circles for participants

        Inter is not a Windows system font; we list it first and fall back to
        Segoe UI Variable Display (Windows 11) and Segoe UI. JetBrains Mono
        falls back to Cascadia Mono.
    -->

    <!-- ════ Spacing (8px grid) ════ -->
    <sys:Double x:Key="Space.XS">4</sys:Double>
    <sys:Double x:Key="Space.S">8</sys:Double>
    <sys:Double x:Key="Space.M">12</sys:Double>
    <sys:Double x:Key="Space.L">16</sys:Double>
    <sys:Double x:Key="Space.XL">24</sys:Double>
    <sys:Double x:Key="Space.XXL">32</sys:Double>

    <!-- ════ Radii (Teams uses 6/8/12) ════ -->
    <CornerRadius x:Key="Radius.S">6</CornerRadius>
    <CornerRadius x:Key="Radius.M">8</CornerRadius>
    <CornerRadius x:Key="Radius.L">12</CornerRadius>
    <CornerRadius x:Key="Radius.XL">16</CornerRadius>

    <!-- ════ Wild Dragon palette (dark) ════ -->
    <SolidColorBrush x:Key="Wd.Canvas"           Color="#0A0A0A"/>
    <SolidColorBrush x:Key="Wd.Rail"             Color="#080808"/>
    <SolidColorBrush x:Key="Wd.Surface"          Color="#141414"/>
    <SolidColorBrush x:Key="Wd.SurfaceElevated"  Color="#1C1C1C"/>
    <SolidColorBrush x:Key="Wd.SurfaceHover"     Color="#2A2A2A"/>
    <SolidColorBrush x:Key="Wd.SurfaceActive"    Color="#363636"/>
    <SolidColorBrush x:Key="Wd.Border"           Color="#262626"/>
    <SolidColorBrush x:Key="Wd.BorderStrong"     Color="#383838"/>
    <!--
        Dedicated stronger hover background for buttons, used when the default
        SurfaceHover doesn't read clearly enough on the dark cards. Combined
        with a cyan accent border on hover this gives every interactive
        button an unmistakable affordance regardless of what surface it
        sits on (canvas, card, or rail).
    -->
    <SolidColorBrush x:Key="Wd.Button.HoverBg"   Color="#33333A"/>
    <SolidColorBrush x:Key="Wd.Button.PressBg"   Color="#3F3F47"/>

    <SolidColorBrush x:Key="Wd.Text.Primary"     Color="#F5F5F5"/>
    <SolidColorBrush x:Key="Wd.Text.Secondary"   Color="#A3A3A3"/>
    <SolidColorBrush x:Key="Wd.Text.Tertiary"    Color="#6B6B6B"/>
    <SolidColorBrush x:Key="Wd.Text.Disabled"    Color="#404040"/>

    <!-- Accents from wilddragon.net -->
    <SolidColorBrush x:Key="Wd.Accent.Cyan"      Color="#97EDF0"/>
    <SolidColorBrush x:Key="Wd.Accent.CyanHover" Color="#B5F2F4"/>
    <SolidColorBrush x:Key="Wd.Accent.CyanMuted" Color="#1B3537"/>
    <SolidColorBrush x:Key="Wd.Accent.Blue"      Color="#9AE0FD"/>
    <SolidColorBrush x:Key="Wd.Accent.Coral"     Color="#FB819C"/>
    <SolidColorBrush x:Key="Wd.Accent.CoralBg"   Color="#3A1922"/>

    <SolidColorBrush x:Key="Wd.Status.Live"      Color="#4ADE80"/>
    <SolidColorBrush x:Key="Wd.Status.LiveBg"    Color="#13261A"/>
    <SolidColorBrush x:Key="Wd.Status.Warn"      Color="#FBBF24"/>
    <SolidColorBrush x:Key="Wd.Status.Error"     Color="#FB819C"/>

    <!-- ════ Typography ════ -->
    <!--
        Inter is bundled as Assets\Fonts\Inter.ttf (Variable, OFL — rsms/inter v3.19).
        The pack URI loads it from this assembly's resources at runtime so we don't
        depend on the user having Inter installed system-wide. Fallback chain to
        Segoe UI if the resource is somehow missing.
    -->
    <FontFamily x:Key="Wd.Font.Sans">pack://application:,,,/Assets/Fonts/#Inter, Inter, Segoe UI Variable Display, Segoe UI, sans-serif</FontFamily>
    <FontFamily x:Key="Wd.Font.Mono">pack://application:,,,/Assets/Fonts/#JetBrains Mono, JetBrains Mono, Cascadia Mono, Consolas, monospace</FontFamily>

    <Style x:Key="Wd.Text.Title" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
    </Style>

    <Style x:Key="Wd.Text.Heading" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
    </Style>

    <Style x:Key="Wd.Text.Body" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
    </Style>

    <Style x:Key="Wd.Text.Subtle" TargetType="TextBlock" BasedOn="{StaticResource Wd.Text.Body}">
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Secondary}"/>
    </Style>

    <Style x:Key="Wd.Text.Caption" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="11"/>
        <Setter Property="FontWeight" Value="Medium"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Tertiary}"/>
        <Setter Property="Typography.Capitals" Value="AllSmallCaps"/>
    </Style>

    <Style x:Key="Wd.Text.Mono" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Mono}"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Secondary}"/>
    </Style>

    <Style TargetType="TextBlock" BasedOn="{StaticResource Wd.Text.Body}"/>

    <!-- ════ Buttons ════ -->
    <!-- Ghost: bordered, transparent fill -->
    <Style x:Key="Wd.Button.Ghost" TargetType="Button">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="FontWeight" Value="Medium"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource Wd.BorderStrong}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="14,8"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Bd"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{StaticResource Radius.M}"
                            SnapsToDevicePixels="True">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Margin="{TemplateBinding Padding}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!--
                            Hover: strong fill change PLUS a cyan accent border.
                            The dual-cue (lighter surface + bright border) is
                            what gives the affordance an unmistakable read on
                            the dark canvas — a background-only change in this
                            palette is too subtle to spot at a glance.
                        -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
                        </Trigger>
                        <!--
                            Keyboard focus ring (Tab-navigation). FocusVisualStyle
                            is x:Null on all themed buttons — without this trigger
                            you'd have NO visual cue when tab-cycling through.
                            Match the hover treatment so mouse + keyboard land
                            on the same affordance.
                        -->
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.PressBg}"/>
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.CyanHover}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{StaticResource Wd.Text.Disabled}"/>
                            <Setter TargetName="Bd" Property="Opacity" Value="0.6"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Primary: cyan-on-black for the brand action -->
    <Style x:Key="Wd.Button.Primary" TargetType="Button" BasedOn="{StaticResource Wd.Button.Ghost}">
        <Setter Property="Background" Value="{StaticResource Wd.Accent.Cyan}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
        <Setter Property="Foreground" Value="#0A0A0A"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Bd"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{StaticResource Radius.M}">
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Margin="{TemplateBinding Padding}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Accent.CyanHover}"/>
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.CyanHover}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--
        Window-caption buttons: minimize / maximize / close. Match the Windows 11
        Teams look — slim 46x32, hover-tinted, Close turns red on hover.
    -->
    <Style x:Key="Wd.Button.Caption" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Width" Value="46"/>
        <Setter Property="Height" Value="32"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Bd" Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.PressBg}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="Wd.Button.CaptionClose" TargetType="Button" BasedOn="{StaticResource Wd.Button.Caption}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Bd" Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="#C42B1C"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="#A52A1F"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Rail-icon button: square 48x48, used on the Teams-style left rail -->
    <Style x:Key="Wd.Button.RailIcon" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Secondary}"/>
        <Setter Property="Width" Value="48"/>
        <Setter Property="Height" Value="48"/>
        <Setter Property="Margin" Value="0,4"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Bd"
                            Background="{TemplateBinding Background}"
                            CornerRadius="{StaticResource Radius.M}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!-- Rail icons sit on Wd.Rail (#080808) — a darker
                             surface than Wd.Canvas. Use Wd.Button.HoverBg so
                             the affordance reads clearly. -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
                            <Setter Property="Foreground" Value="{StaticResource Wd.Accent.Cyan}"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
                            <Setter Property="Foreground" Value="{StaticResource Wd.Accent.Cyan}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.PressBg}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ISO toggle: pill, status-coded -->
    <Style x:Key="Wd.Button.IsoToggle" TargetType="Button">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="11"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
        <Setter Property="Background" Value="{StaticResource Wd.SurfaceHover}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Wd.BorderStrong}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="14,6"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="MinWidth" Value="84"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Bd"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="999">
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Margin="{TemplateBinding Padding}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!--
                            IsoToggle has a status-coded background (LIVE cyan,
                            ERROR coral, NO SIGNAL amber) set inline by the row
                            template. Hover *keeps* that background color (so
                            the at-a-glance status read is preserved) and adds
                            a thicker cyan-tinted border so the affordance is
                            unmistakable. We don't override Background here so
                            the data-trigger setter wins.
                        -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.CyanHover}"/>
                            <Setter TargetName="Bd" Property="BorderThickness" Value="2"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.CyanHover}"/>
                            <Setter TargetName="Bd" Property="BorderThickness" Value="2"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
                            <Setter TargetName="Bd" Property="BorderThickness" Value="2"/>
                            <Setter TargetName="Bd" Property="Opacity" Value="0.85"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ════ TextBox ════ -->
    <Style x:Key="Wd.TextBox.Default" TargetType="TextBox">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
        <Setter Property="Background" Value="{StaticResource Wd.Surface}"/>
        <Setter Property="CaretBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
        <Setter Property="SelectionBrush" Value="{StaticResource Wd.Accent.CyanMuted}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Wd.Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="12,9"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Border x:Name="Bd"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{StaticResource Radius.M}">
                        <ScrollViewer x:Name="PART_ContentHost"
                                      Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="Center"
                                      Focusable="False"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.BorderStrong}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="TextBox" BasedOn="{StaticResource Wd.TextBox.Default}"/>

    <!-- ════ ComboBox ════ -->
    <Style x:Key="Wd.ComboToggle" TargetType="ToggleButton">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="ClickMode" Value="Press"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Path HorizontalAlignment="Right"
                          VerticalAlignment="Center"
                          Margin="0,0,14,0"
                          Data="M 0,0 L 4,4 L 8,0 Z"
                          Fill="{StaticResource Wd.Text.Secondary}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="ComboBox">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
        <Setter Property="Background" Value="{StaticResource Wd.Surface}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Wd.Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="12,9"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid>
                        <Border x:Name="Bd"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="{StaticResource Radius.M}"/>
                        <ToggleButton Style="{StaticResource Wd.ComboToggle}"
                                      IsChecked="{Binding IsDropDownOpen,
                                          RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                                          IsHitTestVisible="False"
                                          VerticalAlignment="Center"
                                          Content="{TemplateBinding SelectionBoxItem}"
                                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"/>
                        <Popup IsOpen="{TemplateBinding IsDropDownOpen}"
                               Placement="Bottom"
                               AllowsTransparency="True"
                               Focusable="False"
                               PopupAnimation="None">
                            <Border Background="{StaticResource Wd.SurfaceElevated}"
                                    BorderBrush="{StaticResource Wd.BorderStrong}"
                                    BorderThickness="1"
                                    CornerRadius="{StaticResource Radius.M}"
                                    MinWidth="{TemplateBinding ActualWidth}"
                                    MaxHeight="280"
                                    Margin="0,4,0,0">
                                <ScrollViewer><ItemsPresenter/></ScrollViewer>
                            </Border>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.BorderStrong}"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocusWithin" Value="True">
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="ComboBoxItem">
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
        <Setter Property="Padding" Value="12,9"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Border x:Name="Bd"
                            Background="Transparent"
                            CornerRadius="{StaticResource Radius.S}"
                            Margin="4,2"
                            Padding="{TemplateBinding Padding}">
                        <ContentPresenter/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.SurfaceHover}"/>
                        </Trigger>
                        <Trigger Property="IsHighlighted" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.SurfaceHover}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ════ CheckBox ════ -->
    <Style TargetType="CheckBox">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Padding" Value="10,0,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <StackPanel Orientation="Horizontal">
                        <Border x:Name="Box"
                                Width="18" Height="18"
                                BorderBrush="{StaticResource Wd.BorderStrong}"
                                BorderThickness="1"
                                Background="{StaticResource Wd.Surface}"
                                CornerRadius="4"
                                VerticalAlignment="Center">
                            <Path x:Name="Tick"
                                  Data="M 4,9 L 7.5,12.5 L 14,5"
                                  Stroke="#0A0A0A" StrokeThickness="2"
                                  StrokeStartLineCap="Round"
                                  StrokeEndLineCap="Round"
                                  Visibility="Collapsed"/>
                        </Border>
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                                          VerticalAlignment="Center"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="Box" Property="Background" Value="{StaticResource Wd.Accent.Cyan}"/>
                            <Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
                            <Setter TargetName="Tick" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Box" Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ════ TabControl (settings panel) ════ -->
    <!--
        Lightweight, flush tabs that match the dark surface. Underline-on-active
        rather than the WPF default raised-border, so the tab strip reads as a
        section header rather than a separate widget.
    -->
    <Style TargetType="TabControl" x:Key="Wd.TabControl">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabControl">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Border Grid.Row="0"
                                BorderBrush="{StaticResource Wd.Border}"
                                BorderThickness="0,0,0,1">
                            <TabPanel x:Name="HeaderPanel"
                                      IsItemsHost="True"
                                      Background="Transparent"/>
                        </Border>
                        <ContentPresenter Grid.Row="1"
                                          ContentSource="SelectedContent"
                                          Margin="0,16,0,0"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="TabItem" x:Key="Wd.TabItem">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="11"/>
        <Setter Property="FontWeight" Value="Medium"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Tertiary}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="0,8,0,10"/>
        <Setter Property="Margin" Value="0,0,20,0"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ContentPresenter x:Name="Content"
                                          Grid.Row="0"
                                          ContentSource="Header"
                                          HorizontalAlignment="Left"
                                          VerticalAlignment="Center"
                                          TextBlock.FontFamily="{TemplateBinding FontFamily}"
                                          TextBlock.FontSize="{TemplateBinding FontSize}"
                                          TextBlock.FontWeight="{TemplateBinding FontWeight}"
                                          TextBlock.Foreground="{TemplateBinding Foreground}"
                                          Margin="{TemplateBinding Padding}"/>
                        <Rectangle x:Name="Underline"
                                   Grid.Row="1"
                                   Height="2"
                                   Fill="{StaticResource Wd.Accent.Cyan}"
                                   Visibility="Hidden"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Underline" Property="Visibility" Value="Visible"/>
                            <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="{StaticResource Wd.Text.Secondary}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ════ Card ════ -->
    <Style x:Key="Wd.Card" TargetType="Border">
        <Setter Property="Background" Value="{StaticResource Wd.Surface}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Wd.Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="CornerRadius" Value="{StaticResource Radius.L}"/>
        <Setter Property="Padding" Value="16"/>
    </Style>

    <!-- ════ DataGrid (re-skinned, Teams-style) ════ -->
    <Style TargetType="DataGrid">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="GridLinesVisibility" Value="None"/>
        <Setter Property="HeadersVisibility" Value="Column"/>
        <Setter Property="RowHeight" Value="56"/>
        <Setter Property="RowBackground" Value="Transparent"/>
        <Setter Property="AlternatingRowBackground" Value="Transparent"/>
        <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="CanUserAddRows" Value="False"/>
        <Setter Property="CanUserDeleteRows" Value="False"/>
        <Setter Property="CanUserResizeRows" Value="False"/>
        <Setter Property="SelectionMode" Value="Single"/>
        <Setter Property="SelectionUnit" Value="FullRow"/>
        <Setter Property="AutoGenerateColumns" Value="False"/>
    </Style>

    <Style TargetType="DataGridColumnHeader">
        <Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
        <Setter Property="FontSize" Value="11"/>
        <Setter Property="FontWeight" Value="Medium"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Tertiary}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource Wd.Border}"/>
        <Setter Property="BorderThickness" Value="0,0,0,1"/>
        <Setter Property="Padding" Value="14,12"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Typography.Capitals" Value="AllSmallCaps"/>
    </Style>

    <Style TargetType="DataGridRow">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource Wd.Border}"/>
        <Setter Property="BorderThickness" Value="0,0,0,1"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{StaticResource Wd.SurfaceHover}"/>
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="{StaticResource Wd.SurfaceElevated}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="DataGridCell">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Padding" Value="14,0"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <Border Background="{TemplateBinding Background}"
                            Padding="{TemplateBinding Padding}">
                        <ContentPresenter VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ════ ScrollBar (slim, dark-theme-native) ════ -->
    <!--
        The default WPF ScrollBar template is a chunky Win9x affair (line-up
        / line-down arrow buttons + a 3D thumb) that clashes hard with the
        dark canvas. Replace with a slim, transparent track + thumb pattern
        like Edge / VS Code / GitHub use: thumb is barely visible at rest,
        pops a tone brighter on hover/drag. Track-clicks still page-scroll
        (the RepeatButton does the work) but render as invisible hit zones.
    -->
    <Style x:Key="Wd.ScrollBar.Thumb" TargetType="Thumb">
        <Setter Property="Background" Value="{StaticResource Wd.BorderStrong}"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Border x:Name="Bd"
                            Background="{TemplateBinding Background}"
                            CornerRadius="4"
                            Margin="2"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Text.Tertiary}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Accent.Cyan}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Invisible page-scroll RepeatButton (clicks above/below thumb still page-scroll). -->
    <Style x:Key="Wd.ScrollBar.PageButton" TargetType="RepeatButton">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border Background="{TemplateBinding Background}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="ScrollBar">
        <Setter Property="Width" Value="10"/>
        <Setter Property="MinWidth" Value="10"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollBar">
                    <Grid x:Name="Bg" Background="{TemplateBinding Background}">
                        <Track x:Name="PART_Track" IsDirectionReversed="True">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
                                              Command="ScrollBar.PageUpCommand"/>
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource Wd.ScrollBar.Thumb}"/>
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
                                              Command="ScrollBar.PageDownCommand"/>
                            </Track.IncreaseRepeatButton>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Height" Value="10"/>
                <Setter Property="MinHeight" Value="10"/>
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ScrollBar">
                            <Grid x:Name="Bg" Background="{TemplateBinding Background}">
                                <Track x:Name="PART_Track" IsDirectionReversed="False">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
                                                      Command="ScrollBar.PageLeftCommand"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource Wd.ScrollBar.Thumb}"/>
                                    </Track.Thumb>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
                                                      Command="ScrollBar.PageRightCommand"/>
                                    </Track.IncreaseRepeatButton>
                                </Track>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!-- ════ Avatar (28px circle with initials) ════ -->
    <Style x:Key="Wd.Avatar" TargetType="Border">
        <Setter Property="Width" Value="32"/>
        <Setter Property="Height" Value="32"/>
        <Setter Property="CornerRadius" Value="16"/>
        <Setter Property="Background" Value="{StaticResource Wd.Accent.CyanMuted}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Wd.Accent.Cyan}"/>
        <Setter Property="BorderThickness" Value="1"/>
    </Style>

    <!-- ════ Status pill ════ -->
    <Style x:Key="Wd.Pill" TargetType="Border">
        <Setter Property="Background" Value="{StaticResource Wd.SurfaceElevated}"/>
        <Setter Property="CornerRadius" Value="999"/>
        <Setter Property="Padding" Value="10,4"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
    </Style>

</ResourceDictionary>