.complaint-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.status-indicator {
    font-size: 0.9rem;
    padding: 0.25rem 1rem;
    border-radius: 1rem;
}

.comment-form {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
}

.history-entry {
    border-left: 3px solid #3498db;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

/* Status Badge Colors - BOLD and VISIBLE */
.status-new {
    background-color: #0d6efd !important; /* Bright blue */
    border: 2px solid #0a58ca !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.5) !important;
}

.status-in-progress {
    background-color: #ffc107 !important; /* Bright yellow */
    color: #000 !important; /* Black text for better contrast */
    border: 2px solid #ff9800 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.6) !important;
}

.status-resolved {
    background-color: #28a745 !important; /* Bright green */
    border: 2px solid #1e7e34 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.5) !important;
}

.status-rejected {
    background-color: #dc3545 !important; /* Bright red */
    border: 2px solid #bd2130 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.5) !important;
}

.status-disputed {
    background-color: #9b59b6 !important; /* Bright purple */
    border: 2px solid #7d3c98 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.5) !important;
}

.status-stalled {
    background-color: #6c757d !important; /* Gray */
    border: 2px solid #5a6268 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(108, 117, 125, 0.5) !important;
}

/* Priority Badge Colors - BOLD and PROMINENT */
.priority-badge {
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.priority-critical {
    background-color: #dc3545 !important; /* Red */
    border: 2px solid #bd2130 !important;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.6);
    animation: pulse-critical 2s infinite;
}

.priority-high {
    background-color: #fd7e14 !important; /* Orange */
    border: 2px solid #e8590c !important;
    box-shadow: 0 0 15px rgba(253, 126, 20, 0.6);
}

.priority-medium {
    background-color: #17a2b8 !important; /* Cyan - stands out more */
    border: 2px solid #138496 !important;
    box-shadow: 0 0 15px rgba(23, 162, 184, 0.5);
}

.priority-low {
    background-color: #6c757d !important; /* Grey */
    border: 2px solid #545b62 !important;
    box-shadow: 0 0 10px rgba(108, 117, 125, 0.4);
}

@keyframes pulse-critical {
    0%, 100% {
        box-shadow: 0 0 15px rgba(220, 53, 69, 0.6);
    }
    50% {
        box-shadow: 0 0 25px rgba(220, 53, 69, 0.9);
    }
}

/* Deadline Status Indicators */
.deadline-on-time {
    color: #28a745; /* Green */
}

.deadline-warning {
    color: #ffc107; /* Yellow */
}

.deadline-overdue {
    color: #dc3545; /* Red */
}

.deadline-none {
    color: #6c757d; /* Grey */
}

/* Promise Date Display */
.promise-date-container {
    background-color: #f8f9fa;
    border-left: 4px solid #0d6efd;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-top: 1rem;
}

.countdown-timer {
    font-size: 1.1rem;
    font-weight: 600;
}

.countdown-expired {
    color: #dc3545;
    font-weight: 700;
}

/* Deadline Badge Colors for List View */
.deadline-badge-green {
    background-color: #28a745 !important; /* Green - plenty of time */
}

.deadline-badge-yellow {
    background-color: #ffc107 !important; /* Yellow - getting close */
}

.deadline-badge-red {
    background-color: #dc3545 !important; /* Red - critical */
}

.deadline-badge-overdue {
    background-color: #6c1e1e !important; /* Dark red - overdue */
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Assignment System Styles */
.pulse-animation {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(220, 53, 69, 0.8);
        transform: scale(1.02);
    }
}

/* Timeline Styles for Assignment History */
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    padding-bottom: 20px;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: -21px;
    top: 15px;
    bottom: -20px;
    width: 2px;
    background-color: #dee2e6;
}

.timeline-marker {
    position: absolute;
    left: -26px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}

.timeline-content {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #dee2e6;
}

.timeline-item.current .timeline-content {
    background-color: #e7f3ff;
    border-left-color: #0d6efd;
}

.timeline-item.current .timeline-marker {
    box-shadow: 0 0 0 2px #0d6efd;
}

/* Assignment Modal - Stunning Slide-In Animation */
.modal-assignment .modal-dialog {
    position: fixed;
    margin: 0;
    right: 0;
    top: 0;
    height: 100vh;
    max-width: 600px;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.modal-assignment.show .modal-dialog {
    transform: translateX(0);
}

.modal-assignment .modal-content {
    height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
}

.modal-assignment .modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

/* Backdrop blur effect for assignment modal */
.modal-assignment.show ~ .modal-backdrop {
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .modal-assignment .modal-dialog {
        max-width: 100%;
    }
}

/* ============================================================================
   SPRINT 3 ENHANCEMENT: Audit Form Required Banner (Persistent & Striking)
   ============================================================================ */

/* Audit Form Required Banner - Striking red gradient with animation */
.audit-form-required-banner {
    background: linear-gradient(135deg, #dc3545 0%, #bd2130 50%, #a71d2a 100%) !important;
    color: white !important;
    border: none !important;
    border-left: 5px solid #fff !important;
    animation: slideDownFadeIn 0.6s ease-out;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4) !important;
}

.audit-form-required-banner h4,
.audit-form-required-banner p,
.audit-form-required-banner small {
    color: white !important;
}

.audit-form-required-banner .btn-light {
    background: white !important;
    color: #dc3545 !important;
    font-weight: 700 !important;
    border: 2px solid white !important;
    transition: all 0.3s ease;
}

.audit-form-required-banner .btn-light:hover {
    background: #f8f9fa !important;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5);
}

/* Slide down fade in animation for banner */
@keyframes slideDownFadeIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Pulse animation for attention-grabbing elements */
.pulse-animation {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* ==========================================
   SPRINT 3: VERIFICATION REMINDER ANIMATIONS
   Friendly, persistent reminders for Page 7
   ========================================== */

/* Soft pulse for friendly reminders (not aggressive) */
.pulse-soft {
    animation: pulseSoft 3s ease-in-out infinite;
}

@keyframes pulseSoft {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
}

/* Slide in from top animation */
@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Verification reminder banner styling */
.verification-reminder-banner,
.verification-reminder-sticky {
    animation: slideInDown 0.5s ease-out;
}

/* Gentle attention grabber for icons */
@keyframes gentleWiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

.verification-icon-wiggle {
    animation: gentleWiggle 2s ease-in-out infinite;
}

/* Progress bar smooth animation */
.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 1rem 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* Friendly hover effects for buttons */
.btn-verification-friendly:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Time-based urgency colors (not aggressive, just noticeable) */
.urgency-info {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 5px solid #2196f3 !important;
}

.urgency-medium {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-left: 5px solid #ff9800 !important;
}

.urgency-high {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-left: 5px solid #ffc107 !important;
}

.urgency-critical {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border-left: 5px solid #f44336 !important;
}

/* Friendly badge styling */
.badge-verification-missing {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Mobile responsiveness for reminders */
@media (max-width: 768px) {
    .verification-reminder-banner,
    .verification-reminder-sticky {
        font-size: 0.9rem;
    }

    .verification-reminder-banner .btn,
    .verification-reminder-sticky .btn {
        width: 100%;
        margin-top: 1rem;
    }

    .verification-reminder-banner h5,
    .verification-reminder-sticky h5 {
        font-size: 1.1rem;
    }
}

/* ============================================================================
   SPRINT 6: RESPONSIVE REPORTER INFORMATION - BULLETPROOF SOLUTION
   Handles overflow at all screen sizes (mobile, tablet, desktop, ultra-wide)
   ============================================================================ */

/* Reporter Information Item - Robust Container */
.reporter-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0; /* Critical: allows flex items to shrink below content size */
    width: 100%;
}

/* Badge Responsive - Prevent Badge Text Overflow */
.reporter-info-item .badge {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.4;
    padding: 0.35em 0.65em;
    max-width: 100%;
    text-align: left;
}

/* Reporter Information Text - Smart Word Breaking */
.reporter-info-text {
    word-wrap: normal; /* FIXED: Don't wrap at all */
    word-break: keep-all; /* FIXED: Keep words/emails together */
    overflow-wrap: normal; /* FIXED: No breaking */
    white-space: nowrap; /* FIXED: Force single line */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ... if too long */
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 100%;
}

/* Contact Chip - Responsive Anonymous Contact Info */
.contact-chip-responsive {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 193, 7, 0.1);
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 152, 0, 0.3);
    min-width: 0; /* Critical: allows flex items to shrink */
    width: 100%;
}

.contact-text {
    word-wrap: normal; /* FIXED: Don't wrap at all */
    word-break: keep-all; /* FIXED: Keep words/emails together */
    overflow-wrap: normal; /* FIXED: No breaking */
    white-space: nowrap; /* FIXED: Force single line */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ... if too long */
    font-size: 0.95rem;
    line-height: 1.4;
    flex: 1;
    min-width: 0; /* Critical: allows text to wrap properly */
}

/* Responsive Breakpoints - Multi-Device Support */

/* Extra Small Devices (< 576px) - Mobile Portrait */
@media (max-width: 575.98px) {
    .reporter-info-text,
    .contact-text {
        font-size: 0.875rem;
    }

    .reporter-info-item .badge {
        font-size: 0.7rem;
        padding: 0.3em 0.5em;
    }
}

/* Handle long badge text at all sizes */
@media (max-width: 1399.98px) {
    .reporter-info-item .badge {
        font-size: 0.8rem;
    }
}

/* Small Devices (576px - 767.98px) - Mobile Landscape */
@media (min-width: 576px) and (max-width: 767.98px) {
    .reporter-info-text,
    .contact-text {
        font-size: 0.9rem;
    }
}

/* Medium Devices (768px - 991.98px) - Tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .reporter-info-text,
    .contact-text {
        font-size: 0.95rem;
    }
}

/* Large Devices (992px - 1199.98px) - Desktops */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .reporter-info-text,
    .contact-text {
        font-size: 1rem;
    }
}

