/* Custom styles for the repair service system */

/* CRITICAL FIX: Force hide mobile tasks button on desktop */
@media (min-width: 768px) {
    #mobileTasksToggle {
        display: none !important;
    }
}

/* General styling */
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Card enhancements */
.card {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Status badges */
.badge {
    font-size: 0.75em;
    font-weight: 600;
}

/* Form enhancements */
.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-text {
    font-size: 0.875em;
    color: var(--bs-secondary);
}

/* Fix for form-select to prevent rendering issues */
.form-select {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
}

.form-select option {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Remove any duplicate dropdown arrows */
.form-select::-ms-expand {
    display: none;
}

/* Specifically target status dropdown to fix rendering issues */
#status, #status_mobile {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
}

/* Dark mode adjustment for dropdown arrow */
[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
}

[data-bs-theme="dark"] #status, 
[data-bs-theme="dark"] #status_mobile {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
}

/* Table enhancements */
.table th {
    border-top: none;
    font-weight: 600;
    background-color: var(--bs-light);
    color: var(--bs-dark);
}

[data-bs-theme="dark"] .table th {
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

.table-responsive {
    border-radius: 0.375rem;
}

/* Button enhancements */
.btn {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
}

.btn:hover {
    transform: translateY(-1px);
}

/* Navigation enhancements */
.navbar-brand {
    font-weight: 600;
    font-size: 13px !important;
}

.navbar-nav .nav-link {
    font-weight: 500;
    font-size: 13px !important;
    transition: color 0.15s ease-in-out;
}

/* Notification badge and button fonts */
.navbar .btn {
    font-size: 13px !important;
}

.navbar .badge {
    font-size: 11px !important;
}

/* Dropdown menu fix for z-index issues */
.dropdown-menu {
    z-index: 99999999 !important;
    position: absolute !important;
}

.navbar .dropdown-menu {
    z-index: 99999999 !important;
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    left: auto !important;
    transform: none !important;
}

.nav-item.dropdown {
    position: relative !important;
}

/* Ensure dropdown appears above all other elements */
.dropdown-menu.show {
    z-index: 99999999 !important;
    position: absolute !important;
    display: block !important;
    right: 0 !important;
    top: 100% !important;
    left: auto !important;
    transform: none !important;
}

/* Force Bootstrap dropdown to appear above everything */
.navbar-nav .dropdown-menu {
    z-index: 99999999 !important;
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    left: auto !important;
    transform: none !important;
}

/* Override any Bootstrap z-index */
.navbar, .navbar-nav, .navbar-collapse {
    z-index: 99999999 !important;
}

/* Specific fix for user dropdown menu */
.navbar-nav .nav-item.dropdown .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    left: auto !important;
    transform: none !important;
    margin-top: 0.125rem !important;
}

