/* assets/css/styles.css */

/* Console Log Scrollbar Styling */
.dark-mode body {
    background-color: #1a202c;
}

#log-content {
    font-family: monospace;
    white-space: pre-wrap;
    background-color: #1e1e1e;
    color: #e0e0e0;
    padding: 10px;
    border-radius: 5px;
    overflow-y: auto;
    max-height: 250px;
}

.dark-mode #log-content {
    background-color: #2d3748;
    color: #cbd5e0;
}

/* Adjust the appearance of alerts */
.alert {
    border-left-width: 4px;
}

.alert-success {
    border-left-color: #48bb78; /* Green */
}

.alert-error {
    border-left-color: #f56565; /* Red */
}

/* Dark Mode Styles */
.dark-mode {
    background-color: #1a202c;
    color: #e2e8f0;
}

.dark-mode .bg-white {
    background-color: #2d3748;
}

.dark-mode .text-gray-700 {
    color: #cbd5e0;
}

.dark-mode .text-blue-500 {
    color: #63b3ed;
}

.dark-mode .text-blue-700 {
    color: #3182ce;
}

.dark-mode .text-red-500 {
    color: #f56565;
}

.dark-mode .text-green-500 {
    color: #48bb78;
}

.dark-mode .text-purple-500 {
    color: #9f7aea;
}

.dark-mode .text-yellow-500 {
    color: #ecc94b;
}

.dark-mode .border {
    border-color: #4a5568;
}

.dark-mode #console-log {
    background-color: #2d3748;
    color: #cbd5e0;
}

.dark-mode body {
    background-color: #1a202c;
    color: #e2e8f0;
}

.dark-mode .bg-gray-100 {
    background-color: #1a202c;
}

/* Ensure proper contrast for text within controls in dark mode */
.dark-mode input, .dark-mode select, .dark-mode textarea {
    background-color: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
}

.dark-mode input::placeholder, .dark-mode select::placeholder, .dark-mode textarea::placeholder {
    color: #a0aec0;
}

/* Toggle Switch Dot Animation */
#theme-toggle:checked + .relative .dot {
    transform: translateX(100%);
    background-color: #1abc9c;
}

/* Dark Mode Toggle Transition */
#theme-toggle + .relative .dot {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Smooth Transitions for Content */
#tab-content > div {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hidden {
    opacity: 0;
    transform: translateY(-10px);
    display: none;
}

.visible {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

/* Button Hover Effects */
button:hover, a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.dark-mode th, .dark-mode td {
    border-bottom: 1px solid #4a5568;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .flex-wrap {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }
}

/* Result Display */
#result {
    margin-top: 1rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    background-color: #f4f4f4;
}

.dark-mode #result {
    background-color: #2d3748;
    color: #cbd5e0;
}

/* Toggle dot transition */
.dot {
    transition: transform 0.3s ease;
}

/* Move dot to the right when checked */
input[type="checkbox"]:checked + .w-10 + .dot {
    transform: translateX(100%);
}