/* Base styles for light mode */
body {
    background-color: #f8f9fa;
    color: #212529;
    transition: all 0.3s ease;
}

.card {
    background-color: #ffffff;
    border-color: #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom-color: #dee2e6;
}

.list-group-item {
    background-color: #ffffff;
    border-color: #dee2e6;
    color: #212529;
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

.list-group-item.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;
}

.btn-call {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.btn-call:hover {
    background-color: #218838;
    border-color: #1e7e34;
    color: white;
}

.btn-email {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-email:hover {
    background-color: #c82333;
    border-color: #bd2130;
    color: white;
}

.btn-sms {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}

.btn-sms:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #000;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1f1f1f;
        color: #e5e7eb;
    }

    .card {
        background-color: #1f2937;
        border-color: #374151;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .card-header {
        background-color: #292929;
        border-bottom-color: #374151;
        color: #e5e7eb;
    }

    .list-group-item {
        background-color: #313131;
        border-color: #374151;
        color: #e5e7eb;
    }

    .list-group-item:hover {
        background-color: #2b2b2b;
        color: #e5e7eb;
    }

    .list-group-item.active {
        background-color: #3b82f6;
        border-color: #3b82f6;
        color: #ffffff;
    }

    .list-group-item .text-muted,
    .list-group-item:hover .text-muted {
        color: #9ca3af !important;
    }

    input.form-control {
        background-color: #374151;
        border-color: #4b5563;
        color: #e5e7eb;
    }

    input.form-control:focus {
        background-color: #374151;
        border-color: #3b82f6;
        color: #e5e7eb;
        box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
    }

    .btn-outline-danger {
        color: #ef4444;
        border-color: #ef4444;
    }

    .btn-outline-danger:hover {
        background-color: #ef4444;
        color: #ffffff;
    }

    .btn-call {
        background-color: #2ea043;
        border-color: #2ea043;
    }
    
    .btn-call:hover {
        background-color: #3fb950;
        border-color: #3fb950;
    }
    
    .btn-email {
        background-color: #dc3545;
        border-color: #dc3545;
    }
    
    .btn-email:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }
    
    .btn-sms {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #000;
    }
    
    .btn-sms:hover {
        background-color: #e0a800;
        border-color: #d39e00;
        color: #000;
    }

    .card-body {
        color: #e5e7eb;
        background-color: #313131;
    }

    .text-muted {
        color: #9ca3af !important;
    }

    /* Modal Dark Styles */
    .modal-content {
        background-color: #1f2937;
        border-color: #374151;
    }

    .modal-header {
        background-color: #292929;
        border-bottom-color: #374151;
        color: #e5e7eb;
    }

    .modal-body {
        background-color: #313131;
        color: #e5e7eb;
    }

    .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    #qrcode {
        background-color: #ffffff;
        padding: 1rem;
        border-radius: 0.375rem;
    }

    #qrcode,
    #smsQrcode {
        background-color: transparent;
    }

    #qrcode canvas,
    #smsQrcode canvas {
        padding: 8px;
        background-color: #ffffff;
        border-radius: 4px;
    }
}