/* Dark Mode Styles for Taskify Application */

/* Apply dark mode when html has dark-style class */
html.dark-style {
    color-scheme: dark;
}

/* Main Background and Text Colors */
html.dark-style body {
    background-color: #1a1d29 \!important;
    color: #c7c9d9 \!important;
}

/* Card and Panel Backgrounds */
html.dark-style .card,
html.dark-style .modal-content,
html.dark-style .dropdown-menu,
html.dark-style .list-group-item {
    background-color: #25293c \!important;
    color: #c7c9d9 \!important;
    border-color: #3a3e52 \!important;
}

/* Navbar */
html.dark-style .navbar,
html.dark-style .bg-navbar-theme {
    background-color: #25293c \!important;
    border-color: #3a3e52 \!important;
}

/* Sidebar/Menu */
html.dark-style .menu,
html.dark-style .layout-menu {
    background-color: #2b2f4a \!important;
    color: #c7c9d9 \!important;
}

html.dark-style .menu-item .menu-link,
html.dark-style .menu-item .menu-link:not(.active) {
    color: #c7c9d9 \!important;
}

html.dark-style .menu-item .menu-link:hover,
html.dark-style .menu-item .menu-link.active {
    background-color: #3a3e52 \!important;
    color: #fff \!important;
}

/* Tables */
html.dark-style .table {
    color: #c7c9d9 \!important;
    --bs-table-bg: #25293c \!important;
    --bs-table-striped-bg: #2b2f4a \!important;
    --bs-table-hover-bg: #3a3e52 \!important;
    border-color: #3a3e52 \!important;
}

html.dark-style .table thead th {
    background-color: #2b2f4a \!important;
    color: #c7c9d9 \!important;
    border-color: #3a3e52 \!important;
}

html.dark-style .table tbody td {
    border-color: #3a3e52 \!important;
}

html.dark-style .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #2b2f4a \!important;
}

/* Form Inputs */
html.dark-style .form-control,
html.dark-style .form-select {
    background-color: #2b2f4a \!important;
    color: #c7c9d9 \!important;
    border-color: #3a3e52 \!important;
}

html.dark-style .form-control:focus,
html.dark-style .form-select:focus {
    background-color: #2b2f4a \!important;
    color: #c7c9d9 \!important;
    border-color: #696cff \!important;
}

html.dark-style .form-control::placeholder {
    color: #7c7f94 \!important;
}

/* Buttons - Keep original colors but adjust for dark background */
html.dark-style .btn-outline-secondary {
    color: #c7c9d9 \!important;
    border-color: #3a3e52 \!important;
}

html.dark-style .btn-outline-secondary:hover {
    background-color: #3a3e52 \!important;
    color: #fff \!important;
}

/* Breadcrumbs */
html.dark-style .breadcrumb {
    background-color: transparent \!important;
}

html.dark-style .breadcrumb-item a {
    color: #c7c9d9 \!important;
}

html.dark-style .breadcrumb-item.active {
    color: #7c7f94 \!important;
}

/* Pagination */
html.dark-style .pagination .page-link {
    background-color: #2b2f4a \!important;
    border-color: #3a3e52 \!important;
    color: #c7c9d9 \!important;
}

html.dark-style .pagination .page-link:hover {
    background-color: #3a3e52 \!important;
    color: #fff \!important;
}

html.dark-style .pagination .page-item.active .page-link {
    background-color: #696cff \!important;
    border-color: #696cff \!important;
}

/* Badges */
html.dark-style .badge {
    color: #fff \!important;
}

/* Alerts */
html.dark-style .alert {
    border-color: #3a3e52 \!important;
}

html.dark-style .alert-primary {
    background-color: #5a5fcc \!important;
    color: #fff \!important;
}

html.dark-style .alert-success {
    background-color: #52b788 \!important;
    color: #fff \!important;
}

html.dark-style .alert-danger {
    background-color: #d64550 \!important;
    color: #fff \!important;
}

html.dark-style .alert-warning {
    background-color: #d4a03e \!important;
    color: #fff \!important;
}

/* Modals */
html.dark-style .modal-header,
html.dark-style .modal-footer {
    border-color: #3a3e52 \!important;
}

/* Dropdown */
html.dark-style .dropdown-item {
    color: #c7c9d9 \!important;
}

html.dark-style .dropdown-item:hover,
html.dark-style .dropdown-item:focus {
    background-color: #3a3e52 \!important;
    color: #fff \!important;
}

html.dark-style .dropdown-divider {
    border-color: #3a3e52 \!important;
}

/* Text Colors */
html.dark-style .text-muted {
    color: #7c7f94 \!important;
}

html.dark-style .text-body,
html.dark-style .text-dark {
    color: #c7c9d9 \!important;
}

/* Borders */
html.dark-style .border,
html.dark-style .border-top,
html.dark-style .border-bottom,
html.dark-style .border-start,
html.dark-style .border-end {
    border-color: #3a3e52 \!important;
}

/* Scrollbar */
html.dark-style ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark-style ::-webkit-scrollbar-track {
    background: #1a1d29;
}

html.dark-style ::-webkit-scrollbar-thumb {
    background: #3a3e52;
    border-radius: 4px;
}

html.dark-style ::-webkit-scrollbar-thumb:hover {
    background: #4a4e62;
}

/* Bootstrap Table specific */
html.dark-style .bootstrap-table .fixed-table-container {
    background-color: #25293c \!important;
}

html.dark-style .bootstrap-table .fixed-table-toolbar {
    background-color: #2b2f4a \!important;
}

/* Select2 Dropdown */
html.dark-style .select2-container--default .select2-selection--single {
    background-color: #2b2f4a \!important;
    border-color: #3a3e52 \!important;
    color: #c7c9d9 \!important;
}

html.dark-style .select2-dropdown {
    background-color: #25293c \!important;
    border-color: #3a3e52 \!important;
}

html.dark-style .select2-container--default .select2-results__option {
    color: #c7c9d9 \!important;
}

html.dark-style .select2-container--default .select2-results__option--highlighted {
    background-color: #696cff \!important;
}

/* Toastr Notifications - Keep visible on dark mode */
html.dark-style .toast-success {
    background-color: #52b788 \!important;
}

html.dark-style .toast-error {
    background-color: #d64550 \!important;
}

html.dark-style .toast-info {
    background-color: #5a5fcc \!important;
}

html.dark-style .toast-warning {
    background-color: #d4a03e \!important;
}

/* Charts - Make sure they're visible */
html.dark-style .apexcharts-text {
    fill: #c7c9d9 \!important;
}

html.dark-style .apexcharts-gridline {
    stroke: #3a3e52 \!important;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
}

html.dark-style .dark-mode-toggle .bx-sun {
    display: inline;
}

html.dark-style .dark-mode-toggle .bx-moon {
    display: none;
}

html.light-style .dark-mode-toggle .bx-sun {
    display: none;
}

html.light-style .dark-mode-toggle .bx-moon {
    display: inline;
}