/* Black and Gold Theme Overrides - Class Based */
:root {
    --gold: #ffc451;
    --gold-hover: #ffbb38;
    --black: #151515;
    --dark-grey: #1a1a1a;
    --light-grey: #adb5bd;
}

/* Preloader - Global but conditional visibility via JS */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: var(--black);
    display: none; /* Hidden by default, shown by inline script if theme is black-gold */
    justify-content: center;
    align-items: center;
}

body.theme-black-gold #preloader {
    display: flex;
}

#preloader:before {
    content: "";
    position: fixed;
    width: 60px;
    height: 60px;
    border: 6px solid var(--gold);
    border-top-color: var(--black);
    border-bottom-color: var(--black);
    border-radius: 50%;
    animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* AdminLTE Overrides - Only active when .theme-black-gold is on body */

body.theme-black-gold .main-header, 
body.theme-black-gold .navbar, 
body.theme-black-gold .bg-white, 
body.theme-black-gold .bg-light {
    background-color: var(--black) !important;
    color: var(--gold) !important;
}

body.theme-black-gold .navbar {
    border-bottom: 1px solid var(--gold) !important;
}

body.theme-black-gold .navbar-light .navbar-nav .nav-link, 
body.theme-black-gold .navbar-light .navbar-brand,
body.theme-black-gold .text-dark {
    color: var(--gold) !important;
}

body.theme-black-gold .navbar-light .navbar-nav .nav-link:hover,
body.theme-black-gold .navbar-light .navbar-brand:hover {
    color: var(--gold-hover) !important;
}

/* Sidebar */
body.theme-black-gold .main-sidebar {
    background-color: var(--black) !important;
}

body.theme-black-gold .brand-link {
    border-bottom: 1px solid var(--gold) !important;
    background-color: var(--black) !important;
    color: var(--gold) !important;
}

body.theme-black-gold .sidebar a {
    color: var(--gold) !important;
}

body.theme-black-gold .nav-sidebar .nav-link.active {
    background-color: var(--gold) !important;
    color: var(--black) !important;
}

/* Content Wrapper */
body.theme-black-gold .content-wrapper {
    background-color: var(--dark-grey) !important;
    color: white;
}

/* Cards */
body.theme-black-gold .card {
    background-color: var(--black) !important;
    border: 1px solid var(--gold) !important;
    color: white !important;
}

body.theme-black-gold .card-header {
    border-bottom: 1px solid var(--gold) !important;
    color: var(--gold) !important;
}

/* Buttons */
body.theme-black-gold .btn-primary {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--black) !important;
    font-weight: bold;
}

body.theme-black-gold .btn-primary:hover {
    background-color: var(--gold-hover) !important;
    border-color: var(--gold-hover) !important;
}

/* Footer */
body.theme-black-gold .main-footer {
    background-color: var(--black) !important;
    border-top: 1px solid var(--gold) !important;
    color: var(--light-grey);
}

/* Links */
body.theme-black-gold a {
    color: var(--gold);
}

body.theme-black-gold a:hover {
    color: var(--gold-hover);
    text-decoration: none;
}

/* Hide existing AdminLTE preloader ONLY when black-gold is active */
body.theme-black-gold .preloader {
    display: none !important;
}

/* Theme Switcher Styles */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    position: fixed;
    top: 10px;
    right: 70px; /* Adjust based on navbar items */
    z-index: 10001;
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 50px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 16px;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--gold);
}

input:checked + .slider:before {
    transform: translateX(26px);
}