/* Conflict Resolution System Styles */

/* Modal Styling */
.conflict-resolution-modal .modal-dialog {
    max-width: 95%;
    margin: 1.75rem auto;
}

.conflict-resolution-modal .modal-content {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.conflict-resolution-modal .modal-header {
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid rgba(0,0,0,0.1);
}

.conflict-resolution-modal .modal-title {
    font-weight: 600;
    font-size: 1.25rem;
}

/* Conflict Information Alert */
.conflict-resolution-modal .alert-warning {
    border-left: 4px solid #ffc107;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.conflict-resolution-modal .alert-warning h6 {
    color: #856404;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.conflict-resolution-modal .alert-warning ul {
    list-style-type: none;
    padding-left: 0;
}

.conflict-resolution-modal .alert-warning li {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(133, 100, 4, 0.1);
}

.conflict-resolution-modal .alert-warning li:last-child {
    border-bottom: none;
}

/* Resolution Option Cards */
.conflict-resolution-modal .card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.conflict-resolution-modal .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.conflict-resolution-modal .card-header {
    font-weight: 600;
    border-radius: 8px 8px 0 0 !important;
    padding: 0.75rem 1rem;
}

.conflict-resolution-modal .card-header h6 {
    margin: 0;
    font-size: 1rem;
}

.conflict-resolution-modal .card-body {
    padding: 1rem;
}

/* Alternative Time Options */
.alternative-times {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 0.5rem;
    background-color: #f8f9fa;
}

.alternative-times .form-check {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.alternative-times .form-check:hover {
    background-color: #e9ecef;
}

.alternative-times .form-check-input:checked + .form-check-label {
    font-weight: 600;
    color: #007bff;
}

.alternative-times .form-check-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

/* Resolution Option Radio Buttons */
.conflict-resolution-modal .form-check {
    padding: 0.75rem;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.conflict-resolution-modal .form-check:hover {
    background-color: rgba(0,123,255,0.05);
    border-color: rgba(0,123,255,0.2);
}

.conflict-resolution-modal .form-check-input:checked + .form-check-label {
    font-weight: 600;
}

.conflict-resolution-modal .form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

/* Status Badges */
.badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
}

.badge-success {
    background-color: #28a745;
    color: white;
}

.badge-warning {
    background-color: #ffc107;
    color: #212529;
}

.badge-info {
    background-color: #17a2b8;
    color: white;
}

.badge-primary {
    background-color: #007bff;
    color: white;
}

.badge-secondary {
    background-color: #6c757d;
    color: white;
}

/* Action Buttons */
.conflict-resolution-modal .modal-footer {
    border-top: 2px solid rgba(0,0,0,0.1);
    padding: 1rem;
}

.conflict-resolution-modal .btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    transition: all 0.2s ease;
}

.conflict-resolution-modal .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.conflict-resolution-modal .btn-primary {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border: none;
}

.conflict-resolution-modal .btn-secondary {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    border: none;
}

/* Quick Conflict Indicator */
.conflict-indicator {
    animation: slideDown 0.3s ease;
}

.conflict-indicator .alert-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 6px;
    margin: 0;
}

.conflict-indicator .alert-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

.conflict-indicator .alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

/* Ensure admin desktop topbar/nav respects responsive intent.
   Some legacy project CSS sets display on nav elements without
   breakpoint awareness and can force the desktop topbar to be
   visible on small screens. This narrow override re-applies the
   intended Tailwind behavior for elements that use the
   "hidden lg:flex" pattern. Loaded last so it wins.
*/
@media (max-width: 1023px) {
    /* Elements that carry both `hidden` and `lg:flex` should remain hidden on small screens */
    .hidden.lg\:flex {
        display: none !important;
    }
}

/* Waitlist Enhancements */
.waitlist-table .btn-warning {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    border: none;
    color: #212529;
    font-weight: 500;
}

.waitlist-table .btn-warning:hover {
    background: linear-gradient(135deg, #e0a800, #d39e00);
    transform: translateY(-1px);
}

/* Loading States */
.btn .fa-spinner {
    margin-right: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .conflict-resolution-modal .modal-dialog {
        max-width: 95%;
        margin: 1rem auto;
    }
    
    .conflict-resolution-modal .row {
        flex-direction: column;
    }
    
    .conflict-resolution-modal .col-md-6 {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .alternative-times {
        max-height: 150px;
    }
}

@media (max-width: 576px) {
    .conflict-resolution-modal .modal-content {
        margin: 0.5rem;
        border-radius: 8px;
    }
    
    .conflict-resolution-modal .modal-header {
        padding: 0.75rem;
    }
    
    .conflict-resolution-modal .modal-body {
        padding: 0.75rem;
    }
    
    .conflict-resolution-modal .card-body {
        padding: 0.75rem;
    }
    
    .conflict-resolution-modal .btn {
        padding: 0.375rem 1rem;
        font-size: 0.875rem;
    }
}

/* Animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.conflict-resolution-modal {
    animation: fadeIn 0.3s ease;
}

.conflict-resolution-modal.show {
    display: block !important;
}

/* Card Header Icons */
.card-header i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

/* Form Check Customization for Better UX */
.conflict-resolution-modal .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    margin-right: 0.75rem;
}

.conflict-resolution-modal .form-check-label {
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: pointer;
}

/* Priority Levels Visual Indicators */
.card-header.bg-success {
    background: linear-gradient(135deg, #28a745, #1e7e34) !important;
}

.card-header.bg-info {
    background: linear-gradient(135deg, #17a2b8, #117a8b) !important;
}

.card-header.bg-danger {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
}

.card-header.bg-secondary {
    background: linear-gradient(135deg, #6c757d, #5a6268) !important;
}

/* Scrollbar Styling for Alternative Times */
.alternative-times::-webkit-scrollbar {
    width: 6px;
}

.alternative-times::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.alternative-times::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.alternative-times::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}