/**
 * Dark Mode Theme Styles for biliosCRM
 * Modern, refined dark theme with smooth transitions
 */

/* ==================== GLOBAL TRANSITIONS ==================== */
body.dark-mode-active * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ==================== BODY & BASIC STYLES ==================== */
body.dark-mode-active {
    background-color: #0f0f1a !important;
    color: #e2e8f0 !important;
}

body.dark-mode-active .card,
body.dark-mode-active .card-footer,
body.dark-mode-active .card-header {
    background-color: #1a1a2f !important;
    border-color: #2a2a45 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode-active .table {
    --bs-table-bg: rgba(255, 255, 255, 0.02);
    --bs-table-color: inherit;
    color: #c8cdd5 !important;
}

body.dark-mode-active .navbar.navbar-default {
    background: linear-gradient(180deg, #16162e 0%, #0f0f1a 100%) !important;
    border-color: #2a2a45 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

/* ==================== INPUTS & TEXT FIELDS ==================== */
body.dark-mode-active input[type="text"],
body.dark-mode-active input[type="email"],
body.dark-mode-active input[type="password"],
body.dark-mode-active input[type="number"],
body.dark-mode-active textarea,
body.dark-mode-active select {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: #2d2d4a !important;
    color: #e2e8f0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode-active input[type="text"]:focus,
body.dark-mode-active input[type="email"]:focus,
body.dark-mode-active input[type="password"]:focus,
body.dark-mode-active input[type="number"]:focus,
body.dark-mode-active textarea:focus,
body.dark-mode-active select:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: #6366f0 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 240, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ==================== MODALS ==================== */
body.dark-mode-active .modal-content {
    background-color: #1a1a2f !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode-active .modal-header {
    border-bottom-color: #2a2a45 !important;
    background-color: #16162e !important;
}

body.dark-mode-active .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ==================== DROPDOWNS ==================== */
body.dark-mode-active .dropdown-menu {
    background-color: #1a1a2f !important;
    border-color: #2a2a45 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode-active .dropdown-menu li:hover,
body.dark-mode-active .dropdown-menu a:hover {
    background-color: rgba(99, 102, 240, 0.1) !important;
}

/* ==================== BUTTONS ==================== */
body.dark-mode-active .btn-outline-success,
body.dark-mode-active .btn-outline-danger,
body.dark-mode-active .btn-outline-info,
body.dark-mode-active .btn-outline-warning {
    border-color: #5a65a3 !important;
    color: #c8cdd5 !important;
}

body.dark-mode-active .btn-outline-success:hover,
body.dark-mode-active .btn-outline-danger:hover,
body.dark-mode-active .btn-outline-info:hover,
body.dark-mode-active .btn-outline-warning:hover {
    background-color: rgba(99, 102, 240, 0.15) !important;
    border-color: #6366f0 !important;
}

/* ==================== ALERTS ==================== */
body.dark-mode-active .alert-info,
body.dark-mode-active .alert-success {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-left: 4px solid;
}

body.dark-mode-active .alert-info {
    border-left-color: #6366f0 !important;
    background-color: rgba(99, 102, 240, 0.08) !important;
    color: #c8cdd5 !important;
}

body.dark-mode-active .alert-success {
    border-left-color: #4ade82 !important;
    background-color: rgba(74, 222, 130, 0.08) !important;
    color: #c8cdd5 !important;
}

/* ==================== FORM ELEMENTS ==================== */
body.dark-mode-active .form-control,
body.dark-mode-active input-group-addon {
    background-color: #1a1a2f !important;
    border-color: #2d2d4a !important;
    color: #e2e8f0 !important;
}

/* ==================== NAVIGATION ==================== */
body.dark-mode-active .nav-pills > li.active > a:focus,
body.dark-mode-active .nav-pills > li.active > a:hover {
    background-color: rgba(99, 102, 240, 0.15) !important;
    box-shadow: none !important;
    color: #7c80ff !important;
}

body.dark-mode-active .nav.nav-tabs li {
    border-color: rgba(99, 102, 240, 0.15) !important;
    color: #c8cdd5 !important;
}

body.dark-mode-active .nav.nav-tabs li.active,
body.dark-mode-active .nav.nav-tabs li:hover {
    background-color: rgba(99, 102, 240, 0.08) !important;
    border-bottom-color: #6366f0 !important;
}

/* ==================== SEARCH ==================== */
body.dark-mode-active .search-form input[type="text"] {
    background-color: #1a1a2f !important;
    border-color: #2d2d4a !important;
    color: #e2e8f0 !important;
}

/* ==================== SCROLLBAR ==================== */
body.dark-mode-active ::-webkit-scrollbar {
    background-color: #1a1a2f !important;
}

body.dark-mode-active ::-webkit-scrollbar-thumb {
    background-color: #3a3a5a !important;
    border-radius: 4px !important;
}

body.dark-mode-active ::-webkit-scrollbar-thumb:hover {
    background-color: #4a4a6a !important;
}

/* ==================== BADGES & LABELS ==================== */
body.dark-mode-active .badge {
    background-color: #2d2d4a !important;
    color: #c8cdd5 !important;
}

body.dark-mode-active .badge-primary {
    background-color: #6366f0 !important;
    color: #fff !important;
}

/* ==================== LINKS ==================== */
body.dark-mode-active a {
    color: #8b8fff !important;
}

body.dark-mode-active a:hover {
    color: #a0a3ff !important;
}

/* ==================== HOVER EFFECTS ==================== */
body.dark-mode-active .card:hover {
    box-shadow: 0 4px 16px rgba(99, 102, 240, 0.1) !important;
}

/* ==================== SIDEBAR ==================== */
body.dark-mode-active #left-panel {
    background-color: #12122a !important;
    border-right-color: #2a2a45 !important;
}

body.dark-mode-active #left-panel .nav > li > a {
    color: #c8cdd5 !important;
}

body.dark-mode-active #left-panel .nav > li > a:hover {
    background-color: rgba(99, 102, 240, 0.08) !important;
    color: #fff !important;
}

body.dark-mode-active #left-panel .nav > li.active > a {
    background: linear-gradient(90deg, rgba(99, 102, 240, 0.2) 0%, transparent 100%) !important;
    color: #fff !important;
    border-left-color: #6366f0 !important;
}

/* ==================== HEADER ==================== */
body.dark-mode-active .header {
    background-color: #16162e !important;
    border-bottom-color: #2a2a45 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ==================== CONTENT ==================== */
body.dark-mode-active .content {
    background-color: #0f0f1a !important;
}