/* ==========================================================================
   Triangle Properties & Pythagoras Lab (TrianglePythagorasLab) Styles
   ========================================================================== */

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

/* Canvas Wrapper */
.tp-canvas-wrapper {
    position: relative;
    width: 100%;
    min-height: 380px;
    background-color: var(--bs-body-bg);
    background-image: 
        linear-gradient(to right, rgba(148, 163, 184, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 0.375rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
}

.tp-canvas-wrapper canvas {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    touch-action: none;
}

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

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

/* Dark Mode Grid adjustments */
[data-bs-theme="dark"] .tp-canvas-wrapper {
    background-color: #0b1120;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}