/* Normal (Light) Mode */
html {
    background-color: #edeef0;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body{
    background-color: #edeef0;
}
nav{
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

.logo-header{
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}
.card {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
}
.navbar-brand{
    color: #121212;
    margin-right: 152px !important;
    display: inline-block;
    font-size: 1rem !important;
}
.card-title{
    color: #121212;
}
.input-c{
    font-size: 24px;
}
.total-view{
    color: white !important;
    background-color: #2f2f2f !important;
    margin-bottom: 8px;
    padding: .5rem;
    border-radius: 10px;
    font-weight: 500;
    display: inline-block !important;
}
.logo-header{
    margin-right: 0 !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    left: unset !important;
}

.main-header{
    left: unset !important;
}
.logo{
    left:unset !important ;
}
.navbar-toggler{
    justify-self: start;
}
button {
    background-color: #f8f9fa;
    color: #333;
}
@media (min-width: 728px) {
    .sidebar{
        display: none;
    }
    .logo-header #theme-toggle{
        display: none;
    }
    .navbar-brand{
        display: flex !important;
        flex-direction: none !important;
        justify-content: none !important;
        margin-right: 0 !important;
        font-size: 2rem !important;

    }
    .logo-header{
        display: flex !important;
        flex-direction: none !important;
        justify-content: none !important;
        margin-right: 0 !important;
    }
    ::-webkit-scrollbar {
        width: 8px !important; /* Dikey scrollbar genişliği */
        height: 8px !important; /* Yatay scrollbar yüksekliği */
        background-color: #1e1e2f !important; /* Arka plan rengi */
    }
    
    /* Scrollbar'ın sürgüsü (thumb) */
    ::-webkit-scrollbar-thumb {
        background-color: #3b3b4f !important; /* Thumb rengi */
        border-radius: 4px !important; /* Köşeleri yuvarlama */
    }
    
    /* Scrollbar'ın sürgüsüne hover efekti */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #505063 !important; /* Hover sırasında thumb rengi */
    }
    
    /* Scrollbar'ın köşeleri */
    ::-webkit-scrollbar-corner {
        background-color: #1e1e2f !important; /* Scrollbar köşesi */
    }
    
    
    


    
}
.alert.alert-success{
    background-color: #fff;
}

/* Dark Mode */
html.dark-mode {
    background-color: #282828;
    color: #fff;
}
.container-login.container{
    background-color: #fff !important;
    border-radius: 12px;
}
html.dark-mode .container-login.container{
    background-color: #121212 !important;
    border: none !important;
}
html.dark-mode body{
    background-color: #282828;
}
html.dark-mode .navbar-brand{
    color: #fff;
    letter-spacing: 1.2 !important;
}
html.dark-mode .table{
    color: #fff;
}
html.dark-mode .form-controls{
    background-color: #3f3f3f;
}
html.dark-mode .alert.alert-success{
    background-color: #3f3f3f;
}
html.dark-mode .sidebar{
    background-color: #282828;
}
html.dark-mode .card {
    background-color: #2f2f2f;
    color: #fff;
    border: none;
}
html.dark-mode .main-header{
    background-color: #282828;
}
html
html.dark-mode button {
    background-color: #3c3c3c;
    color: #fff;
}


html.dark-mode h3{
    color: #fff;
}
html.dark-mode .card .card-title,
html.dark-mode .card .card-category {
    color: #ddd;
}
html.dark-mode label{
    color: #fff !important;
}
html.dark-mode input,
html.dark-mode select {
    background-color: #121212;
    padding: 12px !important;
    padding-left:12px !important;
    color: #fff !important;
}
html.dark-mode input:focus{
    background-color: #121212 !important;

}

/* Button Icon Color for Sun and Moon */

.hero-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.hero-section .text-white {
    color: #333 !important;
}

.hero-section .text-gray {
    color: #666 !important;
}

.hero-section .bg-dark-soft {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

.hero-section .floating-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.hero-section .btn-outline-light {
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
}

.hero-section .btn-outline-light:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

/* Dark Mode */
html.dark-mode .hero-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

html.dark-mode .hero-section .text-white {
    color: #fff !important;
}

html.dark-mode .hero-section .text-gray {
    color: #a0a0a0 !important;
}

html.dark-mode .hero-section .bg-dark-soft {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

html.dark-mode .hero-section .floating-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

html.dark-mode .hero-section .btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

html.dark-mode .hero-section .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}