/*Common css for all clients; color customization*/

/*
We can deal with 1 client color easily: use the color on buttons and menus and some important content; 
derived a toned down secondary color from the primary color for some backgrounds.

However if a client requests us to use 2 colors, we need to exam and test with the colors carefully: 
sometimes the 2 colors are equally strong, sometimes 1 primary/strong color and 1 secondary/weak color.
A unified solution needs to consider this caveat.
Currently we take this approach:
if there's 1 color, we derive the secondary color from the primary color; 
if client requests to use 2 colors, tone down the secondary color to a certain level of saturation and lightness 
 */
:root {
     /* We can use client's secondary color or calculate from primary color */
     /* Only set client's secondary color in branding.css if necessary */
    --c-applied-primary-color: var(--c-primary-color, #003f60);
    
    --c-derived-secondary-color: hsl(from var(--c-applied-primary-color) h calc(s * 0.60) calc(l * 0.9));
    --c-selected-secondary-color: var(--c-secondary-color, var(--c-derived-secondary-color));
    /* Normalize to a certain level of saturation and lightness */
    --c-applied-secondary-color: hsl(from var(--c-selected-secondary-color) h 50 80); 


    --c-secondary-bg-light: hsl(from var(--c-applied-secondary-color) h 60 90);
    --c-secondary-border-light: hsl(from var(--c-applied-secondary-color) h 50 80);

    --c-secondary-bg-light-1: hsl(from var(--c-applied-secondary-color) h 60 95);
    --c-secondary-border-light-1: hsl(from var(--c-applied-secondary-color) h 50 90);

    --c-secondary-bg-light-2: hsl(from var(--c-applied-secondary-color) h 60 98);
    --c-secondary-border-light-2: hsl(from var(--c-applied-secondary-color) h 50 95);

    /* This complementary color does not look good for some clients. Try client's secondary color */
    --primary-complementary-color: hsl(from var(--c-applied-primary-color) calc(h + 180) s l);
    /* Optionally, we can try two split complementary colors. */
    --primary-complementary-color-1: hsl(from var(--c-applied-primary-color) calc(h + 150) s l );
    --primary-complementary-color-2: hsl(from var(--c-applied-primary-color) calc(h + 210) s l);
    /* --primary-complementary-color:var(--bs-secondary-color); */
    --primary-complementary-color-hover: hsl(from var(--primary-complementary-color) h calc(s * 0.75) calc(l * 1.25));


    /* redefined variables for bootstrap and kendo themes based on client branding colors */
    /* bootstrap color variables */
    --bs-primary-color:var(--c-applied-primary-color);
    --bs-primary-bg-subtle: hsl(from var(--bs-primary-color) h 60 50);
    --bs-primary-border-subtle: hsl(from var(--bs-primary-color) h 50 40);

    --bs-secondary-color: var(--c-applied-secondary-color);
    /* --bs-secondary-color: hsl(from var(--c-applied-secondary-color) h calc(s * 0.8) calc(l * 1.5)); */
    --bs-secondary-bg-subtle: hsl(from var(--c-applied-secondary-color) h 60 50);
    --bs-secondary-border-subtle: hsl(from var(--c-applied-secondary-color) h 50 40);


    /* Kendo color variables */
    /* --kendo-color-primary: var(--bs-primary-bg-subtle); */
    --kendo-color-primary: var(--bs-primary-color);
    /* contrast-color function is not supported in some browsers */
    /* --kendo-color-on-primary: contrast-color(var(--kendo-color-primary));  */
    --kendo-color-on-primary: white;
    --kendo-color-primary-hover: var(--primary-complementary-color-hover);

    --kendo-color-surface-alt: var(--c-secondary-bg-light-2);

    /* more Telerik color vars to override if necessary*/
    /* --kendo-color-app-surface: var(--c-secondary-bg-light-2);
    --kendo-color-on-app-surface: #424242;
    --kendo-color-subtle: #666666;
    --kendo-color-surface: var(--c-secondary-bg-light-1);
    --kendo-color-surface-alt: var(--c-secondary-bg-light);
    --kendo-color-border: var(--c-secondary-border-light);
    --kendo-color-border-alt: var(--c-secondary-border-light-1); */
}

.primaryColor {
    color: var(--c-applied-primary-color);
}

.secondaryColor {
    color: var(--c-applied-secondary-color);
}

.TelerikCardBGColor {
    background-color: var(--c-secondary-bg-light-1);
}

.btn-primary {
    color: #fff;
    background-color: var(--c-applied-primary-color);
    border-color: var(--c-applied-primary-color);
}

/* we can create a general styling for active/hover on dark/black text */
.active-on-dark, .hover-on-dark:hover {
    background-color: var(--primary-complementary-color-hover);
    color: white;
}

.accordion.active, .accordion:hover {
    background-color: var(--primary-complementary-color-hover);
    color: white;
}

 .menu-container {
    background-color: var(--c-applied-primary-color);
 }

    .menu-container li {
        a span:hover, a.active > span {
            background-color: white;
            color: var(--c-applied-primary-color);
        }
    }

.k-drawer {
    background-color: var(--c-applied-primary-color);
}

.k-drawer-content a {
    color: var(--c-applied-primary-color);
}

.border-start-primary {
    border-left-color: var(--primary-complementary-color-1) !important;
}

.border-start-secondary {
    border-left-color: var(--primary-complementary-color-2) !important;
}