/* ==========================================================================
   Graph Theory & Pathfinding Visualizer (PathfinderLab) Styles
   ========================================================================== */

.tool-pathfinder-wrapper {
    user-select: none;
}

/* Canvas Container */
.pf-canvas-container {
    position: relative;
    width: 100%;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pf-canvas {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    touch-action: none;
    cursor: crosshair;
}

/* Legend Visual Indicator Boxes */
.pf-legend-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.pf-legend-start {
    background-color: #10b981; /* Emerald green */
}

.pf-legend-target {
    background-color: #ef4444; /* Bright red */
}

.pf-legend-wall {
    background-color: #1e293b; /* Dark Slate */
}

.pf-legend-weight {
    background-color: #f59e0b; /* Amber/Mud */
}

.pf-legend-frontier {
    background-color: #06b6d4; /* Cyan */
}

.pf-legend-visited {
    background-color: #6366f1; /* Indigo */
}

.pf-legend-path {
    background-color: #fbbf24; /* Golden yellow */
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}

/* Status Banner Overlay */
.pf-status-banner {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(220, 53, 69, 0.92);
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 10;
    pointer-events: none;
    animation: pfBannerSlide 0.3s ease-out;
}

@keyframes pfBannerSlide {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Purple text utility */
.text-purple {
    color: #8b5cf6 !important;
}

/* Theory Tabs */
#pf-theory-tabs .nav-link {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

#pf-theory-tabs .nav-link.active {
    color: var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .pf-legend-wall {
    background-color: #334155;
    border-color: #475569;
}

[data-bs-theme="dark"] .pf-canvas-container {
    background-color: #0f172a;
}