/* Add these rules at the top of your custom-themes.css file */
fluent-switch::part(control) {
    background: var(--accent-fill-rest);
}

fluent-switch[checked]::part(control) {
    background: var(--accent-fill-rest);
}

fluent-switch:hover::part(control) {
    background: var(--accent-fill-hover);
}

fluent-switch[checked]:hover::part(control) {
    background: var(--accent-fill-hover);
}

/* Your existing CSS rules remain the same */

/* Base theme styles to ensure proper application */
:root {
    color-scheme: light dark;
}

/* Theme application to FluentDesignTheme and root elements */
.custom-light,
.custom-light fluent-design-system-provider {
    color-scheme: light;
    background-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

.custom-dark,
.custom-dark fluent-design-system-provider {
    color-scheme: dark;
    background-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

/* Custom Light Theme */
.custom-light {
    --accent-fill-rest: #FF5432;
    --accent-fill-hover: #FF6B4D;
    --accent-fill-active: #E64A2D;
    --accent-fill-focus: #FF5432;
    --accent-foreground-rest: #FF5432;
    --accent-foreground-hover: #FF6B4D;
    --accent-foreground-active: #E64A2D;
    --accent-foreground-focus: #FF5432;
    --neutral-fill-rest: #FFFFFF;
    --neutral-fill-hover: #F5F5F5;
    --neutral-fill-active: #E6E6E6;
    --neutral-fill-focus: #FFFFFF;
    --neutral-foreground-rest: #242424;
    --neutral-foreground-hover: #1F1F1F;
    --neutral-foreground-active: #1A1A1A;
    --neutral-stroke-rest: #CCCCCC;
    --neutral-stroke-hover: #B3B3B3;
    --neutral-stroke-active: #999999;
    --neutral-layer-1: #FFFFFF;
    --neutral-layer-2: #F5F5F5;
    --neutral-layer-3: #EBEBEB;
    --neutral-layer-4: #E0E0E0;
}

/* Custom Dark Theme */
.custom-dark {
    --accent-fill-rest: #FF5432;
    --accent-fill-hover: #FF6B4D;
    --accent-fill-active: #E64A2D;
    --accent-fill-focus: #FF5432;
    --accent-foreground-rest: #FF5432;
    --accent-foreground-hover: #FF6B4D;
    --accent-foreground-active: #E64A2D;
    --accent-foreground-focus: #FF5432;
    --neutral-fill-rest: #2B2B2B;
    --neutral-fill-hover: #3B3B3B;
    --neutral-fill-active: #4B4B4B;
    --neutral-fill-focus: #2B2B2B;
    --neutral-foreground-rest: #FFFFFF;
    --neutral-foreground-hover: #F5F5F5;
    --neutral-foreground-active: #E6E6E6;
    --neutral-stroke-rest: #666666;
    --neutral-stroke-hover: #808080;
    --neutral-stroke-active: #999999;
    --neutral-layer-1: #1F1F1F;
    --neutral-layer-2: #2B2B2B;
    --neutral-layer-3: #373737;
    --neutral-layer-4: #404040;
}

/* Custom Blue Theme */
.custom-blue {
    --accent-fill-rest: #FF5432;
    --accent-fill-hover: #FF6B4D;
    --accent-fill-active: #E64A2D;
    --accent-fill-focus: #FF5432;
    --accent-foreground-rest: #FF5432;
    --accent-foreground-hover: #FF6B4D;
    --accent-foreground-active: #E64A2D;
    --accent-foreground-focus: #FF5432;
    --neutral-fill-rest: #FDF1EE;
    --neutral-fill-hover: #FCE4DE;
    --neutral-fill-active: #FAD7CE;
    --neutral-fill-focus: #FDF1EE;
    --neutral-foreground-rest: #242424;
    --neutral-foreground-hover: #1F1F1F;
    --neutral-foreground-active: #1A1A1A;
    --neutral-stroke-rest: #FFD6CC;
    --neutral-stroke-hover: #FFC5B3;
    --neutral-stroke-active: #FFB499;
    --neutral-layer-1: #FFFFFF;
    --neutral-layer-2: #FDF1EE;
    --neutral-layer-3: #FCE4DE;
    --neutral-layer-4: #FAD7CE;
}

/* Theme Switcher styles */
.theme-switcher {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.theme-label {
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

/* Layout styles */
.header-container {
    display: flex;
    align-items: center;
    width: 100%;


    max-width: 100vw;         /* Prevent exceeding viewport width */
    padding: 0 20px;           /* Add horizontal padding */
    /*box-sizing: border-box;    !* Include padding in width *!*/
    /*overflow: hidden;*/


}

.app-title {
    font-size: 1.2rem;
    font-weight: 500;
}