/* Notification system styles */
.notification-dropdown {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.notification-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.notification-item:hover {
    background-color: var(--bs-secondary-bg);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item.unread {
    background-color: rgba(13, 110, 253, 0.05);
    border-left: 3px solid var(--bs-primary);
}

.notification-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.notification-message {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.25rem;
}

.notification-time {
    font-size: 0.7rem;
    color: var(--bs-tertiary-color);
}

/* Removed pulse animation from notification count - now the bell icon blinks instead */

/* Notification bell blinking animation */
.notification-bell-blink {
    animation: notification-blink 1.5s infinite;
}

@keyframes notification-blink {
    0%, 50% {
        color: #dc3545 !important; /* Red color */
        text-shadow: 0 0 5px rgba(220, 53, 69, 0.7);
    }
    51%, 100% {
        color: inherit;
        text-shadow: none;
    }
}

/* Make sure the bell icon inherits the animation */
.notification-bell-blink .fas.fa-bell {
    color: inherit;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Dropdown menu fixes */
.navbar .dropdown-menu {
    z-index: 99999 !important;
    position: absolute !important;
}

.navbar .dropdown {
    position: relative !important;
}

/* Alert enhancements */
.alert {
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
}

.alert-dismissible .btn-close {
    padding: 0.75rem 1rem;
}

/* Modal enhancements */
.modal-content {
    border: none;
    border-radius: 0;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* Detail modal width override */
[id*="detailModal"] .modal-content {
    max-width: 1000px;
}

/* Restrict modal-header styling to non-detail modals */
.modal:not([id*="detailModal"]) .modal-header {
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-light);
}

/* Force detailModal header to use #2c3e50 color - target only the header div */
[id*="detailModal"] .modal-content > div:first-child > div:first-child {
    background-color: #2c3e50 !important;
    color: white !important;
}

/* Target header text elements specifically */
[id*="detailModal"] .modal-content > div:first-child > div:first-child h1,
[id*="detailModal"] .modal-content > div:first-child > div:first-child i {
    color: white !important;
}

/* Force all text in dark header section to be white */
[id*="detailModal"] .rounded-3.shadow[style*="background: #2c3e50"],
[id*="detailModal"] .rounded-3.shadow[style*="background: #2c3e50"] * {
    color: #ffffff !important;
}

/* Labels in dark header - light gray with 13px font */
[id*="detailModal"] .rounded-3.shadow[style*="background: #2c3e50"] .small {
    color: #f8fafc !important;
    font-size: 13px !important;
}

/* All text in dark header 13px */
[id*="detailModal"] .rounded-3.shadow[style*="background: #2c3e50"] div {
    font-size: 13px !important;
}

/* Center modal dialog - highest specificity to override all */
div[id*="detailModal"] .modal-dialog,
div[id*="detailModal"] .modal-dialog.modal-xl,
div[id*="detailModal"] .modal-dialog.modal-lg {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-width: 1000px !important;
}

/* Force detailModal buttons to use #4C5563 color - only footer and comment buttons */
[id*="detailModal"] footer button[data-bs-dismiss="modal"],
[id*="detailModal"] button[type="submit"] {
    background-color: #4C5563 !important;
    color: white !important;
    border-color: #4C5563 !important;
}

/* Calendar modal button visibility fix - ensure high contrast */
.modal[id*="detailModal"] .modal-footer button,
.modal.calendar-service-modal .modal-footer button {
    background-color: #0d6efd !important;
    color: white !important;
    border-color: #0d6efd !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

.modal[id*="detailModal"] .modal-footer .btn-secondary,
.modal.calendar-service-modal .modal-footer .btn-secondary {
    background-color: #6c757d !important;
    color: white !important;
    border-color: #6c757d !important;
}

/* Calendar notification modal button fix - target specific modal */
#notificationModal .modal-footer button {
    background-color: #0d6efd !important;
    color: white !important;
    border-color: #0d6efd !important;
    opacity: 1 !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
}

#notificationModal .modal-footer .btn-secondary,
#notificationModal .modal-footer button[data-bs-dismiss="modal"] {
    background-color: #6c757d !important;
    color: white !important;
    border-color: #6c757d !important;
}

#notificationModal .modal-footer .btn-danger {
    background-color: #dc3545 !important;
    color: white !important;
    border-color: #dc3545 !important;
}

/* Calendar Edit Modal button fix - EXACT TAILWIND OVERRIDE from DevTools */
#calendarEditModal .modal-footer button.px-6.py-2.bg-gray-600 {
    background-color: #4b5563 !important;
    background-image: none !important;
    color: white !important;
    border: 1px solid #4b5563 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
    padding: 0.5rem 1.5rem !important;
    display: inline-block !important;
}

#calendarEditModal .modal-footer button.px-6.py-2.bg-green-600 {
    background-color: #16a34a !important;
    background-image: none !important;
    color: white !important;
    border: 1px solid #16a34a !important;
    opacity: 1 !important;
    font-weight: 500 !important;
    padding: 0.5rem 1.5rem !important;
    display: inline-block !important;
}

/* Super specific selector targeting exact button classes */
#calendarEditModal button[data-bs-dismiss="modal"].px-6.py-2.bg-gray-600.text-white.rounded-lg {
    background-color: #4b5563 !important;
    background-image: none !important;
    color: white !important;
    border: 1px solid #4b5563 !important;
}

#calendarEditModal button#calendarSaveBtn.px-6.py-2.bg-green-600.text-white.rounded-lg {
    background-color: #16a34a !important;
    background-image: none !important;
    color: white !important;
    border: 1px solid #16a34a !important;
}

