/**
 * Dark Mode Theme for SmartLease (Soft UI Dashboard)
 */

/* Smooth transitions for theme switching */
body,
.card,
.navbar,
.sidenav,
.modal-content,
.dropdown-menu,
.table,
.form-control,
.form-select,
.page-link {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* =========================================================
   Theme Toggle Button Styles
   ========================================================= */
.theme-toggle-btn {
    border-radius: 20px;
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0.35rem 0.75rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #344767;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.theme-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    color: #1e293b;
}

.theme-toggle-icon {
    font-size: 0.85rem;
    transition: transform 0.35s ease, color 0.25s ease;
}

.theme-toggle-btn:hover .theme-toggle-icon {
    transform: rotate(15deg);
}

/* When dark mode is active on the toggle button */
.dark-version .theme-toggle-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-version .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark-version .theme-toggle-icon.fa-sun {
    color: #f59e0b !important;
}

/* =========================================================
   Dark Mode General & Surfaces
   ========================================================= */
body.dark-version {
    background-color: #0b1120 !important;
    color: #e2e8f0 !important;
}

/* Container backgrounds */
body.dark-version .bg-gray-100 {
    background-color: #0b1120 !important;
}

body.dark-version .bg-gray-200 {
    background-color: #1e293b !important;
}

body.dark-version .bg-white {
    background-color: #1e293b !important;
}

/* Cards */
body.dark-version .card {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.35) !important;
}

body.dark-version .card .card-header,
body.dark-version .card .card-footer {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Sidenav */
body.dark-version .sidenav {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4) !important;
}

body.dark-version .sidenav .navbar-brand span {
    color: #f8fafc !important;
}

body.dark-version .sidenav .nav-link-text {
    color: #cbd5e1 !important;
}

body.dark-version .sidenav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-version .sidenav .nav-link:hover .nav-link-text {
    color: #ffffff !important;
}

body.dark-version .sidenav .nav-link.active {
    background-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

body.dark-version .sidenav .nav-link.active .nav-link-text {
    color: #ffffff !important;
}

body.dark-version .sidenav .icon-shape.bg-white {
    background-color: #334155 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .sidenav .icon-shape i {
    color: #f8fafc !important;
}

body.dark-version .sidenav hr.horizontal.dark {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
}

/* Navbar */
body.dark-version .navbar-main {
    background-color: transparent;
}

body.dark-version .navbar-main.blur {
    background: rgba(30, 41, 59, 0.85) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .breadcrumb-item,
body.dark-version .breadcrumb-item a {
    color: #94a3b8 !important;
}

body.dark-version .breadcrumb-item.active {
    color: #f8fafc !important;
}

body.dark-version .sidenav-toggler-line {
    background: #cbd5e1 !important;
}

body.dark-version .nav-link.text-body,
body.dark-version .nav-link.text-body i {
    color: #cbd5e1 !important;
}

body.dark-version .nav-link.text-body:hover,
body.dark-version .nav-link.text-body:hover i {
    color: #ffffff !important;
}

/* Typography & Headings */
body.dark-version h1,
body.dark-version h2,
body.dark-version h3,
body.dark-version h4,
body.dark-version h5,
body.dark-version h6 {
    color: #f8fafc !important;
}

body.dark-version .text-dark {
    color: #f8fafc !important;
}

body.dark-version .text-secondary,
body.dark-version .text-muted {
    color: #94a3b8 !important;
}

body.dark-version .text-body {
    color: #cbd5e1 !important;
}

body.dark-version p {
    color: #cbd5e1;
}

body.dark-version hr.horizontal.dark {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
}

/* Forms & Inputs */
body.dark-version .form-control,
body.dark-version .form-select,
body.dark-version select.form-control {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.dark-version .form-control:focus,
body.dark-version .form-select:focus,
body.dark-version select.form-control:focus {
    background-color: #0f172a !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
    color: #f8fafc !important;
}

body.dark-version .form-control::placeholder {
    color: #64748b !important;
}

body.dark-version .form-label {
    color: #e2e8f0 !important;
}

body.dark-version .input-group-text {
    background-color: #334155 !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* Tables */
body.dark-version .table {
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-version .table thead th {
    color: #94a3b8 !important;
    background-color: rgba(15, 23, 42, 0.6) !important;
    border-bottom: 1px solid #334155 !important;
}

body.dark-version .table tbody td {
    border-bottom-color: #26334d !important;
    color: #e2e8f0 !important;
}

body.dark-version .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: #e2e8f0 !important;
}

body.dark-version .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Modals */
body.dark-version .modal-content {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

body.dark-version .modal-header,
body.dark-version .modal-footer {
    border-color: #334155 !important;
}

body.dark-version .modal-content .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dropdowns */
body.dark-version .dropdown-menu {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-version .dropdown-item {
    color: #cbd5e1 !important;
}

body.dark-version .dropdown-item:hover,
body.dark-version .dropdown-item:focus {
    background-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-version .dropdown-divider {
    border-top-color: #334155 !important;
}

/* Pagination */
body.dark-version .pagination .page-link {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-version .pagination .page-link:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-version .pagination .page-item.active .page-link {
    background-color: #cb0c9f !important;
    border-color: #cb0c9f !important;
    color: #ffffff !important;
}

body.dark-version .pagination .page-item.disabled .page-link {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #64748b !important;
}

/* Fixed Plugin Configurator */
body.dark-version .fixed-plugin .card {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark-version .fixed-plugin-button {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
}

body.dark-version .fixed-plugin-button i {
    color: #cbd5e1 !important;
}

body.dark-version .border,
body.dark-version .border-bottom,
body.dark-version .border-top,
body.dark-version .border-start,
body.dark-version .border-end {
    border-color: #334155 !important;
}

/* Custom scrollbars in dark mode */
body.dark-version::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-version::-webkit-scrollbar-track {
    background: #0b1120;
}

body.dark-version::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

body.dark-version::-webkit-scrollbar-thumb:hover {
    background: #475569;
}