/* ==========================================================
   DHINDORA MUSIC GALLERY
   DARK MODE CSS
==========================================================*/

/* Smooth Transition */

body,
.card,
.gallery-card,
.gallery-header,
footer,
.search-box input,
.filter-buttons button,
.folder-title,
.upload-date,
#backToTop{

    transition:all .35s ease;

}

/* ==========================================================
   BODY
==========================================================*/

body.dark{

    background:#0f172a;

    color:#f8fafc;

}

/* ==========================================================
   HEADER
==========================================================*/

body.dark .gallery-header{

    background:#1e293b;

    box-shadow:0 8px 25px rgba(0,0,0,.45);

}

body.dark .gallery-title{

    color:#ffffff;

}

body.dark .gallery-subtitle{

    color:#cbd5e1;

}

/* ==========================================================
   SEARCH BOX
==========================================================*/

body.dark .search-box input{

    background:#334155;

    color:#ffffff;

    border:1px solid #475569;

    box-shadow:none;

}

body.dark .search-box input::placeholder{

    color:#94a3b8;

}

/* ==========================================================
   FILTER BUTTONS
==========================================================*/

body.dark .filter-buttons button{

    background:#334155;

    color:#ffffff;

    border:1px solid #475569;

}

body.dark .filter-buttons button:hover{

    background:#dc2626;

    color:#ffffff;

}

/* Active Filter */

body.dark .filter-buttons button.active{

    background:#dc2626;

    color:#ffffff;

}

/* ==========================================================
   FOLDER TITLE
==========================================================*/

body.dark .folder-title{

    color:#ffffff;

    border-left:6px solid #ef4444;

}

/* ==========================================================
   PHOTO COUNT
==========================================================*/

body.dark .photo-count{

    color:#cbd5e1;

}

/* ==========================================================
   CARD
==========================================================*/

body.dark .gallery-card{

    background:#1e293b;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

body.dark .gallery-card:hover{

    box-shadow:0 18px 40px rgba(0,0,0,.55);

}

/* ==========================================================
   CARD BODY
==========================================================*/

body.dark .card-body{

    background:#1e293b;

}

/* ==========================================================
   DATE
==========================================================*/

body.dark .upload-date{

    color:#cbd5e1;

}

/* ==========================================================
   IMAGE OVERLAY
==========================================================*/

body.dark .overlay{

    background:rgba(0,0,0,.55);

}

body.dark .overlay i{

    color:#ffffff;

}

/* ==========================================================
   FOOTER
==========================================================*/

body.dark footer{

    background:#111827;

    color:#cbd5e1;

}

/* ==========================================================
   BACK TO TOP
==========================================================*/

body.dark #backToTop{

    background:#dc2626;

}

body.dark #backToTop:hover{

    background:#ef4444;

}

/* ==========================================================
   LOADER
==========================================================*/

body.dark #loader{

    background:#0f172a;

}

/* ==========================================================
   SKELETON
==========================================================*/

body.dark .skeleton{

    background:linear-gradient(
        90deg,
        #1f2937 25%,
        #374151 50%,
        #1f2937 75%
    );

    background-size:400%;

}

/* ==========================================================
   LINKS
==========================================================*/

body.dark a{

    color:#f8fafc;

    text-decoration:none;

}

body.dark a:hover{

    color:#ef4444;

}

/* ==========================================================
   BOOTSTRAP INPUT FOCUS
==========================================================*/

body.dark .form-control:focus{

    background:#334155;

    color:#ffffff;

    border-color:#ef4444;

    box-shadow:0 0 0 .2rem rgba(239,68,68,.25);

}

/* ==========================================================
   SCROLLBAR
==========================================================*/

body.dark ::-webkit-scrollbar{

    width:10px;

}

body.dark ::-webkit-scrollbar-track{

    background:#1e293b;

}

body.dark ::-webkit-scrollbar-thumb{

    background:#dc2626;

    border-radius:30px;

}

body.dark ::-webkit-scrollbar-thumb:hover{

    background:#ef4444;

}

/* ==========================================================
   GLIGHTBOX
==========================================================*/

.goverlay{

    background:rgba(0,0,0,.95) !important;

}

/* ==========================================================
   SELECTION
==========================================================*/

body.dark ::selection{

    background:#ef4444;

    color:#ffffff;

}

/* ==========================================================
   BADGES
==========================================================*/

body.dark .badge{

    background:#dc2626;

    color:#ffffff;

}

/* ==========================================================
   DROPDOWN (Future Ready)
==========================================================*/

body.dark .dropdown-menu{

    background:#1e293b;

    color:#ffffff;

}

body.dark .dropdown-item{

    color:#ffffff;

}

body.dark .dropdown-item:hover{

    background:#334155;

}

/* ==========================================================
   MODAL (Future Ready)
==========================================================*/

body.dark .modal-content{

    background:#1e293b;

    color:#ffffff;

}

/* ==========================================================
   TABLE (Future Ready)
==========================================================*/

body.dark table{

    color:#ffffff;

}

/* ==========================================================
   FADE EFFECT
==========================================================*/

body.dark .fade-up{

    animation:fadeDark .5s ease;

}

@keyframes fadeDark{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}