/* Fallback for ALL buttons in calendar modal */
#calendarEditModal .modal-footer button {
    background-color: #6c757d !important;
    color: white !important;
    border: 1px solid #6c757d !important;
    opacity: 1 !important;
    padding: 0.5rem 1.5rem !important;
}

#calendarEditModal .modal-footer button:nth-child(2) {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
}

/* Force detailModal h2 font size - only in main content */
[id*="detailModal"] main h2 {
    font-size: 1.2rem !important;
}

/* Reset any unwanted background colors on main content sections */
[id*="detailModal"] main section,
[id*="detailModal"] main div {
    background-color: white !important;
    color: inherit !important;
}

/* Force editModal header to use #4C5563 color */
[id*="editModal"] header {
    background-color: #4C5563 !important;
    color: white !important;
}

/* Force editModal buttons to use #4C5563 color */
[id*="editModal"] footer button[type="submit"],
[id*="editModal"] button.save-changes-btn {
    background-color: #4C5563 !important;
    color: white !important;
    border-color: #4C5563 !important;
}

/* Force editModal header text elements to be white */
[id*="editModal"] header h1,
[id*="editModal"] header i {
    color: white !important;
}

[data-bs-theme="dark"] .modal:not([id*="detailModal"]) .modal-header {
    background-color: var(--bs-dark);
}


/* Statistics cards */
.card.bg-primary,
.card.bg-info,
.card.bg-warning,
.card.bg-success {
    border: none;
}

.card.bg-primary:hover,
.card.bg-info:hover,
.card.bg-warning:hover,
.card.bg-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
}

/* Empty state styling */
.text-center .fa-3x {
    opacity: 0.5;
}

/* Footer styling */
footer {
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn-group .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.5rem;
    }
    
    /* Mobile modal centering */
    .modal {
        padding: 0 !important;
    }
    
    .modal-dialog {
        margin: 15px !important;
        max-width: calc(100vw - 30px) !important;
        width: calc(100vw - 30px) !important;
        position: fixed !important;
        top: 15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-height: calc(100vh - 30px) !important;
        height: auto !important;
    }
    
    .modal-content {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0.5rem 1rem !important;
    }
    
    .modal-header {
        flex-shrink: 0 !important;
        padding: 0.5rem 1rem !important;
    }
    
    .modal-footer {
        flex-shrink: 0 !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Specific styles for large modals (details and edit) */
    .modal-dialog.modal-lg {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
        width: calc(100vw - 20px) !important;
        position: fixed !important;
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-height: calc(100vh - 20px) !important;
        height: auto !important;
    }
    
    /* Specific styles for edit modals - make them taller */
    div[id^="editModal"] .modal-dialog.modal-lg {
        min-height: calc((100vh - 20px) * 0.8) !important;
        height: calc((100vh - 20px) * 0.8) !important;
    }
    
    /* Mobile-specific height for edit modals */
    @media (max-width: 768px) {
        div[id^="editModal"] .modal-dialog.modal-lg {
            max-height: 88vh !important;
            height: auto !important;
            min-height: 82vh !important;
            top: 8vh !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            margin: 0 !important;
            position: fixed !important;
            max-width: 95vw !important;
            width: 95vw !important;
        }
        
        div[id^="editModal"] .modal-content {
            height: auto !important;
            max-height: calc(88vh - 10px) !important;
            min-height: calc(88vh - 10px) !important;
        }
        
        div[id^="editModal"] .modal-body {
            max-height: calc(88vh - 10px) !important;
            min-height: calc(88vh - 10px) !important;
            overflow-y: auto !important;
            padding: 1rem !important;
        }
        
        /* Mobile-specific height for details modals */
        div[id^="detailModal"] .modal-dialog.modal-lg {
            max-height: calc(100vh - 60px) !important;
            height: calc(100vh - 60px) !important;
            min-height: calc(100vh - 60px) !important;
            top: 60px !important;
            left: 0 !important;
            transform: none !important;
            margin: 0 !important;
            position: fixed !important;
            max-width: 100vw !important;
            width: 100vw !important;
        }
        
        div[id^="detailModal"] .modal-content {
            height: calc(100vh - 60px) !important;
            max-height: calc(100vh - 60px) !important;
            min-height: calc(100vh - 60px) !important;
            border-radius: 0 !important;
        }
        
        div[id^="detailModal"] .modal-body {
            max-height: calc(90vh - 50px) !important;
            overflow-y: auto !important;
            padding: 1rem !important;
        }
    }
    
    .modal-dialog.modal-lg .modal-content {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .modal-dialog.modal-lg .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0.5rem 1rem 0.25rem 1rem !important;
    }
    
    /* Reduce bottom padding specifically for edit modals */
    div[id^="editModal"] .modal-dialog.modal-lg .modal-body {
        padding: 0.5rem 1rem 0.1rem 1rem !important;
    }
    
    /* Reduce container padding at bottom for edit modals */
    div[id^="editModal"] .modal-body .container-fluid {
        padding-bottom: 0.2rem !important;
    }
    
    /* Additional mobile-specific reductions for edit modals */
    div[id^="editModal"] .modal-content {
        margin-bottom: 0 !important;
    }
    
    div[id^="editModal"] .modal-dialog {
        margin-bottom: 5px !important;
    }
    

    
    /* Specific styles for confirmation modals (delete photo, etc) */
    .modal-dialog.modal-sm {
        max-width: 300px !important;
        width: 300px !important;
        height: auto !important;
        max-height: 400px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        position: fixed !important;
    }
    
    .modal-dialog.modal-sm .modal-content {
        height: auto !important;
        max-height: 400px !important;
    }
    

}

