/* Theme styles */
[data-theme="light"] {
    --bg-color: #f3f4f6;
    --card-bg: #ffffff;
    --text-color: #1f2937;
    --border-color: #a2b6b4;
    --card-text-color: #1f2937;
}
[data-theme="dark"] {
    --bg-color: #1f2937;
    --card-bg: #374151;
    --text-color: #e5e7eb;
    --border-color: #4b5563;
    --card-text-color: #e5e7eb;
}
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}
.card {
    background-color: var(--card-bg);
    color: var(--card-text-color);
}
.card h2, .card label, .card p {
    color: var(--card-text-color);
}
table {
    border-collapse: collapse;
    margin: 0 auto;
}
.grid-cell {
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-color);
    padding: 0;
}

.cell-start {
	background-color: blue;
}

.cell-end {
	background-color: green;
}

.cell-blocked {
	background-color: red;
}

.cell-searching {
	background-color: #092847;
}

.cell-path {
	background-color: orange;
}

/* Animation for header */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-slide-in {
    animation: slideIn 0.5s ease-out forwards;
}
/* Button styles */
.btn-common {
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-common:hover {
    transform: scale(1.1);
}
/* Algorithm buttons */
.btn-algorithm {
    background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
    color: white !important;
}
.btn-algorithm:hover {
    background: linear-gradient(135deg, #1d4ed8, #0284c7) !important;
    color: white !important;
}
.btn-algo-selected {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: white !important;
    transform: scale(1.1);
}
/* Start button */
.btn-start {
    background: linear-gradient(135deg, #6b7280, #9ca3af) !important;
    color: white !important;
}
.btn-start:hover {
    background: linear-gradient(135deg, #4b5563, #6b7280) !important;
    color: white !important;
}
/* End button */
.btn-end {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
    color: white !important;
}
.btn-end:hover {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: white !important;
}
/* Blocked button */
.btn-blocked {
    background: linear-gradient(135deg, #ef4444, #f87171) !important;
    color: white !important;
}
.btn-blocked:hover {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    color: white !important;
}
/* Clear Grid button */
.btn-clear {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    color: white !important;
}
.btn-clear:hover {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    color: white !important;
}
/* Path Only button */
.btn-path {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    color: white !important;
}
.btn-path:hover {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
    color: white !important;
}
/* Visualize button */
.btn-visualize {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: white !important;
}
.btn-visualize:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
    color: white !important;
}