/* Audio Book Dark Theme - Based on Image Color Scheme */

:root {
    /* Primary Colors from Image */
    --primary-white: #FFFFFF;
    --primary-yellow: #F8BB15;
    --secondary-yellow: #FFB543;
    --off-white: #FFFDFD;
    --medium-gray: #7A7A7A;
    --dark-gray: #252424;
    --black: #000000;
    --very-dark-gray: #020000;
    --light-gray-border: #7D7979;
    --text-gray: #858585;
    --lighter-gray: #B8B3B3;
    --lightest-gray: #C5C5C5;
    --golden-brown: #CD9C36;
    --notification-red: #D80000;
    --very-light-gray: #F0F0F0;
    --almost-white: #F6FAFB;
}

/* Dark Theme Background */
body {
    background-color: var(--black) !important;
    color: var(--primary-white) !important;
}

/* Main Container Dark Theme */
.main-container {
    background-color: var(--black) !important;
}
.content{
    background-color: var(--black) !important;

}
/* Sidebar Dark Theme */
.sidebar {
    background-color: var(--very-dark-gray) !important;
    border-right: 1px solid var(--light-gray-border) !important;
}

.sidebar .menu .list li a {
    color: var(--primary-white) !important;
}

.sidebar .menu .list li a:hover {
    background-color: var(--dark-gray) !important;
    color: var(--primary-yellow) !important;
}

.sidebar .menu .list li.active > a {
    background-color: var(--primary-yellow) !important;
    color: var(--black) !important;
}

/* Header Dark Theme */
.header {
    background-color: var(--dark-gray) !important;
    border-bottom: 1px solid var(--light-gray-border) !important;
}

.header .navbar-brand {
    color: var(--primary-white) !important;
}

.header .navbar-nav .nav-link {
    color: var(--primary-white) !important;
}

/* Cards Dark Theme */
.card {
    background-color: var(--dark-gray) !important;
    border: 1px solid var(--light-gray-border) !important;
    color: var(--primary-white) !important;
}

.card .card-header {
    background-color: var(--very-dark-gray) !important;
    border-bottom: 1px solid var(--light-gray-border) !important;
    color: var(--primary-white) !important;
}

.card .card-body {
    background-color: var(--dark-gray) !important;
    color: var(--primary-white) !important;
}

/* Tables Dark Theme */
.table {
    background-color: var(--dark-gray) !important;
    color: var(--primary-white) !important;
}

.table thead th {
    color: var(--primary-white) !important;
    border-color: var(--light-gray-border) !important;
}

.table tbody tr {
    background-color: var(--dark-gray) !important;
    color: var(--primary-white) !important;
}

.table tbody tr:hover {
    background-color: var(--very-dark-gray) !important;
}

.table tbody td {
    border-color: var(--light-gray-border) !important;
    color: var(--primary-white) !important;
}

/* Buttons Dark Theme */
.btn-primary {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
    color: var(--black) !important;
}

.btn-primary:hover {
    background-color: var(--secondary-yellow) !important;
    border-color: var(--secondary-yellow) !important;
    color: var(--black) !important;
}

.btn-success {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
    color: var(--black) !important;
}

.btn-success:hover {
    background-color: var(--secondary-yellow) !important;
    border-color: var(--secondary-yellow) !important;
    color: var(--black) !important;
}

.btn-warning {
    background-color: var(--secondary-yellow) !important;
    border-color: var(--secondary-yellow) !important;
    color: var(--black) !important;
}

.btn-warning:hover {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
    color: var(--black) !important;
}

.btn-info {
    background-color: var(--medium-gray) !important;
    border-color: var(--medium-gray) !important;
    color: var(--primary-white) !important;
}

.btn-info:hover {
    background-color: var(--text-gray) !important;
    border-color: var(--text-gray) !important;
    color: var(--primary-white) !important;
}

.btn-secondary {
    background-color: var(--medium-gray) !important;
    border-color: var(--medium-gray) !important;
    color: var(--primary-white) !important;
}

.btn-secondary:hover {
    background-color: var(--text-gray) !important;
    border-color: var(--text-gray) !important;
    color: var(--primary-white) !important;
}

