/* Write your css codes here  */

/* Dark Theme Variables Reference
--bg-main: #0B0E14;
--bg-sidebar: #0F1219;
--bg-card: #151921;
--bg-header: #0F1219;
--border-color: #232936;
--text-main: #8F9BB3;
--text-heading: #FFFFFF;
--accent-color: #3366FF;
*/

html.dark body {
    background-color: #0B0E14 !important;
    color: #8F9BB3 !important;
}

html.dark .dashboard {
    background-color: #0B0E14 !important;
}

html.dark .dashboard__sidebar {
    background-color: #0F1219 !important;
    border-right: 1px solid #232936 !important;
}

html.dark .dashboard__logo {
    border-bottom: 1px solid #232936;
}

html.dark .dashboard__menu ul li a {
    color: #8F9BB3 !important;
}

html.dark .dashboard__menu ul li a:hover,
html.dark .dashboard__menu ul li a.active {
    background-color: rgba(51, 102, 255, 0.1) !important;
    color: #3366FF !important;
}

html.dark .dashboard__header {
    background-color: #0F1219 !important;
    border-bottom: 1px solid #232936 !important;
}

html.dark .card, 
html.dark .dashboard__card {
    background-color: #151921 !important;
    border: 1px solid #232936 !important;
}

html.dark .table thead tr th {
    background-color: #1C222D !important;
    border-bottom: 1px solid #232936 !important;
    color: #FFFFFF !important;
}

html.dark .table tbody tr td {
    border-bottom: 1px solid #232936 !important;
    color: #8F9BB3 !important;
}

html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
    color: #FFFFFF !important;
}

html.dark .current__balance h4 {
    color: #FFFFFF !important;
}

html.dark .current__balance h4 span {
    color: #3366FF !important;
}

html.dark .ds__home {
    background-color: #1C222D !important;
    border: 1px solid #232936 !important;
    color: #FFFFFF !important;
}

html.dark .notification__btn {
    background-color: #1C222D !important;
    border: 1px solid #232936 !important;
    color: #FFFFFF !important;
}

html.dark .notification__count {
    background-color: #3366FF !important;
}

html.dark .profile__dropdown img {
    border: 2px solid #232936 !important;
}

html.dark .profile__dropdown span {
    color: #FFFFFF !important;
}

html.dark .dropdown-menu {
    background-color: #151921 !important;
    border: 1px solid #232936 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

html.dark .dropdown-item {
    color: #8F9BB3 !important;
}

html.dark .dropdown-item:hover {
    background-color: #1C222D !important;
    color: #FFFFFF !important;
}

html.dark .dropdown-divider {
    border-top: 1px solid #232936 !important;
}

html.dark .notification__body a {
    background-color: #1C222D !important;
    border: 1px solid #232936 !important;
    color: #8F9BB3 !important;
    margin-bottom: 4px !important;
}

html.dark .notification__body a:hover {
    background-color: #232936 !important;
    color: #FFFFFF !important;
}

html.dark .notification__body a p {
    color: #FFFFFF !important;
}

html.dark .notification__body a span {
    color: #4F5E7B !important;
    font-size: 0.75rem !important;
}

html.dark .add__account {
    background-color: #151921 !important;
    border: 1px solid #232936 !important;
}

html.dark .add__account__topbar h4 {
    color: #FFFFFF !important;
}

html.dark .auth__thumb {
    background-color: #0F1219 !important;
}

html.dark .auth__main {
    background-color: #0B0E14 !important;
}

html.dark .auth__wrapper {
    background-color: transparent !important;
}

/* Dashboard Enhancements */
html.dark .welcome-card {
    background: linear-gradient(135deg, #0F1219 0%, #151921 100%) !important;
    border: 1px solid #232936 !important;
}

html.dark .subscription-status-box {
    background-color: rgba(51, 102, 255, 0.05);
    border: 1px solid rgba(51, 102, 255, 0.1);
}

html.dark .activity-item {
    border-bottom: 1px solid #232936 !important;
}

html.dark .activity-item:last-child {
    border-bottom: none !important;
}

html.dark .dashboard-list-item {
    border-bottom: 1px solid #232936 !important;
}

html.dark .dashboard-list-item:last-child {
    border-bottom: none !important;
}

html.dark .activity-deposit {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}

html.dark .activity-expense {
    background-color: rgba(244, 63, 94, 0.1) !important;
    color: #f43f5e !important;
}

html.dark .fs-small {
    font-size: 0.875rem;
}

html.dark .fs-xsmall {
    font-size: 0.75rem;
}

/* Dark Theme Form Inputs Overrides */
html.dark .form-control,
html.dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea,
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-dropdown {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border: 1px solid #374151 !important;
}

html.dark .form-control:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    background-color: #1f2937 !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
    color: #f3f4f6 !important;
}

html.dark .form-control::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #9ca3af !important;
}

/* Fix for WebKit Autofill in Dark Mode */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover, 
html.dark input:-webkit-autofill:focus, 
html.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1f2937 inset !important;
    -webkit-text-fill-color: #f3f4f6 !important;
    transition: background-color 5000s ease-in-out 0s;
}