/* MetroBank Dark Mode Styles */

/* Dark Mode Variables */
body.dark-mode {
    --theme-color: #EB292C;
    --secondary-color: #1a1f2e;
    --text-color: #b4b9c5;
    --title-color: #e8eaed;
    --background-color: #0f1419;
    --card-bg: #1a1f2e;
    --border-color: #2d3748;
    --hover-bg: #252d3d;
    --input-bg: #252d3d;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* Body & Background */
body.dark-mode {
    background: var(--background-color);
    color: var(--text-color);
}

body.dark-mode .dashboard-wrapper {
    background: var(--background-color);
}

/* Sidebar */
body.dark-mode .sidebar {
    background: var(--secondary-color);
    border-right: 1px solid var(--border-color);
}

body.dark-mode .sidebar-logo {
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .sidebar-menu ul li a {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .sidebar-menu ul li a:hover,
body.dark-mode .sidebar-menu ul li a.active {
    background: rgba(235, 41, 44, 0.15);
    color: #fff;
}

/* Top Navbar */
body.dark-mode .top-navbar {
    background: var(--card-bg);
    box-shadow: 0 2px 10px var(--shadow-color);
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .menu-toggle {
    color: var(--title-color);
}

body.dark-mode .menu-toggle:hover {
    color: var(--theme-color);
}

body.dark-mode .search-box input {
    background: var(--input-bg);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .search-box input::placeholder {
    color: var(--text-color);
}

body.dark-mode .search-box input:focus {
    background: var(--input-bg);
    border-color: var(--theme-color);
}

body.dark-mode .search-box i {
    color: var(--text-color);
}

body.dark-mode .notification-icon {
    color: var(--title-color);
}

body.dark-mode .notification-icon:hover {
    color: var(--theme-color);
}

body.dark-mode .user-profile:hover {
    background: var(--hover-bg);
}

body.dark-mode .user-info h6 {
    color: var(--title-color);
}

body.dark-mode .user-info span {
    color: var(--text-color);
}

/* Dashboard Content */
body.dark-mode .dashboard-content {
    background: var(--background-color);
}

body.dark-mode .welcome-section h2,
body.dark-mode .page-header h2,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--title-color);
}

body.dark-mode .welcome-section p,
body.dark-mode .page-header p {
    color: var(--text-color);
}

body.dark-mode .page-header {
    border-bottom-color: var(--border-color);
}

/* Cards */
body.dark-mode .summary-card,
body.dark-mode .widget-card,
body.dark-mode .transactions-section,
body.dark-mode .cards-section,
body.dark-mode .info-card,
body.dark-mode .profile-header-card {
    background: var(--card-bg);
    box-shadow: 0 2px 15px var(--shadow-color);
}

body.dark-mode .summary-card:hover,
body.dark-mode .info-card:hover {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
}

body.dark-mode .card-title,
body.dark-mode .card-amount,
body.dark-mode .section-header h3,
body.dark-mode .info-card-header h4 {
    color: var(--title-color);
}

body.dark-mode .card-icon {
    background: rgba(235, 41, 44, 0.15);
}

body.dark-mode .section-header {
    border-bottom-color: var(--border-color);
}

body.dark-mode .view-all-btn {
    color: var(--theme-color);
}

body.dark-mode .view-all-btn:hover {
    color: var(--title-color);
}

/* Chart */
body.dark-mode .chart-container {
    background: transparent;
}

body.dark-mode .chart-select {
    background: var(--input-bg);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .chart-select:focus {
    background: var(--input-bg);
    border-color: var(--theme-color);
}

body.dark-mode .chart-legend {
    border-top-color: var(--border-color);
}

body.dark-mode .legend-info span {
    color: var(--text-color);
}

body.dark-mode .legend-info strong {
    color: var(--title-color);
}

/* Forms */
body.dark-mode .transfer-form .form-group label,
body.dark-mode .card-application-form .form-group label {
    color: var(--title-color);
}

body.dark-mode .transfer-form .form-group select,
body.dark-mode .transfer-form .form-group input,
body.dark-mode .card-application-form .form-group input,
body.dark-mode .card-application-form .form-group select {
    background: var(--input-bg);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .transfer-form .form-group select:focus,
body.dark-mode .transfer-form .form-group input:focus,
body.dark-mode .card-application-form .form-group input:focus,
body.dark-mode .card-application-form .form-group select:focus {
    background: var(--input-bg);
    border-color: var(--theme-color);
}

/* Credit Cards */
body.dark-mode .add-card {
    border-color: var(--border-color);
    background: var(--hover-bg);
}

body.dark-mode .add-card:hover {
    border-color: var(--theme-color);
    background: rgba(235, 41, 44, 0.1);
}

body.dark-mode .add-card i {
    color: var(--text-color);
}

body.dark-mode .add-card span {
    color: var(--title-color);
}

/* Footer */
body.dark-mode .dashboard-footer {
    background: var(--card-bg);
    border-top-color: var(--border-color);
}

body.dark-mode .footer-content p {
    color: var(--text-color);
}

body.dark-mode .footer-content a {
    color: var(--theme-color);
}

body.dark-mode .footer-content a:hover {
    color: var(--title-color);
}

/* Profile Header */
body.dark-mode .profile-banner {
    background: linear-gradient(135deg, var(--theme-color), #c02226);
}

body.dark-mode .profile-name-group h3 {
    color: var(--title-color);
}

body.dark-mode .detail-label,
body.dark-mode .info-label {
    color: var(--text-color);
}

body.dark-mode .detail-value,
body.dark-mode .info-value {
    color: var(--title-color);
}

body.dark-mode .info-card-header {
    border-bottom-color: var(--border-color);
}

body.dark-mode .header-icon {
    background: rgba(235, 41, 44, 0.15);
}

/* Action Dropdown */
body.dark-mode .action-dropdown-btn {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--title-color);
}

body.dark-mode .action-dropdown-btn:hover {
    background: var(--theme-color);
    color: #fff;
}

body.dark-mode .dropdown-menu {
    background: var(--card-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
}

body.dark-mode .dropdown-menu a {
    color: var(--title-color);
}

body.dark-mode .dropdown-menu a:hover {
    background: var(--hover-bg);
    color: var(--theme-color);
}

/* Modals */
body.dark-mode .modal-overlay {
    background: rgba(15, 20, 25, 0.9);
}

body.dark-mode .modal-container {
    background: var(--card-bg);
}

body.dark-mode .modal-header {
    border-bottom-color: var(--border-color);
    background: var(--card-bg);
}

body.dark-mode .modal-header h3 {
    color: var(--title-color);
}

body.dark-mode .modal-close {
    background: var(--input-bg);
    color: var(--text-color);
}

body.dark-mode .modal-close:hover {
    background: var(--theme-color);
    color: #fff;
}

body.dark-mode .modal-body {
    background: var(--card-bg);
}

/* Card Application Form */
body.dark-mode .card-application-form .form-section {
    border-bottom-color: var(--border-color);
}

body.dark-mode .card-application-form .form-section h4 {
    color: var(--title-color);
}

body.dark-mode .option-card {
    border-color: var(--border-color);
    background: var(--input-bg);
}

body.dark-mode .card-type-option input[type="radio"]:checked + .option-card {
    border-color: var(--theme-color);
    background: rgba(235, 41, 44, 0.15);
}

body.dark-mode .option-card span {
    color: var(--title-color);
}

body.dark-mode .option-card p {
    color: var(--text-color);
}

body.dark-mode .form-actions {
    border-top-color: var(--border-color);
}

body.dark-mode .btn-secondary {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--title-color);
}

body.dark-mode .btn-secondary:hover {
    background: var(--hover-bg);
    border-color: var(--text-color);
}

/* Login & Register Pages */
body.dark-mode .login-card,
body.dark-mode .register-hero {
    background: var(--card-bg);
    box-shadow: 0 10px 40px var(--shadow-color);
}

body.dark-mode .login-card h2,
body.dark-mode .register-hero h2 {
    color: var(--title-color);
}

body.dark-mode .login-card p,
body.dark-mode .register-hero p {
    color: var(--text-color);
}

body.dark-mode .form-group label {
    color: var(--title-color);
}

body.dark-mode .form-group input {
    background: var(--input-bg);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .form-group input:focus {
    background: var(--input-bg);
    border-color: var(--theme-color);
}

body.dark-mode .form-link {
    color: var(--theme-color);
}

body.dark-mode .form-link:hover {
    color: var(--title-color);
}

body.dark-mode .branch-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .branch-card:hover {
    border-color: var(--theme-color);
    box-shadow: 0 5px 20px var(--shadow-color);
}

body.dark-mode .branch-card h4 {
    color: var(--title-color);
}

body.dark-mode .branch-card p {
    color: var(--text-color);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: relative;
    width: 60px;
    height: 30px;
    background: #e9ecef;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 3px;
    border: 2px solid transparent;
}

.dark-mode-toggle:hover {
    border-color: var(--theme-color);
}

.dark-mode-toggle-slider {
    position: absolute;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
    left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dark-mode-toggle-slider i {
    font-size: 12px;
    color: #fbbf24;
}

body.dark-mode .dark-mode-toggle {
    background: var(--secondary-color);
    border: 2px solid var(--border-color);
}

body.dark-mode .dark-mode-toggle:hover {
    border-color: var(--theme-color);
}

body.dark-mode .dark-mode-toggle-slider {
    left: 32px;
    background: var(--theme-color);
}

body.dark-mode .dark-mode-toggle-slider i {
    color: #fff;
}

/* Avatar Overlay Dark Mode */
body.dark-mode .avatar-overlay {
    background: rgba(15, 20, 25, 0.9);
}

/* Service Items */
body.dark-mode .service-item {
    background: var(--input-bg);
}

body.dark-mode .service-item:hover {
    background: rgba(235, 41, 44, 0.1);
}

body.dark-mode .service-icon {
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .service-info h5 {
    color: var(--title-color);
}

/* Main Website Header & Navigation (index.html) */
body.dark-mode .main-header {
    background: var(--secondary-color);
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .main-menu .navigation > li > a {
    color: var(--title-color);
}

body.dark-mode .main-menu .navigation > li:hover > a,
body.dark-mode .main-menu .navigation > li.current > a {
    color: var(--theme-color);
}

body.dark-mode .header-top {
    background: var(--background-color);
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .header-top p,
body.dark-mode .header-top a {
    color: var(--text-color);
}

body.dark-mode .header-top a:hover {
    color: var(--theme-color);
}

body.dark-mode .mobile-menu {
    background: var(--secondary-color);
}

body.dark-mode .mobile-menu .navigation li a {
    color: var(--title-color);
    border-bottom-color: var(--border-color);
}

body.dark-mode .mobile-menu .navigation li a:hover {
    color: var(--theme-color);
}

/* Banner Section */
body.dark-mode .banner-section {
    background: linear-gradient(135deg, var(--background-color), var(--secondary-color));
}

body.dark-mode .banner-content h1,
body.dark-mode .banner-content h2 {
    color: var(--title-color);
}

body.dark-mode .banner-content p {
    color: var(--text-color);
}

/* Feature Sections */
body.dark-mode .feature-section,
body.dark-mode .about-section,
body.dark-mode .service-section,
body.dark-mode .funfact-section,
body.dark-mode .testimonial-section,
body.dark-mode .news-section {
    background: var(--background-color);
}

body.dark-mode .sec-title h2,
body.dark-mode .sec-title h3 {
    color: var(--title-color);
}

body.dark-mode .sec-title p {
    color: var(--text-color);
}

body.dark-mode .feature-block,
body.dark-mode .service-block,
body.dark-mode .about-block {
    background: var(--card-bg);
    box-shadow: 0 2px 15px var(--shadow-color);
}

body.dark-mode .feature-block:hover,
body.dark-mode .service-block:hover {
    box-shadow: 0 5px 25px var(--shadow-color);
}

body.dark-mode .feature-block h3,
body.dark-mode .service-block h3,
body.dark-mode .about-block h3 {
    color: var(--title-color);
}

body.dark-mode .feature-block p,
body.dark-mode .service-block p,
body.dark-mode .about-block p {
    color: var(--text-color);
}

/* Calculator Section */
body.dark-mode .calculator-section {
    background: var(--card-bg);
}

body.dark-mode .calculator-inner {
    background: var(--input-bg);
    border-color: var(--border-color);
}

body.dark-mode .calculator-inner input,
body.dark-mode .calculator-inner select {
    background: var(--secondary-color);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .calculator-result {
    background: var(--secondary-color);
    color: var(--title-color);
}

/* Testimonial Section */
body.dark-mode .testimonial-block {
    background: var(--card-bg);
    box-shadow: 0 2px 15px var(--shadow-color);
}

body.dark-mode .testimonial-block .text {
    color: var(--text-color);
}

body.dark-mode .testimonial-block .author h4 {
    color: var(--title-color);
}

body.dark-mode .testimonial-block .author span {
    color: var(--text-color);
}

/* News/Blog Section */
body.dark-mode .news-block {
    background: var(--card-bg);
    box-shadow: 0 2px 15px var(--shadow-color);
}

body.dark-mode .news-block:hover {
    box-shadow: 0 5px 25px var(--shadow-color);
}

body.dark-mode .news-block h3 a {
    color: var(--title-color);
}

body.dark-mode .news-block h3 a:hover {
    color: var(--theme-color);
}

body.dark-mode .news-block .text {
    color: var(--text-color);
}

body.dark-mode .news-block .post-info li {
    color: var(--text-color);
}

/* Subscribe Section */
body.dark-mode .subscribe-section {
    background: var(--secondary-color);
}

body.dark-mode .subscribe-form input {
    background: var(--input-bg);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .subscribe-form input:focus {
    background: var(--input-bg);
    border-color: var(--theme-color);
}

/* Footer */
body.dark-mode .main-footer {
    background: var(--secondary-color);
    border-top: 1px solid var(--border-color);
}

body.dark-mode .footer-widget h3 {
    color: var(--title-color);
}

body.dark-mode .footer-widget ul li a,
body.dark-mode .footer-widget p {
    color: var(--text-color);
}

body.dark-mode .footer-widget ul li a:hover {
    color: var(--theme-color);
}

body.dark-mode .footer-bottom {
    background: var(--background-color);
    border-top: 1px solid var(--border-color);
}

body.dark-mode .footer-bottom p {
    color: var(--text-color);
}

body.dark-mode .footer-bottom a {
    color: var(--theme-color);
}

/* Preloader */
body.dark-mode .loader-wrap {
    background: var(--background-color);
}

body.dark-mode .preloader {
    background: var(--secondary-color);
}

/* Video Section */
body.dark-mode .video-section {
    background: var(--card-bg);
}

body.dark-mode .video-content h2 {
    color: var(--title-color);
}

body.dark-mode .video-content p {
    color: var(--text-color);
}

/* Apps Section */
body.dark-mode .apps-section {
    background: var(--background-color);
}

body.dark-mode .apps-content h2 {
    color: var(--title-color);
}

body.dark-mode .apps-content p {
    color: var(--text-color);
}

/* Funfact Counters */
body.dark-mode .funfact-block {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .funfact-block h2 {
    color: var(--title-color);
}

body.dark-mode .funfact-block p {
    color: var(--text-color);
}

/* Sidebar Widgets */
body.dark-mode .sidebar .widget {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .sidebar .widget h3 {
    color: var(--title-color);
}

body.dark-mode .sidebar .widget ul li a {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

body.dark-mode .sidebar .widget ul li a:hover {
    color: var(--theme-color);
}

/* Tables */
body.dark-mode table {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode table th {
    background: var(--secondary-color);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode table td {
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Breadcrumb */
body.dark-mode .page-title {
    background: var(--secondary-color);
}

body.dark-mode .page-title h1 {
    color: var(--title-color);
}

body.dark-mode .breadcrumb li {
    color: var(--text-color);
}

body.dark-mode .breadcrumb li a {
    color: var(--theme-color);
}

/* Contact Info */
body.dark-mode .contact-info {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .contact-info h3 {
    color: var(--title-color);
}

body.dark-mode .contact-info p,
body.dark-mode .contact-info a {
    color: var(--text-color);
}

/* Transfer Page Specific Styles */
body.dark-mode .transfer-info-section .info-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .transfer-info-section .info-card h4 {
    color: var(--title-color);
}

body.dark-mode .transfer-info-section .info-card p {
    color: var(--text-color);
}

body.dark-mode .transfer-type-btn {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .transfer-type-btn:hover {
    border-color: var(--theme-color);
    background: var(--hover-bg);
}

body.dark-mode .transfer-type-btn.active {
    background: var(--card-bg);
    border-color: var(--theme-color);
}

body.dark-mode .transfer-type-btn span {
    color: var(--title-color);
}

body.dark-mode .transfer-type-btn p {
    color: var(--text-color);
}

/* Transfer Modal Styles */
body.dark-mode .transfer-modal-lg {
    background: var(--secondary-color);
}

body.dark-mode .transfer-modal-lg .modal-header {
    background: var(--secondary-color);
    border-bottom-color: var(--border-color);
}

body.dark-mode .transfer-modal-lg .modal-header h3 {
    color: var(--title-color);
}

body.dark-mode .transfer-modal-lg .modal-body {
    background: var(--background-color);
}

body.dark-mode .transfer-form-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .form-header {
    border-bottom-color: var(--border-color);
}

body.dark-mode .form-header h3 {
    color: var(--title-color);
}

body.dark-mode .form-header p {
    color: var(--text-color);
}

body.dark-mode .form-group label {
    color: var(--title-color);
}

body.dark-mode .form-group input,
body.dark-mode .form-group select {
    background: var(--input-bg);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus {
    background: var(--input-bg);
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(235, 41, 44, 0.1);
}

body.dark-mode .form-group input::placeholder {
    color: #6b7280;
}

body.dark-mode .field-hint {
    color: var(--text-color);
}

body.dark-mode .info-box {
    background: rgba(59, 130, 246, 0.15);
    border-left-color: #3b82f6;
}

body.dark-mode .info-box.warning {
    background: rgba(245, 158, 11, 0.15);
    border-left-color: #f59e0b;
}

body.dark-mode .info-box p {
    color: var(--title-color);
}

body.dark-mode .btn-secondary {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--title-color);
}

body.dark-mode .btn-secondary:hover {
    background: var(--hover-bg);
    border-color: var(--text-color);
}

body.dark-mode .form-actions {
    border-top-color: var(--border-color);
}

/* Transfer Modal Scrollbar */
body.dark-mode .transfer-modal-lg::-webkit-scrollbar-track {
    background: var(--card-bg);
}

body.dark-mode .transfer-modal-lg::-webkit-scrollbar-thumb {
    background: var(--theme-color);
}

body.dark-mode .transfer-modal-lg::-webkit-scrollbar-thumb:hover {
    background: #c02226;
}

/* Transfer Summary & Success Modals */
body.dark-mode .transfer-summary {
    background: var(--card-bg);
}

body.dark-mode .summary-icon {
    background: rgba(235, 41, 44, 0.15);
}

body.dark-mode .transfer-summary h4 {
    color: var(--title-color);
}

body.dark-mode .summary-details {
    background: var(--input-bg);
}

body.dark-mode .summary-row {
    border-bottom-color: var(--border-color);
}

body.dark-mode .summary-row .label {
    color: var(--text-color);
}

body.dark-mode .summary-row .value {
    color: var(--title-color);
}

body.dark-mode .summary-row.highlight {
    background: rgba(235, 41, 44, 0.1);
}

body.dark-mode .success-message-container h3 {
    color: var(--title-color);
}

body.dark-mode .success-message-container p {
    color: var(--text-color);
}

body.dark-mode .transaction-reference {
    background: var(--input-bg);
}

body.dark-mode .ref-label {
    color: var(--text-color);
}

body.dark-mode .ref-number {
    color: var(--theme-color);
}

body.dark-mode .success-icon {
    background: rgba(34, 197, 94, 0.15);
}

/* Transaction Page Styles */
body.dark-mode .transaction-summary .summary-card {
    background: var(--card-bg);
}

body.dark-mode .summary-label {
    color: var(--text-color);
}

body.dark-mode .summary-amount {
    color: var(--title-color);
}

body.dark-mode .summary-count {
    color: var(--text-color);
}

body.dark-mode .filter-card {
    background: var(--card-bg);
}

body.dark-mode .filter-group label {
    color: var(--title-color);
}

body.dark-mode .filter-group input,
body.dark-mode .filter-group select {
    background: var(--input-bg);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .filter-group input:focus,
body.dark-mode .filter-group select:focus {
    background: var(--input-bg);
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(235, 41, 44, 0.1);
}

body.dark-mode .transaction-table-card {
    background: var(--card-bg);
}

body.dark-mode .table-header {
    border-bottom-color: var(--border-color);
}

body.dark-mode .table-header h3 {
    color: var(--title-color);
}

body.dark-mode .btn-icon {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .btn-icon:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

body.dark-mode .transaction-table thead {
    background: var(--input-bg);
}

body.dark-mode .transaction-table th {
    color: var(--title-color);
    border-bottom-color: var(--border-color);
}

body.dark-mode .transaction-table tbody tr {
    border-bottom-color: var(--border-color);
}

body.dark-mode .transaction-table tbody tr:hover {
    background: var(--hover-bg);
}

body.dark-mode .transaction-table td {
    color: var(--text-color);
}

body.dark-mode .transaction-date,
body.dark-mode .transaction-desc {
    color: var(--title-color);
}

body.dark-mode .transaction-time {
    color: var(--text-color);
}

body.dark-mode .action-btn {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .action-btn:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

body.dark-mode .transaction-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .transaction-card-date {
    color: var(--title-color);
}

body.dark-mode .transaction-card-label {
    color: var(--text-color);
}

body.dark-mode .transaction-card-value {
    color: var(--title-color);
}

body.dark-mode .pagination-section {
    border-top-color: var(--border-color);
}

body.dark-mode .pagination-info {
    color: var(--text-color);
}

body.dark-mode .pagination-info span {
    color: var(--title-color);
}

body.dark-mode .btn-pagination {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--title-color);
}

body.dark-mode .btn-pagination:hover:not(:disabled) {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

body.dark-mode .page-number {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--title-color);
}

body.dark-mode .page-number:hover,
body.dark-mode .page-number.active {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

body.dark-mode .detail-section h4 {
    color: var(--title-color);
}

body.dark-mode .detail-row {
    border-bottom-color: var(--border-color);
}

body.dark-mode .detail-label {
    color: var(--text-color);
}

body.dark-mode .detail-value {
    color: var(--title-color);
}

/* Cards Page Styles */
body.dark-mode .summary-stat-card {
    background: var(--card-bg);
}

body.dark-mode .stat-label {
    color: var(--text-color);
}

body.dark-mode .stat-value {
    color: var(--title-color);
}

body.dark-mode .stat-change {
    color: var(--text-color);
}

body.dark-mode .card-info-panel {
    background: var(--card-bg);
}

body.dark-mode .card-balance-info {
    border-bottom-color: var(--border-color);
}

body.dark-mode .balance-label {
    color: var(--text-color);
}

body.dark-mode .balance-amount {
    color: var(--title-color);
}

body.dark-mode .card-id {
    color: var(--text-color);
}

body.dark-mode .card-action-btn {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .card-action-btn:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

body.dark-mode .card-action-btn.primary {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

body.dark-mode .card-action-btn.primary:hover {
    background: #c02226;
    border-color: #c02226;
}

body.dark-mode .card-action-btn.danger {
    border-color: var(--border-color);
    color: #dc2626;
    background: var(--input-bg);
}

body.dark-mode .card-action-btn.danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

body.dark-mode .request-card-form .form-group label {
    color: var(--title-color);
}

body.dark-mode .request-card-form .form-group select {
    background: var(--input-bg);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .request-card-form .form-group select:focus {
    background: var(--input-bg);
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(235, 41, 44, 0.1);
}

body.dark-mode .detail-section h4 {
    color: var(--title-color);
}

body.dark-mode .detail-row {
    border-bottom-color: var(--border-color);
}

body.dark-mode .detail-label {
    color: var(--text-color);
}

body.dark-mode .detail-value {
    color: var(--title-color);
}

body.dark-mode .action-content p {
    color: var(--text-color);
}

/* Settings Page Styles */
body.dark-mode .settings-card {
    background: var(--card-bg);
}

body.dark-mode .settings-card-header {
    border-bottom-color: var(--border-color);
}

body.dark-mode .settings-title h3 {
    color: var(--title-color);
}

body.dark-mode .settings-title p {
    color: var(--text-color);
}

body.dark-mode .form-group label {
    color: var(--title-color);
}

body.dark-mode .form-group input,
body.dark-mode .form-group select {
    background: var(--input-bg);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus {
    background: var(--input-bg);
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(235, 41, 44, 0.1);
}

body.dark-mode .form-actions {
    border-top-color: var(--border-color);
}

body.dark-mode .settings-option {
    border-bottom-color: var(--border-color);
}

body.dark-mode .option-info h4 {
    color: var(--title-color);
}

body.dark-mode .option-info p {
    color: var(--text-color);
}

body.dark-mode .option-btn {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .option-btn:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

body.dark-mode .option-select {
    background: var(--input-bg);
    color: var(--title-color);
    border-color: var(--border-color);
}

body.dark-mode .option-select:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(235, 41, 44, 0.1);
}

body.dark-mode .toggle-slider {
    background-color: var(--border-color);
}

body.dark-mode .danger-zone {
    border-color: #7f1d1d;
}

body.dark-mode .danger-zone .settings-card-header {
    background: rgba(127, 29, 29, 0.2);
    border-bottom-color: #7f1d1d;
}

body.dark-mode .danger-option {
    border-bottom-color: #7f1d1d;
}

body.dark-mode .danger-btn {
    border-color: #7f1d1d;
    color: #ef4444;
    background: var(--input-bg);
}

body.dark-mode .danger-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

body.dark-mode .device-item {
    background: var(--input-bg);
    border-color: var(--border-color);
}

body.dark-mode .device-details h4 {
    color: var(--title-color);
}

body.dark-mode .device-details p {
    color: var(--text-color);
}

body.dark-mode .device-action {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .device-action:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

/* Smooth Transition for Theme Switch */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}