/**
 * Bulk Delete ULTRA-SPECIFIC Styles - v5.0
 * Maximum specificity to override ALL other styles
 */

/* ===========================
   BULK DELETE BUTTON
   =========================== */

button.btn-bulk-delete,
.nav-btn.btn-bulk-delete {
    padding: 10px 16px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    background: white !important;
    color: #333 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    white-space: nowrap !important;
}

button.btn-bulk-delete:hover,
.nav-btn.btn-bulk-delete:hover {
    background: #f8f9fa !important;
    border-color: #999 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* ===========================
   MODAL STRUCTURE
   =========================== */

#bulkDeleteModal.modal {
    display: none;
    position: fixed !important;
    z-index: 9999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    align-items: center !important;
    justify-content: center !important;
}

#bulkDeleteModal .modal-content {
    background-color: #fefefe !important;
    margin: auto !important;
    border: none !important;
    width: 90% !important;
    max-width: 700px !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    animation: modalSlideIn 0.3s ease-out !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#bulkDeleteModal .modal-header {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    color: white !important;
    padding: 20px 25px !important;
    border-radius: 12px 12px 0 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#bulkDeleteModal .modal-header h2 {
    margin: 0 !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: white !important;
}

#bulkDeleteModal .modal-header .close-modal,
#bulkDeleteModal .modal-header .close,
#bulkDeleteModal .modal-header button.close-modal {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

#bulkDeleteModal .modal-header .close-modal:hover,
#bulkDeleteModal .modal-header .close:hover,
#bulkDeleteModal .modal-header button.close-modal:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

#bulkDeleteModal .modal-body {
    padding: 30px !important;
    background: white !important;
}

#bulkDeleteModal .modal-footer {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    padding: 20px 30px !important;
    border-top: 1px solid #e0e0e0 !important;
    background: #f8f9fa !important;
    border-radius: 0 0 12px 12px !important;
}

/* ===========================
   SECTION STYLES
   =========================== */

#bulkDeleteModal .section-title,
#bulkDeleteModal h3.section-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    color: #2c3e50 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#bulkDeleteModal .section-title i {
    color: #3498db !important;
    font-size: 18px !important;
}

#bulkDeleteModal .section-divider,
#bulkDeleteModal div.section-divider {
    height: 1px !important;
    background: linear-gradient(to right, transparent, #e0e0e0, transparent) !important;
    margin: 25px 0 !important;
    border: none !important;
}

/* ===========================
   DELETE TYPE TABS
   =========================== */

#bulkDeleteModal .delete-type-section {
    margin-bottom: 0 !important;
}

#bulkDeleteModal .delete-type-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

#bulkDeleteModal .delete-type-tab,
#bulkDeleteModal button.delete-type-tab {
    padding: 16px 20px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
}

#bulkDeleteModal .delete-type-tab i,
#bulkDeleteModal button.delete-type-tab i {
    font-size: 24px !important;
    color: #7f8c8d !important;
    transition: all 0.3s ease !important;
}

#bulkDeleteModal .delete-type-tab span,
#bulkDeleteModal button.delete-type-tab span {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #2c3e50 !important;
    display: block !important;
}

#bulkDeleteModal .delete-type-tab small,
#bulkDeleteModal button.delete-type-tab small {
    font-size: 12px !important;
    color: #95a5a6 !important;
    display: block !important;
}

#bulkDeleteModal .delete-type-tab:hover,
#bulkDeleteModal button.delete-type-tab:hover {
    border-color: #3498db !important;
    background: #f8f9fa !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1) !important;
}

#bulkDeleteModal .delete-type-tab.active,
#bulkDeleteModal button.delete-type-tab.active {
    border-color: #3498db !important;
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%) !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2) !important;
}

#bulkDeleteModal .delete-type-tab.active i,
#bulkDeleteModal button.delete-type-tab.active i {
    color: #3498db !important;
}

/* ===========================
   QUICK FILTERS
   =========================== */

#bulkDeleteModal .date-filter-section {
    margin-bottom: 0 !important;
}

#bulkDeleteModal .quick-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

#bulkDeleteModal .quick-filter-btn,
#bulkDeleteModal button.quick-filter-btn {
    padding: 14px 20px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

#bulkDeleteModal .quick-filter-btn i,
#bulkDeleteModal button.quick-filter-btn i {
    font-size: 20px !important;
    color: #95a5a6 !important;
    transition: color 0.3s ease !important;
}

#bulkDeleteModal .filter-label,
#bulkDeleteModal .quick-filter-btn .filter-label,
#bulkDeleteModal button.quick-filter-btn .filter-label {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #2c3e50 !important;
    flex: 1 !important;
    text-align: left !important;
}

#bulkDeleteModal .filter-count,
#bulkDeleteModal .quick-filter-btn .filter-count,
#bulkDeleteModal button.quick-filter-btn .filter-count {
    font-size: 13px !important;
    color: #7f8c8d !important;
    background: #f0f0f0 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
}