/* Badges Dark Theme */
.badge-primary {
    background-color: var(--primary-yellow) !important;
    color: var(--black) !important;
}

.badge-success {
    background-color: var(--primary-yellow) !important;
    color: var(--black) !important;
}

.badge-info {
    background-color: var(--medium-gray) !important;
    color: var(--primary-white) !important;
}

.badge-warning {
    background-color: var(--secondary-yellow) !important;
    color: var(--black) !important;
}

.badge-danger {
    background-color: var(--notification-red) !important;
    color: var(--primary-white) !important;
}

/* Form Elements Dark Theme */
.form-control {
    background-color: var(--dark-gray) !important;
    border: 1px solid var(--light-gray-border) !important;
    color: var(--primary-white) !important;
}

.form-control:focus {
    background-color: var(--dark-gray) !important;
    border-color: var(--primary-yellow) !important;
    color: var(--primary-white) !important;
    box-shadow: 0 0 0 0.2rem rgba(248, 187, 21, 0.25) !important;
}

.form-control::placeholder {
    color: var(--text-gray) !important;
}

/* Modal Dark Theme */
.modal-content {
    background-color: var(--dark-gray) !important;
    color: var(--primary-white) !important;
}

.modal-header {
    background-color: var(--very-dark-gray) !important;
    border-bottom: 1px solid var(--light-gray-border) !important;
    color: var(--primary-white) !important;
}

.modal-footer {
    background-color: var(--very-dark-gray) !important;
    border-top: 1px solid var(--light-gray-border) !important;
}

.modal-body {
    background-color: var(--dark-gray) !important;
    color: var(--primary-white) !important;
}

/* Navigation Dark Theme */
.navbar {
    background-color: var(--dark-gray) !important;
}

.navbar-brand {
    color: var(--primary-white) !important;
}

.navbar-nav .nav-link {
    color: var(--primary-white) !important;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-yellow) !important;
}

/* Breadcrumb Dark Theme */
.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item a {
    color: var(--primary-yellow) !important;
}

.breadcrumb-item.active {
    color: var(--text-gray) !important;
}

/* Statistics Cards Dark Theme */
.icon-in-bg.bg-indigo {
    background-color: var(--primary-yellow) !important;
}

.icon-in-bg.bg-green {
    background-color: var(--secondary-yellow) !important;
}

.icon-in-bg.bg-orange {
    background-color: var(--golden-brown) !important;
}

.icon-in-bg.bg-red {
    background-color: var(--notification-red) !important;
}

/* Text Colors */
.text-primary {
    color: var(--primary-yellow) !important;
}

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

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

/* Links Dark Theme */
a {
    color: var(--primary-yellow) !important;
}

a:hover {
    color: var(--secondary-yellow) !important;
}

/* Dropdown Dark Theme */
.dropdown-menu {
    background-color: var(--dark-gray) !important;
    border: 1px solid var(--light-gray-border) !important;
}

.dropdown-item {
    color: var(--primary-white) !important;
}

.dropdown-item:hover {
    background-color: var(--very-dark-gray) !important;
    color: var(--primary-yellow) !important;
}

/* Alert Dark Theme */
.alert-info {
    background-color: var(--very-dark-gray) !important;
    border-color: var(--light-gray-border) !important;
    color: var(--primary-white) !important;
}

/* Custom Scrollbar Dark Theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-yellow);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-yellow);
}

/* Mobile Menu Button */
.btn-primary.btn-icon.mobile_menu {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
    color: var(--black) !important;
}

/* Right Toggle Button */
.right_icon_toggle_btn {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
    color: var(--black) !important;
}

/* Audio Player Dark Theme */
audio {
    background-color: var(--dark-gray) !important;
    border: 1px solid var(--light-gray-border) !important;
}

/* Hover Effects */
.card:hover {
    box-shadow: 0 4px 8px rgba(248, 187, 21, 0.3) !important;
}

.btn:hover {
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* Focus States */
.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(248, 187, 21, 0.25) !important;
}

/* Active States */
.btn.active {
    background-color: var(--secondary-yellow) !important;
    border-color: var(--secondary-yellow) !important;
    color: var(--black) !important;
}