/* Dev Feedback Widget Styles */

/* Feedback button - the corner comes from DEV_FEEDBACK_POSITION via a class on
   the element. bottom-right is raised to clear the framework debug-toolbar
   toggle, so it lands above rather than under it. */
#dev-feedback-btn {
    transition: opacity 0.2s ease;
}

#dev-feedback-btn.dfb-corner-top-left      { top: 0.5rem; left: 0.5rem; }
#dev-feedback-btn.dfb-corner-top-right     { top: 0.5rem; right: 0.5rem; }
#dev-feedback-btn.dfb-corner-bottom-left   { bottom: 0.5rem; left: 0.5rem; }
#dev-feedback-btn.dfb-corner-bottom-right  { bottom: 3rem; right: 0.5rem; }

#dev-feedback-btn:hover {
    opacity: 0.85;
}

/* Offcanvas panel */
#devFeedbackPanel {
    width: 380px;
}

#devFeedbackPanel .offcanvas-header {
    padding: 0.75rem 1rem;
}

#devFeedbackPanel .offcanvas-body {
    padding: 1rem;
}

/* Screenshot preview */
#dfb-screenshot-preview img {
    border: 2px solid #dee2e6;
}

/* Compact form styling for the widget */
#devFeedbackForm .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

#devFeedbackForm textarea {
    font-size: 0.9rem;
}

/* Annotation modal (uses Bootstrap modal-fullscreen) */
#dfbAnnotationModal .modal-content {
    display: flex;
    flex-direction: column;
}

#dfbAnnotationModal .modal-body {
    flex: 1 1 auto;
    overflow: hidden;
    background: #1a1a1a;
    padding: 0;
    min-height: 0;
    position: relative;
}

#dfbAnnotationModal .modal-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

/* Toolbar buttons */
.dfb-anno-toolbar .btn {
    padding: 0.2rem 0.45rem;
    line-height: 1;
}

.dfb-anno-toolbar .btn.active {
    background-color: var(--bs-danger);
    color: #fff;
    border-color: var(--bs-danger);
}

/* Color picker styled to match toolbar */
.dfb-color-picker {
    width: 28px;
    height: 28px;
    padding: 1px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    background: none;
}

.dfb-color-picker::-webkit-color-swatch-wrapper {
    padding: 1px;
}

.dfb-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

/* Canvas wrapper — absolute fill within modal body */
#dfb-anno-canvas-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dfb-anno-canvas-wrap .canvas-container {
    margin: 0 auto;
}

/* Region selection overlay — styles are inline on the element for z-index reliability */