/* Beamer+ Control Panel Styles */

#control-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #ccc;
    color: white;
    gap: 10px;
    box-sizing: border-box;
    flex-wrap: wrap;
    position: relative;
    z-index: 200;
    border-bottom: 2px solid #666;
}

/* Control panel sections */
.controls-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 1 auto;
}

.controls-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Floating annotation panel for small screens */
#annotation-panel-toggle {
    display: none;
}

#floating-annotation-panel {
    display: none;
}

@media (max-width: 1300px) {
    /* Show toggle button on small screens */
    #annotation-panel-toggle {
        display: inline-flex;
    }
    
    /* Floating panel */
    #floating-annotation-panel {
        position: fixed;
        bottom: 85px;
        left: 10px;
        background: #ccc;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        border: 2px solid #999;
        z-index: 500;
        display: none;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        max-width: 90vw;
        pointer-events: auto;
    }
    
    #floating-annotation-panel.visible {
        display: flex;
    }
    
    #floating-annotation-panel .panel-section {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: nowrap;
    }
}

/* Ensure button containers don't wrap internally */
#tool-container,
#nav-container,
#display-controls {
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Compact buttons only when shape tools are visible in the toolbar */
body.shape-tools-visible #control-panel .btn {
    padding: 0.4em 0.6em;
}


.controls-center {
    left: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    position: static;
    transform: none;
    flex: 1 1 100%;
    justify-content: center;
}

.controls-right {
    justify-content: flex-end;
}

/* Control panel inputs */
#control-panel input[type=range],
#control-panel label.file-uploader {
    background: #444;
    border: none;
    color: white;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 4px;
    width: 60px;
    cursor: pointer;
}

#control-panel label.file-uploader:hover {
    background: #666;
}

#control-panel input[type=range] {
    width: 100px;
}

/* Control containers */
#tool-container,
#nav-container,
#display-controls,
#brush-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Keep tool container (pointer, pen, highlighter, eraser) on first row */
#tool-container {
    flex-shrink: 0;
}

/* Color picker */
.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    display: inline-block;
    margin-right: 4px;
    transition: border-color 0.2s ease, border-width 0.2s ease;
}

.color-swatch.color-selected {
    border: 3px solid #000;
}

.color_picker_view_only {
    gap: 8px;
    display: inline-block;
}

.color_swatch_view_only {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #666;
}

#color-picker {
    display: flex;
    gap: 6px;
}

/* Brush size */
.brush_size_scroll {
    font-family: "Computer Modern Sans", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #333;
}

/* Toggle */
.toggle_on {
    background-color: #666;
    color: white;
}

.toggle_off {
    background-color: #eee;
    color: #666;
}

/* LAN URL */
#lan-url,
#lan-url a {
    color: white;
}