/**
 * =============================================================================
 * Bug Report Feature Styles
 * =============================================================================
 * Styles for the bug report modal and admin pages.
 * Supports both light and dark themes using CSS variables.
 * =============================================================================
 */

/* -----------------------------------------------------------------------------
   Bug Report Button in Navbar
----------------------------------------------------------------------------- */

/* Hide caret on bug report link while preserving its space for alignment */
.navbar-nav .nav-link[data-bs-target="#bugReportModal"]::after {
    visibility: hidden;
}

/* -----------------------------------------------------------------------------
   Bug Report Modal
----------------------------------------------------------------------------- */

#bugReportModal .modal-content {
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary, #212529);
}

#bugReportModal .modal-header {
    border-bottom-color: var(--border-color, #dee2e6);
}

#bugReportModal .modal-footer {
    border-top-color: var(--border-color, #dee2e6);
}

#bugReportModal .form-control,
#bugReportModal .form-select {
    background-color: var(--input-bg, #ffffff);
    color: var(--text-primary, #212529);
    border-color: var(--border-color, #ced4da);
}

#bugReportModal .form-control:focus,
#bugReportModal .form-select:focus {
    border-color: var(--primary-color, #0d6efd);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Dark theme modal styles */
.theme-dark #bugReportModal .modal-content {
    background-color: var(--bg-primary, #1e1e1e);
    color: var(--text-primary, #f8f9fa);
}

.theme-dark #bugReportModal .modal-header {
    border-bottom-color: var(--border-color, #495057);
}

.theme-dark #bugReportModal .modal-footer {
    border-top-color: var(--border-color, #495057);
}

.theme-dark #bugReportModal .form-control,
.theme-dark #bugReportModal .form-select {
    background-color: var(--input-bg, #2d2d2d);
    color: var(--text-primary, #f8f9fa);
    border-color: var(--border-color, #495057);
}

.theme-dark #bugReportModal .form-control::placeholder {
    color: var(--text-muted, #6c757d);
}

/* Close button in dark mode */
.theme-dark #bugReportModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* -----------------------------------------------------------------------------
   Admin Bug Reports List
----------------------------------------------------------------------------- */

/* Status badges */
.badge.bg-primary {
    background-color: #0d6efd !important;
}

.badge.bg-warning.text-dark {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.badge.bg-success {
    background-color: #198754 !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
}

.badge.bg-info {
    background-color: #0dcaf0 !important;
}

.badge.bg-dark {
    background-color: #212529 !important;
}

/* New report highlight */
.table tr.table-warning {
    --bs-table-bg: rgba(255, 193, 7, 0.15);
}

.theme-dark .table tr.table-warning {
    --bs-table-bg: rgba(255, 193, 7, 0.1);
}

/* -----------------------------------------------------------------------------
   Admin Bug Report Details
----------------------------------------------------------------------------- */

/* Pre-wrap description display */
.bg-light {
    background-color: var(--bg-secondary, #f8f9fa) !important;
}

.theme-dark .bg-light {
    background-color: var(--bg-secondary, #2d2d2d) !important;
}

/* Resolution box styling */
.border-success {
    border-color: #198754 !important;
}

.bg-success.bg-opacity-10 {
    background-color: rgba(25, 135, 84, 0.1) !important;
}

.theme-dark .bg-success.bg-opacity-10 {
    background-color: rgba(25, 135, 84, 0.15) !important;
}

/* Admin notes box styling */
.border-warning {
    border-color: #ffc107 !important;
}

.bg-warning.bg-opacity-10 {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.theme-dark .bg-warning.bg-opacity-10 {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

/* -----------------------------------------------------------------------------
   Bug Report Confirmation Page
----------------------------------------------------------------------------- */

.fa-check-circle.text-success {
    color: #198754 !important;
}

/* -----------------------------------------------------------------------------
   Validation States
----------------------------------------------------------------------------- */

#bugReportModal .is-invalid {
    border-color: #dc3545 !important;
}

#bugReportModal .is-valid {
    border-color: #198754 !important;
}

#bugReportModal .invalid-feedback {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
----------------------------------------------------------------------------- */

@media (max-width: 576px) {
    #bugReportModal .modal-dialog {
        margin: 0.5rem;
    }

    #bugReportModal .modal-body {
        padding: 1rem;
    }
}