#bulkDeleteModal .quick-filter-btn:hover,
#bulkDeleteModal button.quick-filter-btn:hover {
    border-color: #3498db !important;
    background: #f8f9fa !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.1) !important;
}

#bulkDeleteModal .quick-filter-btn:hover i,
#bulkDeleteModal button.quick-filter-btn:hover i {
    color: #3498db !important;
}

#bulkDeleteModal .quick-filter-btn.active,
#bulkDeleteModal button.quick-filter-btn.active {
    border-color: #3498db !important;
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%) !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2) !important;
}

#bulkDeleteModal .quick-filter-btn.active i,
#bulkDeleteModal button.quick-filter-btn.active i {
    color: #3498db !important;
}

#bulkDeleteModal .quick-filter-btn.active .filter-count,
#bulkDeleteModal button.quick-filter-btn.active .filter-count {
    background: #3498db !important;
    color: white !important;
}

/* ===========================
   DATE RANGE SECTION
   =========================== */

#bulkDeleteModal .date-range-section,
#bulkDeleteModal div.date-range-section {
    padding: 20px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
}

#bulkDeleteModal .range-header h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#bulkDeleteModal .range-header h4 i {
    color: #3498db !important;
}

#bulkDeleteModal .date-inputs {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 15px !important;
    align-items: end !important;
    margin-bottom: 15px !important;
}

#bulkDeleteModal .date-input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

#bulkDeleteModal .date-input-group label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #7f8c8d !important;
}

#bulkDeleteModal .date-input-group .form-control,
#bulkDeleteModal .form-control,
#bulkDeleteModal input.form-control {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    transition: border-color 0.3s ease !important;
    background: white !important;
    color: #333 !important;
}

#bulkDeleteModal .date-input-group .form-control:focus,
#bulkDeleteModal .form-control:focus,
#bulkDeleteModal input.form-control:focus {
    outline: none !important;
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1) !important;
}

#bulkDeleteModal .date-separator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #95a5a6 !important;
    font-size: 16px !important;
    padding-bottom: 10px !important;
}

/* ===========================
   PREVIEW SECTION
   =========================== */

#bulkDeleteModal .preview-box {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%) !important;
    border: 2px solid #81c784 !important;
    border-radius: 8px !important;
    padding: 18px !important;
}

#bulkDeleteModal .preview-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#bulkDeleteModal .preview-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #2c3e50 !important;
}

#bulkDeleteModal .preview-item i {
    color: #66bb6a !important;
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
}

#bulkDeleteModal .preview-item span {
    font-weight: 600 !important;
}

/* ===========================
   BACKUP SECTION
   =========================== */

#bulkDeleteModal .backup-section {
    background: linear-gradient(135deg, #fff3cd 0%, #fff8e1 100%) !important;
    border: 2px solid #ffc107 !important;
    border-radius: 8px !important;
    padding: 18px !important;
    margin-top: 25px !important;
}

#bulkDeleteModal .backup-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

#bulkDeleteModal .backup-header i {
    color: #f57c00 !important;
    font-size: 18px !important;
}

#bulkDeleteModal .backup-header strong {
    color: #e65100 !important;
    font-size: 15px !important;
}

#bulkDeleteModal .backup-description {
    color: #795548 !important;
    margin: 0 0 12px 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

#bulkDeleteModal .backup-description code {
    background: rgba(0, 0, 0, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-family: 'Courier New', monospace !important;
}

/* ===========================
   BUTTONS
   =========================== */

#bulkDeleteModal .btn,
#bulkDeleteModal button.btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
}

#bulkDeleteModal .btn-secondary,
#bulkDeleteModal button.btn-secondary {
    background: #95a5a6 !important;
    color: white !important;
}

#bulkDeleteModal .btn-secondary:hover,
#bulkDeleteModal button.btn-secondary:hover {
    background: #7f8c8d !important;
}

#bulkDeleteModal .btn-danger,
#bulkDeleteModal button.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3) !important;
}

#bulkDeleteModal .btn-danger:hover:not(:disabled),
#bulkDeleteModal button.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4) !important;
    transform: translateY(-1px) !important;
}

#bulkDeleteModal .btn:disabled,
#bulkDeleteModal button.btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

#bulkDeleteModal .btn-info,
#bulkDeleteModal button.btn-info {
    background: #3498db !important;
    color: white !important;
}

#bulkDeleteModal .btn-info:hover,
#bulkDeleteModal button.btn-info:hover {
    background: #2980b9 !important;
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

@media (max-width: 768px) {
    #bulkDeleteModal .modal-content {
        margin: 20px !important;
        width: calc(100% - 40px) !important;
    }

    #bulkDeleteModal .delete-type-tabs {
        grid-template-columns: 1fr !important;
    }

    #bulkDeleteModal .quick-filters {
        grid-template-columns: 1fr !important;
    }

    #bulkDeleteModal .date-inputs {
        grid-template-columns: 1fr !important;
    }

    #bulkDeleteModal .modal-footer {
        flex-direction: column !important;
    }

    #bulkDeleteModal .modal-footer .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}