/* ==========================================================================
   Optics & Ray Tracing Playground Styles
   ========================================================================== */

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

.opt-canvas-wrapper {
    background-color: #0b0f19;
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px, 100px 100px, 100px 100px;
    cursor: crosshair;
    min-height: 480px;
    border-radius: 0 0 0.5rem 0.5rem;
}

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

/* Tool Tab Transitions */
.opt-tab-content {
    animation: optFadeIn 0.2s ease-in-out;
}

@keyframes optFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Control buttons adjustments */
.opt-add-elem-btn {
    white-space: nowrap;
}

/* Glass element styles on UI */
.opt-glass-pill {
    background: rgba(52, 152, 219, 0.15);
    border: 1px solid rgba(52, 152, 219, 0.4);
    color: #3498db;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.75rem;
}

/* Formula walkthrough highlighting */
#opt-live-walkthrough strong {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] #opt-live-walkthrough strong {
    color: #6ea8fe;
}

/* Component List Items */
.opt-comp-item {
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.opt-comp-item:hover {
    background-color: var(--bs-tertiary-bg);
}

.opt-comp-item.active {
    background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.15)) !important;
    border-left: 3px solid var(--bs-primary) !important;
    color: var(--bs-body-color) !important;
}

.opt-comp-item .btn-remove-item {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.opt-comp-item:hover .btn-remove-item,
.opt-comp-item.active .btn-remove-item {
    opacity: 1;
}