[data-theme="dark"] {
    background: #000 !important;
    color: #eee;
}

[data-theme="dark"] body {
    background: #000 !important;
    background-image: none !important;
    background-color: #000 !important;
}
[data-theme="dark"] .header {
    background: linear-gradient(135deg, #000 0%, #111 50%, #222 100%), url(../img/coco-header.png) no-repeat center center;
    background-position: bottom !important;
    position: relative;
}
[data-theme="dark"] .header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 1;
}
[data-theme="dark"] .header .container {
    position: relative;
    z-index: 2;
}
[data-theme="dark"] footer {
    background: linear-gradient(135deg, #000 0%, #111 50%, #222 100%), url(../img/coco-footer.png) no-repeat center center;
    background-position: top !important;
    position: relative;
}
[data-theme="dark"] footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 1;
}
[data-theme="dark"] footer .container {
    position: relative;
    z-index: 2;
}
[data-theme="dark"] footer .footer-social li a {
    color: #fff;
    background: #333;
}
[data-theme="dark"] table {
    background-color: #111;
}
[data-theme="dark"] .table>thead>tr>th {
    border-bottom: 1px solid #333;
}
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #111;
}
[data-theme="dark"] .table-hover>tbody>tr:hover {
    background-color: #000;
}
[data-theme="dark"] .section-currencies-table td {
    color: #fff;
}
[data-theme="dark"] .convert-box {
    background-color: #111;
    box-shadow: 0 12px 32px 0 #000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid #333;
    outline: 2px solid #222;
}
[data-theme="dark"] label.label {
    color: #fff;
    font-weight: 500;
}

[data-theme="dark"] .convert-box label,
[data-theme="dark"] .convert-box p,
[data-theme="dark"] .convert-box .form-control,
[data-theme="dark"] .convert-box select,
[data-theme="dark"] .convert-box input {
    color: #fff !important;
}
[data-theme="dark"] .input-wrap .form-control {
    background: #222;
    color: #fff;
    border: 1px solid #333;
}
[data-theme="dark"] button.btn.dropdown-toggle.btn-light {
    background-color: #111 !important;
    border: 1px solid #333;
}
[data-theme="dark"] .currency_name {
    color: #fff;
}
[data-theme="dark"] .bootstrap-select .dropdown-menu {
    background: #111;
}
[data-theme="dark"] .bs-searchbox input.form-control {
    border: 1px solid #333;
    background: #222;
    color: #fff;
}
[data-theme="dark"] .bootstrap-select .dropdown-menu li a {
    background: #111;
    border-bottom: 1px solid #333;
}
[data-theme="dark"] .dropdown-toggle::after {
    border-top: .3em solid #fff;
}
[data-theme="dark"] .slider{
    background-color: #222;
    box-shadow: 0 0 10px #000;
}
[data-theme="dark"] .slider:before {
    left: auto;
    right: 5px;
}
[data-theme="dark"] .switch i {
    left: 5px;
}
[data-theme="dark"] input:checked + .slider:before {
    transform: translate(-5px, -50%);
}
[data-theme="dark"] .switch i:before {
    content: "\f186";
    color: #fff;
}
[data-theme="dark"] tr {
    border-top: 1px solid #333;
}
[data-theme="dark"] thead tr {
    border: none;
}

/* Additional dark mode styles for missing elements */
[data-theme="dark"] .currency_code {
    color: #64b5f6;
}

[data-theme="dark"] a.dropdown-item {
    background-color: #111;
    border-bottom: 1px solid #333;
    color: #fff;
}

[data-theme="dark"] a.dropdown-item:hover {
    background-color: #222;
    color: #fff;
}

[data-theme="dark"] .dropdown-menu>.active>a, 
[data-theme="dark"] .dropdown-menu>.active>a:focus, 
[data-theme="dark"] .dropdown-menu>.active>a:hover {
    background-color: #2e7d32;
    color: #fff;
}

[data-theme="dark"] .dropdown-menu>.active>a span.currency_code,
[data-theme="dark"] .dropdown-menu>.active>a span.currency_name {
    color: #fff !important;
}

[data-theme="dark"] .exchange-btn {
    background: #2e7d32 !important;
    color: #fff;
    box-shadow: 0px 12px 15px rgba(46, 125, 50, 0.3);
}

[data-theme="dark"] .exchange-btn:hover {
    background: #1b5e20 !important;
}

[data-theme="dark"] .live-rates-indicator {
    color: #fff;
}

[data-theme="dark"] .live-rates-indicator span {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

[data-theme="dark"] .list-currencies h2 {
    color: #4caf50;
}

[data-theme="dark"] .table-responsive {
    background: #111;
    box-shadow: 0px 15px 40px #000;
    border: 2px solid #333;
    outline: 2px solid #222;
}

[data-theme="dark"] .bootstrap-select .dropdown-toggle .filter-option-inner {
    color: #fff;
}

[data-theme="dark"] .bootstrap-select .dropdown-toggle {
    color: #fff;
}

[data-theme="dark"] .bootstrap-select .dropdown-toggle:focus {
    box-shadow: none;
}

[data-theme="dark"] .bootstrap-select .dropdown-toggle:active {
    box-shadow: none;
}

[data-theme="dark"] .bootstrap-select .dropdown-toggle:focus,
[data-theme="dark"] .bootstrap-select .dropdown-toggle:active {
    outline: none !important;
}

[data-theme="dark"] .form-control:focus {
    border-color: #4caf50;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
    background-color: #222;
    color: #fff;
}

[data-theme="dark"] .btn-light:not(:disabled):not(.disabled).active:focus, 
[data-theme="dark"] .btn-light:not(:disabled):not(.disabled):active:focus, 
[data-theme="dark"] .show>.btn-light.dropdown-toggle:focus {
    box-shadow: none;
}

[data-theme="dark"] .footer {
    background: #111;
    box-shadow: 0 8px 32px 0 #000;
    border: 2px solid #333;
    color: #fff;
}

[data-theme="dark"] p.copyright {
    color: #fff;
}

[data-theme="dark"] p.copyright a {
    color: #fff;
}

[data-theme="dark"] p.copyright i {
    color: #ff6b6b;
}

[data-theme="dark"] .switch i:before {
    content: "\f186";
    color: #4caf50;
}

[data-theme="dark"] .switch input:checked + .slider {
    background-color: #4caf50;
}

[data-theme="dark"] .switch input:checked + .slider:before {
    background-color: #fff;
}

[data-theme="dark"] .switch input:checked + .slider .switch i:before {
    content: "\f185";
    color: #fff;
}

/* Dark mode for mobile responsiveness */
@media (max-width: 768px) {
    [data-theme="dark"] .converter h1 {
        color: #fff;
    }
    
    [data-theme="dark"] .converter h2 {
        color: #fff;
    }
    
    [data-theme="dark"] .convert-box {
        background-color: #111;
    }
}