/*
    Primary color öncelikle web.config den okunur. 
    Eğer kullanıcın DB sinde tanımlı bir renk varsa o gelir, yoksa web.configdeki geçerli olur.

    <add key="PrimaryColor" value="#C80C0F" / >
    <add key="PrimaryHoverColor" value="#F9E6E7" / >


    Member custom Css app.Master da aşağıdaki kodu ile aktive edilir.
    
    Private Sub InitializePage()
        AppHead.Title = Session("MemberAppTitle")
        Dim styleTag As New HtmlGenericControl("style")
        styleTag.Attributes("type") = "text/css"
        styleTag.InnerHtml = Session("MemberCustomCss")
        AppBody.Controls.Add(styleTag)
    End Sub


    Session("MemberCustomCss") değeri ise kullanıcı SignIn olduğunda okunur. 

    Session("MemberPrimaryColor") = Convert.ToString(.Item("PrimaryColor"))
    Session("MemberPrimaryHoverColor") = Convert.ToString(.Item("PrimaryHoverColor"))
    Session("MemberAppTitle") = Convert.ToString(.Item("AppTitle"))
    Session("MemberCustomCss") = GetAppCss(Session("MemberPrimaryColor"), Session("MemberPrimaryHoverColor"))

    DB de sadece renk olarak Primary ve PrimaryHover color tutulur.
    CommonModules.vb altındaki function  --color-primary ve --color-primary-hover değerlerini dinamik olarak oluşturur.

    Public Function GetAppCss(primaryColor As String, primaryHoverColor As String) As String
        Return $"
            :root {{
                --color-primary: {primaryColor};
                --color-primary-hover: {primaryHoverColor};
            }}
            .app-bg-primary {{
                background-color: {primaryColor};
            }}
            .app-bg-primary-hover {{
                background-color: {primaryHoverColor};
            }}"
    End Function

*/

:root {
    --color-light: #EEEEEE;
    --color-body: #212529;
    --color-zuwizu: #242727;
    --bg-color-zuwizu: #f0f5f5;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.btn:hover,
.btn:focus {
    border-color: var(--color-light) !important;
    box-shadow: 0 0 0.3rem 0.1rem var(--color-primary) !important;
}

.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    font-weight: 500 !important;
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    font-weight: 500 !important;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--color-light) !important;
    }


.link-primary {
    color: var(--color-primary) !important;
    font-weight: 500 !important;
}

    .link-primary:hover,
    .link-primary:focus {
        color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }

.border-primary {
    border-color: var(--color-primary) !important;
}

    .border-primary:hover,
    .border-primary:focus {
        border-color: var(--color-light) !important;
    }

.text-primary {
    color: var(--color-primary) !important;
}

.text-danger {
    font-size: 0.90rem !important;
}

.small {
    font-size: 0.775rem !important;
}

.form-label {
    font-weight: 500 !important;
    margin-bottom: 0.1rem !important;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0.05rem 0.05rem var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.form-check-input {
    background-color: var(--color-light) !important;
    border-color: var(--color-primary) !important;
}

    .form-check-input:focus,
    .form-check-input:hover {
        box-shadow: 0 0 0.3rem 0.1rem var(--color-primary) !important;
    }

    .form-check-input:checked {
        background-color: var(--color-primary) !important;
    }


.navbar-toggler {
    border: none !important;
}

    .navbar-toggler:hover,
    .navbar-toggler:focus {
        text-decoration: none !important;
        box-shadow: 0 0 0 var(--color-light) !important;
    }

a {
    color: white !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.card-body {
    color: var(--color-body) !important;
}

.card:hover {
    box-shadow: 0 0 0.5rem 0.05rem lightgray !important;
}

.accordion-button {
    background-color: var(--color-light) !important;
    padding: 0.375rem 0.75rem !important;
}

    .accordion-button:focus {
        background-color: var(--color-light) !important;
        box-shadow: 0 0 0.3rem 0.1rem var(--color-primary) !important;
    }

    .accordion-button:hover {
        box-shadow: 0 0 0.3rem 0.1rem var(--color-primary) !important;
    }

.table-row:hover {
    background-color: var(--color-primary-hover) !important;
}

.badge {
    font-weight: 500 !important;
    padding: 0.375rem 0.75rem !important;
}

.bg-secondary{
    background-color:#C9C9C9 !important ;
}

.bg-light{
    background-color: var(--color-light)!important;
}

/*score düşük yüksek iconları için */
.text-high{
    color:red;
}

.text-low{
    color:mediumblue;
}

/*SinglePage Master için ZuWiZu */
.bg-zuwizu {
    background-color: var(--bg-color-zuwizu) !important;
}

.btn-zuwizu {
    background-color: var(--color-zuwizu);
    margin:0;
    padding: 0.35rem;
    height: 2.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-color: var(--color-zuwizu);
    border-width: 10px;
    border: solid;
    border-radius: 0.375rem;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

.link-zuwizu {
    color: var(--color-zuwizu) !important;
    font-weight: 500 !important;
    text-align: center;
    cursor: pointer;
}

    .link-zuwizu:hover {
        border-color: var(--color-zuwizu) !important;
           }

.text-zuwizu {
    color: var(--color-zuwizu) !important;
}


.form-zuwizu-control:focus,
.form-zuwizu-select:focus {
    box-shadow: 0 0 0.05rem 0.05rem var(--color-zuwizu) !important;
    border-color: var(--color-zuwizu) !important;
}

.form-zuwizu-check-input {
    border-color: var(--color-zuwizu) !important;
}

    .form-zuwizu-check-input:focus,
    .form-zuwizu-check-input:hover {
        box-shadow: 0 0 0.3rem 0.1rem var(--color-zuwizu) !important;
    }

    .form-zuwizu-check-input:checked {
        background-color: var(--color-zuwizu) !important;
    }

.chart-fluid {
    width: 100% !important; /* konteynerin tamamı */
    height: auto !important; /* orana göre yükseklik */
    max-width: 100vw; /* tam ekranı geçmesin */
    display: block;
}

p {
    font-size: 14px; /*Normali 18*/
}

li {
    font-size: 14px; /*Normali 18*/
}

.btn-likert {
    font-size: 0.9rem; /* dilediğin ölçüye çekebilirsin */
}