/* Extra Large Devices (1200px - 1399.98px) - Large Desktops */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .reporter-info-text,
    .contact-text {
        font-size: 1rem;
    }
}

/* Ultra Wide (>= 1400px) - Ultra Wide Monitors */
@media (min-width: 1400px) {
    .reporter-info-text,
    .contact-text {
        font-size: 1rem;
    }
}

/* Special handling for narrow but wide screens (like 1240 x 464) */
@media (min-width: 992px) and (max-height: 600px) {
    .reporter-info-text,
    .contact-text {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .contact-chip-responsive {
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================================================
   RATING STARS - RESPONSIVE HANDLING
   Ensures rating section doesn't overflow on any screen size
   ============================================================================ */

.rating-stars {
    display: inline-flex;
    white-space: nowrap;
}

/* Smaller stars on very narrow screens */
@media (max-width: 575.98px) {
    .rating-stars i {
        font-size: 0.9rem;
    }
}

/* Compact spacing on medium-narrow screens */
@media (min-width: 576px) and (max-width: 991.98px) {
    .rating-stars i {
        font-size: 1rem;
    }
}

/* ========================================
   SPRINT 6: NEAR DEADLINE WIDGET STYLES
   ======================================== */

/* Widget hover effect */
.list-group-item-action:hover {
    background-color: rgba(255, 193, 7, 0.05) !important;
}

/* Progress bar styling for deadline widget */
.progress {
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    font-size: 0.75rem;
    font-weight: bold;
    transition: width 0.3s ease;
}

/* Urgency colors */
.text-warning {
    color: #f39c12 !important;
}

/* Border animation for very urgent items */
.border-warning.border-4 {
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0%, 100% {
        border-color: #ffc107;
    }
    50% {
        border-color: #ff9800;
    }
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .list-group-item .d-flex {
        flex-direction: column;
    }

    .list-group-item .text-end {
        text-align: left !important;
        margin-top: 1rem;
        margin-left: 0 !important;
    }

    .progress {
        width: 100% !important;
    }
}

/* ========================================
   SPRINT 6: ASSIGNMENT STATISTICS WIDGET
   ======================================== */

/* Stat card styling */
.stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Stat icon animation */
.stat-icon i {
    transition: transform 0.3s ease;
}

.stat-card:hover .stat-icon i {
    transform: scale(1.1);
}

/* Progress bar animation */
.progress-bar {
    transition: width 0.6s ease;
}

/* Stat grid responsive */
@media (max-width: 767.98px) {
    .stat-card h3 {
        font-size: 1.5rem;
    }
}

/* ========================================
   SPRINT 6 PHASE 3: TIMELINE WIDGET
   ======================================== */

/* Timeline container */
.timeline-container {
    position: relative;
    padding-left: 40px;
}

/* Timeline vertical line */
.timeline-container::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, #dee2e6 0%, #dee2e6 100%);
}

/* Timeline item */
.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e9ecef;
}

.timeline-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Timeline dot */
.timeline-dot {
    position: absolute;
    left: -26px;
    top: 4px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px white, 0 0 0 5px #dee2e6;
    z-index: 2;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline-item:hover .timeline-dot {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px white, 0 0 0 6px #dee2e6, 0 4px 8px rgba(0, 0, 0, 0.1);
}

.timeline-dot i {
    font-size: 0.9rem;
}

/* Timeline content */
.timeline-content {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.timeline-item:hover .timeline-content {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateX(2px);
}

/* Event type specific border colors */
.timeline-item [data-event-type="created"] + .timeline-content {
    border-left-color: var(--bs-primary);
}

.timeline-item [data-event-type="status_change"] + .timeline-content {
    border-left-color: var(--bs-info);
}

.timeline-item [data-event-type="assignment"] + .timeline-content {
    border-left-color: var(--bs-primary);
}

.timeline-item [data-event-type="assignment_accepted"] + .timeline-content {
    border-left-color: var(--bs-success);
}

.timeline-item [data-event-type="assignment_rejected"] + .timeline-content {
    border-left-color: var(--bs-danger);
}

.timeline-item [data-event-type="internal_note"] + .timeline-content {
    border-left-color: var(--bs-warning);
}

.timeline-item [data-event-type="corrective_action"] + .timeline-content {
    border-left-color: var(--bs-info);
}

.timeline-item [data-event-type="extension_requested"] + .timeline-content {
    border-left-color: var(--bs-warning);
}

.timeline-item [data-event-type="resolution"] + .timeline-content {
    border-left-color: var(--bs-success);
}

/* Timeline header */
.timeline-header h6 {
    font-weight: 600;
}

/* Timeline description */
.timeline-description {
    color: #6c757d;
    font-size: 0.95rem;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .timeline-container {
        padding-left: 30px;
    }

    .timeline-container::before {
        left: 15px;
    }

    .timeline-dot {
        left: -21px;
        width: 30px;
        height: 30px;
    }

    .timeline-dot i {
        font-size: 0.8rem;
    }

    .timeline-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .timeline-header .text-end {
        text-align: left !important;
        margin-top: 0.5rem;
    }
}