/* Print styles */
@media print {
    .navbar,
    .btn,
    .modal,
    footer {
        display: none !important;
    }
    
    .card {
        border: 1px solid #000;
        break-inside: avoid;
    }
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeIn 0.3s ease-in-out;
}

/* Focus management for accessibility */
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Loading states */
.btn.loading {
    pointer-events: none;
    opacity: 0.6;
}

.btn.loading::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card {
        border-width: 2px;
    }
    
    .btn {
        border-width: 2px;
    }
    
    .badge {
        border: 1px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .card,
    .btn,
    .alert {
        animation: none;
        transition: none;
    }
    
    .btn:hover {
        transform: none;
    }
}

/* FullCalendar font size override - must be at the end to override library CSS */
.fc .fc-event-title,
.fc .fc-daygrid-block-event .fc-event-time, 
.fc .fc-daygrid-block-event .fc-event-title,
.fc .fc-timegrid-event .fc-event-title,
.fc .fc-v-event .fc-event-title,
.fc .fc-h-event .fc-event-title,
#fullcalendar .fc-event-title,
#fullcalendar .fc-daygrid-block-event .fc-event-title,
#fullcalendar .fc-timegrid-event .fc-event-title {
    font-size: 10px !important;
    line-height: 1.2 !important;
    padding: 1px !important;
}

/* Calendar modal forms - font size 12px */
#assignTaskModal .form-control,
#assignTaskModal .form-label,
#assignTaskModal .btn,
#scheduleRangeModal .form-control,
#scheduleRangeModal .form-label,
#scheduleRangeModal .btn,
#scheduleMultiDayModal .form-control,
#scheduleMultiDayModal .form-label,
#scheduleMultiDayModal .btn,
#editEventModal .form-control,
#editEventModal .form-label,
#editEventModal .btn,
.calendar-sidebar .form-control,
.calendar-sidebar .form-label,
.calendar-sidebar .btn {
    font-size: 12px !important;
}

/* Repair request details modal in calendar - font size 12px */
#notificationModal .modal-body,
#notificationModal .modal-body p,
#notificationModal .modal-body div,
#notificationModal .modal-body span,
#notificationModal .modal-title,
#notificationModal .btn {
    font-size: 12px !important;
}

/* Confirmation modal (delete confirmation) - font size 13px */
#confirmModal .modal-title,
#confirmModal .modal-body,
#confirmModal .modal-body p,
#confirmModal .modal-body div,
#confirmModal .modal-body span,
#confirmModal .btn {
    font-size: 13px !important;
}